5 rules for choosing the perfect web typeface

Ben Moss.
March 06, 2015
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’. counters-2 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. tisa-2FF 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. 1illinois-2 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 Helveticas weakest points. Compare it to Dalton Maag’s Effra, or Łukasz Dziedzic’s More Pro which has beautiful rhythm. rhythm-2 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 is Senior Editor at WebdesignerDepot. He’s designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. One of these days he’ll run a sub-4hr marathon. Say hi on Twitter.

Read Next

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…