A typeface is the name of a specific collection of related fonts. A font refers to the weight, width and style within that typeface. For example, Helvetica is a typeface. It's made up of a collection of fonts, with different weights, styles and sizes.
When designing for online experiences, we need to be more aware of the typefaces we’re choosing and how they might impact the reading experience for our users. However, the terms readability and legibility are often used interchangeably when, really, they mean different things. Let's get into what the differences are.
Legibility is a function of typeface design. It's an informal measure of how easy it is to distinguish one letter from another in a particular typeface.
Other common characteristics that lead to a typeface being more legible include:
Text readability is about the reader and how easily content can be read. There are many different factors that play into text readability, including the typeface used, the letter shapes, sizes and spacing, and even the overall page layout. Poor readability can also change how a reader engages with content – if your content isn't readable, a user likely won't even read it!
Based on countless studies from the past 15 years, we know that when it comes to consuming content on the web, people scan considerably more than they read (some studies have indicated that people read as little as 20 to 28% of web page content). So you can see why it's essential to look at both legibility and readability.
For legibility, we want to ensure we're giving users the ability to scan efficiently, and when a user does slow down to read content, we want to make sure the typeface is comfortable and easy to read.
Let’s see what this looks like in practice. In this next section, we'll share some examples of obvious readability issues and highlight design characteristics that would improve readability.
Headings are essential for scanning, so even though it might be tempting to use a more unique, visual striking typeface, we have to prioritize their purpose. An example of choosing style over function is the Finsol website, which uses the Parabole typeface for headings. In particular, characters such as “H” and “X” are almost indistinguishable. The use of all caps further reduces the reader's ability to scan content.
On the positive side, smaller headings and body content use Graphik, which is very easy to read and scan. This is a solid foundation to build on.
Some companies, like Tailwind CSS, use more simple typefaces for their brand. In this case, they’re using Inter, a highly legible and readable typeface. Not only does it have nine different weights, but it was also specifically designed for computer screens. This is the perfect example of a typeface that suits the purpose of its application – Tailwind is a UI framework, so Inter needs to work well at multiple sizes and in different components.
Although Inter is a highly legible and readable typeface, its one downfall is that it lacks personality. To get around this, it’s accompanied by vibrant colours, gradients and interesting UI elements. They’ve also used multiple different font weights, which makes the overall design look more compelling.
We don’t often see a mix of characters and numbers together, but there are instances where this happens, such as flight numbers on airport, airline and travel websites. In these cases, it's critical that the typeface letters and numbers are easily distinguishable from one another.
The LAX website uses Montserrat typeface, and there are a few cases where characters and numbers can be mistaken for one another. It’s hard to tell the difference between the number “1” and letter “I” or the number “5” and letter “S.”
For the Toronto Pearson website redesign, accessibility was top of mind. For that reason, we picked the typeface Source Sans Pro, as it was created for legibility in UI. You can see this when comparing letters such as “I” and number “1” – they're easier to distinguish because the “1” has a stem in addition to an ascender at the top. Source Sans Pro also has an open and friendly simplicity to it, which is something you may not always get with a highly readable and legible font.
When a character can’t be displayed in a font, it's replaced with a little rectangular box. Fun fact: this symbol has come to be known as “tofu,” because it looks like a block of tofu! While it has a cute name, it’s not great if you’ve ever experienced seeing one of these while reading something on the web. It means that the typeface doesn’t support multiple languages and, therefore, is not accessible, readable or legible for users all over the world.
Inclusivity through type was a big enough issue for IKEA that in 2020, they switched to Noto Sans, because their former typeface didn’t support Asian characters. Noto, which is short for “no tofu,” is one of the most expansive typographic families ever made. It supports 800 languages and 100 scripts in up to 8 different weights and, as the name suggests, no tofu.
One of the most unique things about Noto is that it includes a font collection (which they call Noto Sans Canadian Aboriginal) to support Indigenous languages in Canada that use the syllabics writing system. This enables Indigenous language speakers to digitize and preserve their languages on the internet and in print. To cover all the languages in BC, the provincial government merged Noto Sans and Noto Sans Canadian Aboriginal into a single font, BC Sans font, so their communication would be accessible to all 5 million residents.
With so many typefaces to choose from, we know from personal experience that it can take hours to pick just one! Here are our tips for narrowing down your options:
We hope these examples break down the myth that designing for accessibility means compromising on aesthetics. Using this knowledge, you can use typefaces that contribute to immersive storytelling while still caring about accessibility.
If you’re interested in reading more about this topic, here are some other articles that we enjoyed reading:
Sorry, we couldn’t find anything that matches your search.