Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, the founder of typography magazine 8 Faces, one half of Viewport Industries, and an electronic musician.

The typography-out approach in the world of browser-based web design

Posted on 07 October 2011 6 comments

Article illustration for The typography-out approach in the world of browser-based web design

‘Typography first,’ said Tim Brown at last year’s Build. ‘Content-out, not canvas-in,’ said Mark Boulton at New Adventures earlier this year. Sound familiar? If you’ve seen me speak at any event in recent months, you’ll know that I reference these talks every time. They’ve cropped up a lot in recent blog posts, too.

And this is why: these concepts — or concept, I should say, as they’re essentially the same thing — should now be at the heart of everything we do. It is not the future of the web design; it is the now of web design.

For far too long, many of us (and I include myself in this group) have been guilty of focusing on decoration: the colours and the shapes and the textures. We’ve been neglecting the details. And I’m not talking about those pixel-perfect buttons with ever-so-subtle gradients and inline strokes; we can all do that. I’m talking about stripping away all the cruft and getting back to good, solid design principles, like well-formed grids and decent measures and incremental leading and appropriately paired typefaces.

As the web is content and content is type, it’s no surprise that at the heart of this approach is typography. So, for the redesign of Smashing Magazine — and the recent redesign of this very site you’re reading right now — I’ve been putting Mark and Tim’s words into practice and designing from the type outwards.

Proportionately speaking

One important benefit to this approach is that your type helps define proportions used throughout the design. I touched on this in my post ‘The relevance of the baseline grid’, in which the font size dictates the leading and the leading dictates the baseline grid and the baseline grid dictates various elements’ alignments.

On a simple, type-focused site like my own, it’s perhaps relatively easy to see these things in play. For Smashing Magazine, it’s a harder task. With so many fluctuating elements on the page, achieving consistent alignment — baseline or otherwise — is a challenge, and I’ll be the first to admit that I’m not striving for baseline alignment on the Smashing redesign.

Instead, the most prominent reason for a type-outwards approach on a site like Smashing is the content itself; that is, the article.

The article is everything

It goes without saying that the primary goal of a visitor to an online magazine is to to read the article, so it was to this particular piece of content that I turned my attention: if I could adequately typeset an article, everything else would follow. General layout could wait.

However, one type-centric point that would certainly influence layout later was the question of measure. In the last few months, I’ve been espousing the benefit of max-width to handle decent, readable measures to anyone who will listen. To some, this might appear to fly in the face of responsive web design, since some fluid layouts may at first appear to use fixed widths when seen on larger displays (this site, for instance, looks ‘fixed’ if viewed in a browser window larger than 1400px); but I say that this is responsive web design: if a layout continues to grow until the measure becomes uncomfortably long and the reader struggles to move from line to line, that is not responsive.

Screenshot

Fig. 1: Working on a page containing nothing but the article, all other design distractions were removed (apart from the necessary evil of ads, of course).

So, for both the redesign of Smashing Magazine and this site, layout changes are dictated (in part, at least) by measure.

Details, details, details

With all other design distractions removed, there is a great deal of technical attention we can pay to type once we’ve set up our basic styles. How legible is this typeface at a particular size? How well is it performing on Windows? Is there a superior version from an alternative font delivery network, that perhaps uses PostScript outlines for display sizes? Such considerations prompted me to write my ‘Choose your web fonts wisely’ post and it’s much easier to focus on these fine details when you’re looking purely at the type and nothing else.

(The same was true for my personal site’s redesign, although there are admittedly far fewer layout-related distractions. Also, I must admit that Skolar was a choice I’d already made when analysing it for Smashing and when it graced the previous version of my site.)

Browser-based web design

I haven’t yet explicitly said it, but you’ve probably guessed it by now: the entirety of this design process took (and is taking) part inside the browser. Sure, I used Photoshop to mock up some rough layout ideas, create background textures, and choose palettes, but none of those stages come into play during the process I’m talking about in this post, because the content-out approach is primarily concerned with typesetting… and you cannot accurately typeset in Photoshop. Why? Because…

  1. Type rendering in any Adobe app is radically different to type rendering in browser engines.
  2. It’s impossible to test liquid designs — and therefore how type flows from line to line, and therefore what measures are readable — in a design app that uses fixed widths (which is why I remain skeptical about Muse).
  3. There’s no way to test fonts from web font delivery networks (although this may change with Adobe’s acquisition of Typekit) unless you use the Extensis Web Font Plug-In (which is tied to their WebINK service and still doesn’t allow for testing type in actual browser rendering engines).
  4. Making virtually any change — whether it’s typeface, font size, leading line-height, colour, or padding — is far quicker and far easier to do with CSS.
  5. The browser is the final context, so why attempt to set type in something that can only produce an estimated guess of a picture of the final context?

Typesetting in Photoshop is like trying to paint a landscape with only with a couple of crayons and a poor photocopy of the scene.

Points to consider

As much as I’m advocating the type-out approach, there are some important things to consider in the process, lest we come unstuck.

The biggest potential pitfall is that while broader elements of design such as layout can be temporarily moved to the sidelines, they cannot be removed from the process entirely. This is where I stumbled during the early stages of the Smashing redesign: I had a beautifully typeset article, but upon placing it into the layout, it became apparent that it had almost no breathing room. Fortunately, this realisation didn’t require me to re-examine the article, but it did require revisions to the layout, which worked wonderfully in a vacuum — i.e.: without any content — but poorly once letters and words and sentences tried to squeeze themselves into their allotted space.

Screenshot

Fig. 2: Once placed into the layout, it became obvious that everything was too tight and caused us to ditch the full-height columns you see here.

Of further consideration is the fact that if a typeface turns out to be inappropriate for the design as a whole (which, again, is a possibility if larger design decisions are sidelined for too long), it is several magnitudes harder to replace it, since so much focus has already been placed on its own personality, intricacies, proportions, and the font’s rendering. I would add, though, that this is actually a good thing: solid proof that it pays to consider typography before all else.

For me, the Smashing Magazine redesign — while still ongoing — acted as a primer for my own site’s redesign, with many questions already answered. These two designs — and my Ampersand site from earlier this year — have opened my eyes to a content-first, type-centric approach. It’s something I should’ve started doing a lot earlier on in my career and it’s something to which we should all turn our attention.

In a recent short film made by Microsoft (which should be online very soon, I’m told), I interviewed Erik Spiekermann about (among other things) the difference between a typographic designer and a graphic designer:

A typographic designer starts by looking at the copy — so what is your smallest element? The copy? Maybe even the footnotes? — and then you go up from there, whereas the graphic designer has an image in his or her head [..] and will make that page look that way, whatever it takes.

~ Erik Spiekermann

I feel that a typography-first, content-out approach to web design moves us one step further away from the unnecessary distractions of design-for-design’s-sake and one step closer to becoming true typographers.

6 comments

  1. abdusfauzi

    abdusfauzi

    07 October 2011 @ 10:16AM #

    a very good article. during web design drafting, we tend to forgot that content are the king, and design as a supporting element.

    good luck!

  2. Fredrik Ekelund

    Fredrik Ekelund

    07 October 2011 @ 10:55AM #

    As always, inspiring and enlightening! I’m very much looking forward to seeing the Smashing re-design live I might add :)

  3. Will Grounds

    Will Grounds

    07 October 2011 @ 12:24PM #

    A very well considered and thoughtful article, I couldn’t agree more.

    Interesting to note book designers (or typographers as mentioned) have been working this way for decades, defining the smallest details and working out from those points. The same sort of approach also occurs in magazine design whereby the size of the body copy and the chosen typeface defines the leading and baseline grid, which in turn defines the sizes for headings and in many ways the whole hierarchy of the type system. Of course designers working this way often have final content to work with, which is really a necessity for this approach to work.

    I think one of the main problems was the traditional web design process, where content was often only properly considered after initial designs were signed off and built. And so without the all important ‘content’ our focus moved towards colour, shape and texture as that’s all we had to work with. Of course this also about educating clients and communicating why it would be more beneficial to work in this way. Looking forward to seeing the new Smashing mag re-design!

  4. Peter Glaab

    Peter Glaab

    09 October 2011 @ 10:42PM #

    Thanks for your well written an reflected article.

    As a Designer with strong focus on typography, I totally agree with you: even in web, content is king. Therefore we need more exchange between web- and print-designer. Of course, offline and online media do have their own rules and perceptions. But the basic principles of good and suitable typography are not a question of media. I think that outstanding sites need the best of both worlds: the technology-affine web-designer and — as you mentioned — the typographic designer with print background.

  5. Ashkas

    Ashkas

    07 October 2011 @ 06:58PM #

    This is a great time to underline this point, that of starting with the copy. It’s at the heart of the two latest improvements in web design: responsive and typography.

    On the point of Photoshop though – apart from preparing some graphics and textures for my projects, I’m not sure how people can still fit it in their prototyping phase at all. It just doesn’t seem to fit with responsive web and typography on the web.

  6. Jamie Neely

    Jamie Neely

    10 October 2011 @ 09:51AM #

    Great stuff, Elliot.

    There’s a cleansing feeling about working from the type-out, after working from graphics-in for so many years. It’s very liberating.

    I chuckled when I read your crayons and photocopies analogy :)

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Harmony and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.