How to Choose a Scannable Font for Your Website

Website Fonts Should Be Scannable

A typeface is widely understood to convey a tone of voice: a sinuous serif with fine details and a high contrast will generally feel formal and expensive, while a chunky sans serif with bold shapes and low contrast will generally feel honest and approachable.

A font for your headings, and most certainly for a logo, should convey the qualities you want your brand to be associated with.

However, when you choose a font for running text—running text refers to sentences and paragraphs, it is sometimes called body text—the font has a more important function: to convey the literal meaning of your text. In other words, being read is the primary function of running text.

Twenty-five years ago, usability expert Jacob Nielsen reported that people don’t read online; instead, they scan. Despite our deepening familiarity with technology over the last quarter of a century, there’s little evidence that this has changed. And so, the challenge for running text is to be read at a glance.

By all means lean into brand qualities in your headings, but when choosing fonts for running text on a website, focus on a font that is easy to scan.

What Makes a Font Scannable

Traditionally, designers have believed that we read by recognising word shapes rather than individual letters. However, this view isn’t borne out by the facts. In this fascinating study on the science of word recognition, Kevin Larson demonstrates that our brain recognises letters in a word simultaneously and then combines those shapes to identify a word.

What matters for our purposes is that context makes letters more easily identified. The letter d is more easily recognised as a d when we see it in “word” than when we see it in isolation.

We can go a step further and say that words are also more easily identified in context; the word aviary is more easily recognised when we see it in the sentence, “My canary is happy in his aviary.” Interestingly, this mirrors how AI language models generate text.

We can use this knowledge to select fonts that aid letter and word recognition, and therefore meaning recognition.

Distinctive Letterforms

There are different ways of drawing letters. For example, a geometric sans serif made up of simple shapes might appear constructed, whereas a script that looks like calligraphy might appear hand-written.

Depending on how a typeface is drawn, some shapes will repeat. The lowercase l, the uppercase I, and the number 1 are the most common examples; in some fonts, they are indistinguishable.

Our brains are very fast at learning systems. If our brain recognises that in a block of text, the lowercase l has a small tail on the end of the stroke to differentiate it from similar simple shapes, it will expect it and identify it more readily.

By selecting fonts with distinct letterforms we make our text more scannable.

Regular Rhythm

When we read, our eyes make little jumps over the text (backwards as well as forwards) in motions known as saccades. Although this happens very quickly, typically around 30 milliseconds for each saccade, when reviewing large amounts of content the time is cumulative, and taxing.

A typeface with a consistent rhythm—which means the vertical strokes of the letters appear at relatively regular intervals—is more predictable, meaning saccades are easier to perform. More efficient saccades means it is easier to quickly identify the letters, words, and, ultimately the meaning of the text.

By selecting fonts with predictable rhythm we reduce the physical and mental demands of scan-reading our text.

Wide Apertures

Aperture is the technical term for the negative space formed by the partial opening of a letter. For example, the opening on the right of a letter c or on both sides of a letter s. (Aperture only refers to the gap itself, the rest of the negative space is a counter.) Occasionally you might find a type expert referring to a counter with an aperture as an open counter; the meaning is the same.

A large counter tends to create a large x-height (literally the height of the lowercase x) which encourages more distinct letterforms. Additionally, wide apertures produce more readable text.

Wide apertures were traditionally thought to aid readability because they helped form word shapes, rather than individual letters. As we’ve seen, that rationale has been disproved, but the increased readability of wide apertures appears to hold true—there just isn’t enough research to definitively conclude why it works.

Whatever the root cause, by selecting fonts with wide apertures we create shapes that are more easily recognised.

Two Final Tips

The web has revolutionised the type design industry as much as every other aspect of our lives. Designing for screens was once a niche area; now, it’s the default target medium for the majority of typeface projects. As a consequence, if you choose a font that has been released in the last decade, you can be reasonably confident it has been optimised for readability on screens.

Whatever font you choose to display your text, your customers will struggle to read it if it’s too small. It rarely hurts to make everything larger. There isn’t a standardised size for fonts but 16px is a good starting point for text on the web, and 18px is even better.

As with most aspects of design, your users won’t notice when you get it right, but it will be as clear as day if you get it wrong.