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.
Read Next
3 Essential Design Trends, May 2024
Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…
20 Best New Websites, April 2024
Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…
Exciting New Tools for Designers, April 2024
Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…
14 Top UX Tools for Designers in 2024
User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…
By Simon Sterne
What Negative Effects Does a Bad Website Design Have On My Business?
Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…
10+ Best Resources & Tools for Web Designers (2024 update)
Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…
By WDD Staff
3 Essential Design Trends, April 2024
Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…
How to Plan Your First Successful Website
Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…
By Simon Sterne
15 Best New Fonts, March 2024
Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…
By Ben Moss
LimeWire Developer APIs Herald a New Era of AI Integration
Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…
By WDD Staff
20 Best New Websites, March 2024
Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…
Exciting New Tools for Designers, March 2024
The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…