A Quick Guide to Responsive Typography

Share It!

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.

Webolutions Digital Marketing Agency Denver, Colorado

Free Consult with a Digital Marketing Specialist

For more than 27 years, we've worked with thousands (not an exaggeration!) of Denver-area and national businesses to create a data-driven marketing strategy that will help them achieve their business goals. Are YOU ready to take your marketing and business to the next level? We're here to inspire you to thrive. Connect with Webolutions, Denver's leading digital marketing agency, for your FREE consultation with a digital marketing expert.
Let's Go