How to Choose the Right Font for Readability
It’s an age-old question: What is the best font for a website design?
Depending on who you ask, you might get an answer that includes a specific typeface. (Designers will joke about using Helvetica for everything, but it’s doubtful as a best practice.)
The more likely question is this: What is the most readable font for a website design? And the answer is rooted in core design principles that can help you choose a beautiful, and highly readable, typeface.
Here’s how you choose the right font for readability (with examples of great font choices for inspiration).
2 Million+ Fonts, Typefaces, and Design Resources With Unlimited Downloads
Download thousands of stunning premium fonts and typefaces with an Envato Elements membership. It starts at $16 per month, and gives you unlimited access to a growing library of over 2,000,000 fonts, design templates, themes, photos, and more.
Start with the Basics of Web Typography
There are some typefaces that we all know and might consider “good” for readability. Those include a handful of simple sans serifs that have an average look and feel.
But it is more than that. The typefaces have to be paired with the right context and design.
A group of researchers for Adobe did a study that looked at a variety of typefaces and readability with a group of more than 350 users and ultimately found that font choice and readability comes down to reading speed.
They looked at these fonts (and a few others):
- Classic typefaces (Times, Helvetica, Garamond)
- Typefaces designed for computer use (Calibri, Arial)
- Typefaces specifically designed for legibility (Noto Sans, Montserrat)
The conclusion: Context and audience matter a lot. What that means for us: You have to make font choices with users in mind first.
Look at Size and Scale
Now that you are thinking about users, it’s time to think about something that pertains to your typography choice (but isn’t the font itself): the size and scale of typefaces in your project.
Size, spacing, and the overall typography scale have an immense impact on readability. The more scannable your content, the more important this consideration becomes. (It’s also more important for younger users that tend to have very short attention spans.)
Strong typography scales have a lot of variance between text elements to separate them and make reading easier. With some fonts, this isn’t hard to achieve. Others can be a challenge due to letter shapes and stroke widths.
Consider Loading and Speed
Do you know that a contributing factor to readability is how fast the fonts on a website load and render properly?
It’s one of those things that you don’t realize is wrong until you come across it. You visit a website and the font blinks or flashes with one typeface before loading another. This moment of inconsistency is enough to ruin the reading, and readability experience, for users.
Meaning, in technical terms, that you need to use fonts that work well and load fast online. Don’t try to reinvent the wheel here with oddball fonts that aren’t from a common set. For most website designs, a Google Font is generally the standard. Don’t get stuck in trying to load custom font choices if you don’t have to.
Don’t Get Too Fancy
Normal x-heights, rounded not too condensed lettering, and regular stroke widths might sound boring, but they are highly readable. Stick to them.
It really is that simple.
Pay Attention to Contrast and the Background
While background color and contrast aren’t part of a font, they greatly impact typeface selection. To ensure contrast and accessibility, take care with W3C’s guidance of using a contrast ratio of at least 4:5:1 between the text and background.
It’s more than just a best practice for accessibility. It is also a fantastic guideline for accessibility as well.
Print It Out (Seriously)
Here’s a piece of advice website designers won’t hear every day. Print out the design. Look at it on paper. Is it easy to read? Can you still read it from a little bit of distance?
These can be great guidelines for determining overall readability. If it is difficult on paper, it will likely be difficult on a screen as well.
Printing your type choices and design can also provide other readability clues. Is the typeface sharp? Does it degrade at other sizes or with other uses? (This is a factor for responsiveness.)
Does everything still look the way you intended? It’s amazing how different something can look from this new perspective.
Ask for User Feedback
It’s not always an option but when you can, ask for feedback from users.
That Adobe study found that people aren’t always the best judge of a font, but they can help you figure out if something works for your core audience. This is especially true if you use fonts that aren’t fairly neutral in design, such as scripts, novelty typefaces, or anything with an experimental type design.
Ideally, you can ask for this feedback before a website launch, but better late than never if you are questioning a font choice. Keep in mind that users don’t always know how to tell you what they would rather see in terms of readability. It’s possible that you are using a great typeface, but to be readable, it needs a change in size or scale. Stay open to these opportunities (and quick fixes).
What Font Is Best For Readability?
It all comes back to the initial question: What is the best font for readability?
While we won’t go as far as to pick a specific typeface, you can start with these three rules:
- Choose a common or Google Font.
- Choose a font that is simple (serif or sans serif) and has a regular stroke weight and x-height.
- Choose a font that works for the demographics of your audience (younger audiences prefer sans serifs, while older audiences might prefer serifs for a more traditional feel).
Conclusion
There’s no right or wrong font when it comes to readability. It’s all about application and use. When selecting a website font, think about content, context, and target audience to find something that works well.
And don’t forget to test it out. Ask users what they think. Look at analytics or use a heatmapping tool to see if the design – and font choice – is leading users through the website design in the way you want.