Web Typography Challenges

by Frida Nyvall

Achieving perfect responsive typography on the web has always seemed to me like searching for the Holy Grail, or in some cases, going down a very deep rabbit hole.

Before websites were responsive, and before people were using both very narrow screens and very wide ones to consume the same website, the general idea was that type as well as websites was to be “pixel perfect”.

This idea probably stemmed from the fact that people were used to printed media like magazines and posters were printed letters never moved and where all content including images could be carefully cropped to fit nicely into a perfectly designed layout.

On the web, however, content is moving, scaling and if that wasn’t enough – it can also be dynamic or created and edited by others than professional Art Directors.­

Vertical Rhythm

Another important difference between web and print typography is that line-heights are measured from different start points in print compared to on websites. In print, characters sit on the line, like when one is manually writing on a lined sheet of paper. On the web, characters are centered in the middle of the line-height, floating in between the lines.

Even if line-heights behave differently on the web compared to print, the typographical concept of vertical rhythm can still be applied. The trick is to make sure that the height of each paragraph and the spacing between them are multiples of the same number – the base line-height. ⁽¹⁾

However, to facilitate readability, line-heights should not only take into account matching the vertical rhythm but also adjust for text size.

• Smaller font sizes require proportionally larger line spacing to be readable
• Larger font sizes (as used for headings) need smaller line spacing

Preserving Ideal Paragraph Length

Another challenge when it comes to web typography is the great variation of screen sizes. How to make the same text equally readable on screens varying in size from mobile phones to huge desktop monitors?

The general rule for readability is to have around 45-75 characters on each line⁽²⁾, which means that when a block of text is getting wider, so should the font-size in order to preserve the number of characters on each line.

If the font-size and line-height are scaling, that means the vertical rhythm also should be scaling proportionally since the base line-height will change.

Modular Scale

Creating a modular scale in web typography basically means selecting a number that represents a scale (or ratio), and multiply that number with itself for every header font-size. Handy online tools are modularscale.com or type-scale.com.

The challenge is that a modular scale that looks good on large screens might not be ideal for small screens, as it will have too prominent differences between heading sizes. The largest headings will simply look too big. A typical example scale when this happens is the popular golden ratio scale.

The solution is to be able to use one mobile-friendly modular scale for small screens, and switch to another modular scale more appropriate for larger screens when the screen size increases.

Tackling the Challenge

A lot has happened and will continue to happen in the progression of web technologies. With wider browser support for CSS technologies like calc, CSS custom properties, and the @supports rule perhaps it is possible to right now create true, responsive web typography without various SCSS or JS packages or plugins.

Interested in what solutions I arrived at? I’ve summarized the result of my investigations in the more code focused blog post “Responsive Typography with CSS Custom Properties”.

⁽¹⁾ Why is Vertical Rhythm an Important Typography Practice? by Zell Liew

⁽²⁾ Size Matters: Balancing Line Length And Font Size In Responsive Web Design by Laura Franz for Smashing Magazine

• typography
• ui
• web design