The majority of articles talking about responsive web design tend to focus on either a fluid or flexible grid and flexible images. However, as Oliver Reichenstein, founder and Director of Information Architects, points out, web design is 95% typography. So what about typography and how it interacts with responsive web design?
There are two principles to creating effective responsive typography. One is the re-sizable type, or text that is either re-sized automatically based on the size of the screen, or re-sizable by the user. The other is optimized line lengths, while maintaining readability.
See our article: 3 Simple Ways to Improve Your Website Typography
Resizable Type
For the longest time, designers used either pixels or ems for sizing their type. Pixels provided consistency due to their fixed-size but were inflexible when it came to scaling. Ems provided the scalability lacking in pixels but became increasingly confusing due to their relativity to parent elements. Meet the rem. Rems combine the consistency of pixels with the scalability of ems by remaining relative to the html element rather than individual parent elements. For responsive layouts, instead of worrying about the compounded effect of parent elements, you’re able to set your html element to font-size: 100% and forget it. And to take it a step further, optimizing ALL font sizes for different responsive breakpoints is cake. For example, if you want to increase font sizes for every bit of type on the iPad, you’re able to do so by simply declaring a greater font-size percentage.
For sizing type automatically based on the size of the screen, there are two options. The first is:
Maintaining optimum line lengths
According to the Baymard Institute, each line of type in a web design should have between 50 and 75 characters for the best usability. Maintaining this standard between different screen sizes can be tricky, but it’s attainable with the use of basic media queries and font sizes. It’s easiest to adjust the font size for different break points based on the number of characters per line. For example, if the default font size of 1em results in 100 characters per line on a mobile device, try bumping up the font size for that break point to 1.25em. Additionally, font sizes for an iPad and an iPhone should always be slightly different, since people tend to hold an iPad further away. For much larger screen (or eventually web TVs), it’s best to set your type in two columns using CSS3’s multi-column specification.
Even though responsive typography might seem confusing at first, optimizing it isn’t difficult at all. In fact, with the introduction rems, it’s actually quite easy. Providing users with legible and properly set type is just as important, if not more important that optimizing layout and/or images.
