During a weekend in June, Matthijs Kleverlaan and I traveled to Brighton UK for a conference and workshop on Web Typography. Excellent! At the English seaside, working with and listening to renowned speakers in the fields of typography and responsive design. That, and decent burgers… Read on to find out what I took away from all that.
The web has always been responsive, we just decided to ignore that for the last 20 years
The first websites consisted of pure typography (read: Times New Roman and hyperlinks) and were perfectly responsive. The size of the screen didn’t matter: text would reflow as needed, but left much to be desired for in terms of layout. Along the way, possibilities grew and in a search for more control on the design we all started placing content in fixed boxes and defined ‘web standards’ based on screen resolutions. What this came down to, is that we assumed 80% of the users would have a screen resolution up to 1024 x 786, while disregarding the rest: too bad for them! Which was fine… for the time being. But did this do the readability of things any good?
WYSIWTFOMG?!
With the rise of small laptops, smartphones and tablets and their wide range of viewports, all the problems of this approach to design surfaced… And along with these problems, comes the wish for a more mature web and a permanent solution to the (typographic) ‘issues’. There it was: Responsive design.
Responsive design and typography?
Go grab an old-fashioned, well designed book… I’ll wait for you. Got one? Perfect. Now hold this book at a comfortable reading distance and take a close look at the text. Specifically at the layout of the text; the font, the font-size, the line-height, the contrast values and, maybe most important of all, the width of a paragraph. Nice isn’t it? Now compare this to a website with a long piece of text on your favorite screen. It’s a completely different story, isn’t it?
When we start working on a ‘responsive design’ we often immediately think about ‘breakpoints’, ‘devices’ and ‘grids’. But what defines all these things? Exactly! Content and therefore also copy! Visitors come to your website for 1 task; finding the content they’re looking for, which often consists of or at least contains text. So this content should be leading for the design of the website and it’s breakpoints. The question is: What viewport am I on, what is the context (if remotely possible to determine) and what can I do to present the content in the best possible way.
This means that the typography of this content should ideally adapt to the viewport and if possible, even to the situation.
Devices & context
Keep that old-fashioned book at hand for a bit longer
Text that needs to be read on a smartphone? Lower the font size and line height in comparison to, for instance those used on an iPad, since the eye of the user will probably be closer to the device. Keep the formatting to a minimum (by that I mean any additional decoration of the text) because screen real-estate is limited. Also the connection can be slow or performance might be an issue. Used exotic webfonts? Some devices struggle with these more than others, so perhaps considering a fall-back font would be a good idea.
Is the same text being viewed on a desktop with a decent screen? Then the font-size can be a lot bigger, the line height can be increased and there is more freedom for different styles (quote’s, introductions etc) because the user will be sitting further away from the screen, will probably have a decent broadband connection and will have a browser with more screen real-estate and support for more features. Perhaps here you can offer users that one perfectly-spaced-and-aesthetically-oh-so-pleasing webfont, just because you can. But be aware that more screen real-estate doesn’t mean your paragraphs can have an infinite width. (Almost) nothing is as annoying to read as a paragraph that is too wide.
When holding these three (mobile, desktop, book) ‘viewports’ at their optimal viewing distance, you should preferably experience a similar layout considering font-size, line-spacing, contrast and width.
Progressive Enhancement
So, how do we achieve this? By designing typography for the least capable viewport and browser and then offer a better experience, a better ‘design’ as soon as the specifications for the viewport and browser can accommodate it. This is called Progressive Enhancement.
( link ) Through these techniques (+ mediaqueries) we can offer every viewport and browser the experience they can properly render. This way we can provide the end-user a pleasant, readable and in most cases even aesthetically pleasing typography, regardless of their viewport. Beautiful examples are: The Great Discontent ( link), iA.net and Mark Boulton’s Blog ( link).
In short: a web that reads like a good and well designed book, but without dog-ears or coffee stains and with e-mail, Twitter and Facebook.
