Design for a responsive reading experience: Typography first

by Foolproof

There are so many unique mobile and tablet devices released every month that it can be hard to keep up. But every user wants the same thing from the web – to consume content.

Irrelevant of what devices they are on, which browser they are using, or wherever they may be. This is what we should be designing for – the reading experience, not the device.

Lately, the main argument about responsive isn’t about it’s effectiveness, but actually on how the layout will adapt from one breakpoint to another. Whilst this is important, the real challenge on mobile devices is to allow the user to easily read content and accomplish tasks.

How content is presented can make or break your design. If your content isn’t easy to consume then a user will often simply go and look for what they want somewhere else. It will influence how someone understands your content as well as how your brand is portrayed. So it’s easy to see that great typography is vital – if you take this away you’re just left with images, which alone are redundant.

Designing a good responsive reading experience means designing with typography first. Only a few factors will draw the line between success and failure, beyond the standard rules of kerning, line spacing and ligatures.

Here are the key issues that you should consider:

Reading distance

The size of the type used depends on reading distance. Tablets are generally held further away than a smartphone, so even if the font size is technically the same across both, it is perceived as being smaller on a device that is further away. Different fonts will also read better at different sizes so there is no exact science for this. When in doubt, always have a minimum body copy size of 16px for breakpoints on tablet and below.

Viewport Width and Height

CSS3 allows Typography to be set as a percentage of the viewport screen. This allows for far more control than rems (relative ems - type measurement) alone, as it ensures that the relationship between the header and body copy are standard across every device, rather than different font sizes at different breakpoints. Although, pixels should always be used as a back up for browsers that do not support CSS3.

Content Hierarchy

Hierarchy decides how a user reads content and scans through a page. By differentiating one piece of text from another, the user knows where to start and stop reading. If the content is organized correctly, the user can get to the information they want with ease. On smartphone devices especially this is vital. If a user has to scroll for (what feels like) forever to get to information, chances are they wont try and find out anything else.

Viewport aspect ratio and device orientation

A heading that fits perfectly on one line on a mobile device in landscape may take up too much vertical space when orientated portrait. This aspect ratio issue can cause the user to have to scroll unnecessarily. Consider this when applying Typography, but other solutions such as adaptive mobile content could also be considered.

Pixel density

This issue really only effects the thinner/lighter fonts. On high resolution displays, thin fonts look great but on standard displays, especially on small screens there is more anti-alias, making them appear pixilated and much more difficult to read.

What does this mean for you as a designer?

The overarching reasons for good typography across all devices can be summarised in every point of Dieter Rams: Ten principles for good design. For example, ‘Good design makes a product useful’. If someone is viewing your website, on any device, they’re doing it for a reason. If someone can’t read you’re content because it’s been designed in a font that is too small or just looks like one giant block of copy, it becomes useless.

Overall, the best way to be able to check if your typography is working or not, is not just to resize your browser to breakpoints but also test it out on as many different devices and screen resolutions as possible, and adjust accordingly. The best part is, it is not that technically difficult to do so, but it is vital that typography is given the same amount of thought as the other elements of the design.

What do you think?