Skip to main content
Responsive Web Typography
Friday, 16 August, 2019

We’re doing it wrong: there is no ‘one perfect design’ or layout

For a very long time we’ve been chasing the ‘one layout to rule them all’ in our designs. We’ve bootstrapped, gridded, and patterned our way to a layout that works with every piece of content. Components that behave with all or none of the supported fields. Alignments that flex to fit every screen. Platforms like Medium have come along, allowing organizations to easily publish content with consistency, polish, and magazine-like style.

Except that’s not actually how great magazines are designed.

I’ve fallen into this mindset myself over the years, and while I knew that something was missing, even having studied graphic design (and done a fair amount of print work) I couldn’t put my finger on it. Until now.

Example article layouts from Vanity Fair and Communication Arts
Example article layouts from Vanity Fair and Communication Arts

Lifting our heads to see above the rut into which we’ve fallen

I’ve somehow taken it as rote you should come up with a good layout for content, give it some flexibility for different kinds of content modules like images, quotes, asides—and then use that layout for content on your site, and that layout alone. It’s gotten better over time—building in a bit more flexibility within the content modules like width, alignment, captions, and whatnot. But overall, everyone from Medium to the New York Times to [insert just about any blog here] has settled on a pretty standardized solution for presenting longer form content on the web.

A typical single-column layout on NYTimes.com
Prototypical content strip down the center of the screen on NYTimes.com

Don’t get me wrong: the focus on content, the better use of whitespace, the reduction of the claustrophobic clutter are all are good things. But while an improvement, it’s still a lot of the same. I wanted to showcase how we might vary our designs, so I grabbed a couple of magazines and started to look at their covers and tables of contents. I thought that might give me some examples to play around with. Then I started to flip through some of the articles.

Single column layout in Communication Arts
CommArts has a one-column layout, but with the veritcally set title it feels far more dynamic

A sudden, violent shift of perspective

Two column layout in Vanity Fair
Two to tango: a split layout with bold rule down the middle sets a striking tone

I counted at least six distinct layout styles in Vanity Fair, and easily as many in Communication Arts. Sure, there’s always generally some underlying similarities in grid, typography, and/or layout—but those structures get pushed and pulled quite a bit throughout both publications. TYPE magazine does this as well. If we want to create the same kind of vibrancy in our online publications, we need to rethink our notions about what makes for good design on the web. Just as it’s not necessarily true that fewer weights of a typeface makes for better typography—we shouldn’t assume that every content page should have exactly the same design. We can, to steal a phrase, think different.

Not willy-nilly-all-over-the-place different, but clear, purposeful variation that’s built into our design systems so they fit within the whole. This, coupled with a bit of per-page design flexibility afforded us by technologies like CSS Custom Properties and variable fonts, gives us the kind of layout and design flexibility that make publications like Vanity Fair so good.

Three column layout in Vanity Fair
And then there were three: a beautiful layout from Vanity Fair

Take it to the web, intrinsically

So in keeping with the idea of building on what we’ve learned, I took an article I wrote a few years ago and set it up using the styles from last week, but this time using another one of Monotype’s upcoming releases: Universe Next Variable. With it’s width range from 75%-140% and weight range from 300-900, it makes for a great set of fonts with which to experiment.

Another single column web layout
Our ‘sorta standard’ layout with a little bit of scale with headings and image

I added just enough CSS to make it a relatively familiar-looking layout of larger head and subhead, full-width images, and centered column of text. All the same attributes of scaling font size, weight, width, and line-height from last week. And the addition of some links at the top. These links trigger two additional layouts, but ones entirely driven by CSS—no markup changes were made.

A slightly more dynamic layout
We start to exaggerate the scale a bit more, and do some math to keep the wider text column while scaling the image to fill the space on wider screens

Each of the two different layouts are only 70-100 lines of CSS, but the effect is quite dramatic. All triggered by the presence of a single class. If we were to build this kind of flexibility into our content management system, the person publishing the content could make a conscious decision with each article. That, coupled with different choices on the component level for image sizes and alignments, etc, could result in a vastly more varied reading experience. We could bring design back into the publishing process. Sure, a great design system is invaluable. But that’s our plateau, from which we can launch for the peaks. Good design follows good design practices. Great design know’s how to break them.

This one pushes the scale of the text and layout a bit more, and really leverages the flexibility of Univers

When Jen Simmons coined the phrase ‘intrinsic web design’ this is what she was talking about. Reimagining the concepts of layout, typography, and hierarchy inspired by great graphic design, but realized in a way that is native to the web—embracing all of the modern techniques and technologies we have at our fingertips.

If we are to progress the state of digital design, we simply have to overcome the ‘sea of sameness’ with which we are confronted every day on the web. It’s true the web isn’t print—we want to be designing in ways that are of the web—but as of yet, we’re still decades behind our erstwhile paper-based alternatives. We can do better.

Resources

 

Sign up for the newsletterThis is an excerpt from my email newsletter devoted to web typography tips. Each issue I cover a new topic about typography for the web and digital platforms. Sometimes design focused, sometimes technical, usually a bit of both. I archive all the tips here, and all the examples are available on CodePen, so you’ll be able to quickly try out each tip live in the browser, play with it, and take it to use in your own projects.

Become a Patron!