How to Choose a Scannable Font for Your Website
The fonts you use for business communications like your website, substantially impact your bottom line by influencing the tone of your interactions with customers.
It is essential for brand recognition that you are consistent with your design choices; once you select a font, you will use it across all of your communications for the foreseeable future. The vast array of font options available combined with the significance of the decision makes selecting a set of fonts a daunting task for a seasoned designer, even more so if you’ve never picked a font before.
This simple guide will teach you what to look for.
For those who aren’t aware, the design of a collection of letters is a typeface, and the data file that contains the design is a font. However, the term font is used colloquially to cover both concepts—so I’ll use it here for consistency.
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.
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.
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.
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.
8 Highly Scannable Fonts for Websites
One of typography’s most challenging—and rewarding—aspects is that there is no single correct answer.
There is a great deal of evidence that familiarity aids readability. Consequently, different demographics will respond differently to the same typeface.
These fonts meet the standards for scannable typefaces and are an excellent place to start choosing your business’ running text font.
Fira Sans is relatively narrow but maintains wide apertures, a strong rhythm, and distinctive letterforms thanks to tails on strokes and a defining g.
Boreal is a highly legible font family created for Canadian airline Air Inuit. The simple forms feature devices such as tails on the lowercase l to aid distinct letter shapes.
GT Sectra is a contemporary serif with sharp, angular shapes. It has a relatively modest x-height but maintains wide apertures and has tremendous rhythm.
Comenia Sans was designed as a relaxed, readable font for running text like that on websites. Its wide apertures make it feel airy, and the distinct letter designs make it very scannable.
Quercus Serif has a beautiful vertical rhythm, wide apertures, and an acceptable x-height. The serifs aid in creating distinctive letterforms.
Lovelace is a homage to 19th-century old-style typography. The Display variation has narrow apertures, but they are widened for readability in the Text variation.
National is a simple, usable sans serif. Its apertures are a little narrower than ideal. However, its letters are distinctive, have great rhythm, and feel familiar.
Chronicle is a transitional serif. Designed as a font for newspaper and magazine design, the Text version checks all of the boxes for a readable serif.
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.