5 rules for choosing the perfect web typeface

Selecting a typeface for a project is a defining moment. Occasionally you’ll be looking to add personality to a design, although that is usually best left to display type. For body text, most of the time, you’re aiming for legibility.

Legibility and readability are frequently confused; legibility refers to the the ease with which letters are recognized, readability refers to the ease with which words, sentences and paragraphs are read. The former frequently delivers the latter.

Every project has its own requirements, and no single typeface will ever fit every situation. However, in the case of body text for the Web, there are key characteristics that you should be looking for.

1. Large, open counters

Counters are the white space in the center of letters like ‘o’ and ‘c’. Large counters increase legibility because they form distinctive shapes within the numerous vertical strokes that make up the latin lowercase.

Typefaces with large counters tend towards a large x-height (the height of the lowercase ‘x’) in comparison with the typeface’s ascenders and descenders (the extended strokes on letters such as ‘b’ and ‘p’). The increased x-height allows for adequate whitespace in letters such as the ‘e’.

In addition to large counters, legible typefaces also tend to have open counters with wide apertures, in letters such as the ‘c’ and ‘s’.

A typeface that does this exceedingly well is Łukasz Dziedzic’s Lato. Lato features a generous x-height, supported by large, open counters.

As well as large counters, look for sharp angles at the joints of letters like ‘d’, ‘p’, and ’n’: due to the nature of pixels, the angle increases the whitespace, making counters appear larger. This effect can also be seen in semi-counters, such as the whitespace beneath the shoulder of the letter ‘r’.

2. Even strokes

A frequent argument amongst designers is whether serif or sans-serif typefaces are more legible. Some argue that serifs increase the unity of a word shape, others argue that serifs confuse shapes at small sizes, others argue it’s simply a question of familiarity. Whatever your persuasion you’ll find extensive studies that both prove and disprove your point of view.

The truth is that sans serifs are marginally more legible, not due to the serifs, but due to other characteristics common to the style. More specifically, serifs extend from a calligraphic tradition and so tend to feature greater stroke contrast. Thinner strokes tend to disappear at smaller sizes, so any typeface with thin strokes built-in tends to lose legibility on screen.

Most typefaces will feature some stroke contrast in order to be optically balanced (horizontal strokes appear optically thicker than vertical strokes of identical thickness) but lesser contrast produces greater legibility.

There are, however, plenty of modern serifs that perform exceptionally well on screen.

FF Tisa is a highly legible typeface. In addition to its large counters, its stroke contrast is minimal. FF Tisa has a companion sans serif typeface: FF Tisa Sans. Compare the two and it’s clear that it’s the large x-height, substantial counters, and minimal stroke contrast that produce its legibility, not the presense or absence of serifs.

If you look carefully you’ll see that FF Tisa has marginally more stroke contrast than FF Tisa Sans. You’ll also see that in some characters, the ’s’ for example, the serifs close the apertures a little. That should indicate that Tisa Sans is marginally more legible than Tisa, but serifs deliver an additional benefit…

3. Distinct letterforms

When you trial a typeface intended for screen use, before you try your name, your domain name, or anything jumping over anything else, try out the text ‘1Illinois’.

Ultimately you’ll want to try out numerous combinations, but ’1Illinois’ is the only phrase you need to shortlist a typeface. Not only does it contain open and closed counters, and an arch to judge stroke contrast, it also includes some of the most problematic characters in a typeface: the number 1, the uppercase I, the lowercase l, and to a lesser extent the lowercase i.

Take the classic example of Gill Sans. It’s a beautifully drawn typeface, but it doesn’t work on screen. Type ‘1Illinois’ in Gill Sans and you’ll see the letters are indistinguishable at any size. This is where serif typefaces — that lose a small amount of legibility with greater stoke contrast and tighter apertures — get back onto even footing with sans serifs. Compare Merriweather with Gill Sans and you can see that despite Gill Sans’ substantially simpler letterforms, Merriweather is far more legible due to the distinct characters that are easier to achieve with the addition of serifs.

Distinct letterforms aren’t the exclusive preserve of serifs. Fira does an excellent job by distinguishing between characters with a variation in height, and tails on the lowercase ‘l’.

Ideally you’ll find a typeface with variety throughout the character set. Typefaces with a traditional double story ‘a’ and ‘g’ tend to be more legible than a geometric sans such as Futura.

One of my personal favourites is Ideal Sans. It manages only slight distinction between uppercase ‘I’ and lowercase ‘l’, but look closely and you’ll see that virtually every stroke is distinct. The asymmetry and variation between characters that usually mirror each other produces a highly legible typeface when set at normal text sizes.

4. Consistent rhythm

Rhythm is one of the most important factors in a typeface, because we process text in saccades — small jumps along the line — which are easier to process if spacing is consistent.

A typeface can’t control the inter-line spacing of text, but it does control the vertical spacing; it’s possible to adjust tracking for text, tightening it for display text and loosening it for body text, but that doesn’t adjust the rhythm of the strokes that are built into the typeface.

Apart from its tight apertures, poor rhythm is one of Helvetica’s weakest points. Compare it to Dalton Maag’s Effra, or Łukasz Dziedzic’s More Pro which has beautiful rhythm.

Don’t look for a typeface with mathematically exact vertical rhythm; to achieve that a type designer would usually have to distort letters to the point that they would lose legibility in other ways. Look instead for a typeface that tends towards a predictable rhythm.

5. Secret weapon

There is a secret weapon that you can use when selecting type for the Web that is obvious, but frequently overlooked.

All of the most legible typefaces I have so far recommended in this article were designed in the last six years — Lato (2010), FF Tisa (2008–10), FF Tisa Sans (2011), Merriweather (2013), Fira Sans (2013), Effra (2008), More Pro (2010) — by type designers who were specifically designing for screen use.

Helvetica is a dreadful choice for the Web, but how could it be anything else when it began its life not six, but almost sixty years ago?

If in doubt, check when a typeface was designed. If it was released in the last few years then (with a few deliberate exceptions) it probably anticipates use on the Web.

Conclusion

Every project has specific requirements that will affect your choices. I’ve focused on lowercase examples because most body text is lowercase, but if you’re designing a dashboard you’ll probably need to pay extra attention to numerals; if you’re designing for an international brand you’ll probably need an extended character set.

The joy of typography is that every project has use cases that mean that no one typeface is always the best option.

Look for generous counters, even stokes, distinct letterforms, and consistent vertical rhythm. Focus your search on typefaces designed in the Web era.

Since the advent of web type we’ve begun developing a distinct typographic style that addresses the restrictions of the media, and the typefaces that prosper most online are those that were designed to.

Ben Moss

Ben Moss has designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. When he’s not in front of a screen he’s probably out trail-running.