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](https://netdna.webdesignerdepot.com/uploads/2015/03/counters-2.jpg)
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-2](https://netdna.webdesignerdepot.com/uploads/2015/03/tisa-2.jpg)
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](https://netdna.webdesignerdepot.com/uploads/2015/03/1illinois-2.jpg)
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.![rhythm-2](https://netdna.webdesignerdepot.com/uploads/2015/03/rhythm-2.jpg)
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
15 Best New Fonts, July 2024
Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…
By Ben Moss
20 Best New Websites, July 2024
Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…
Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance
WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…
By WDD Staff
Exciting New Tools for Designers, July 2024
Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…
3 Essential Design Trends, July 2024
Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…
15 Best New Fonts, June 2024
Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…
By Ben Moss
20 Best New Websites, June 2024
Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…
Exciting New Tools for Designers, June 2024
In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…
3 Essential Design Trends, June 2024
Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!
15 Best New Fonts, May 2024
In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…
By Ben Moss
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…
By Simon Sterne
20 Best New Websites, May 2024
Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…