Accessible fonts and readability: the basics
Whether that’s on your website, in documents or in the graphics you share on social media. They are an important part of how visually accessible your information is.
It’s unlikely you’ll find a single best font for reading that will suit all your users’ needs. But some fonts are generally easier to read than others.
How font choice affects accessibility
The more readable your font is, the more likely it is that people reading your content can:
- understand your message
- get the information they need quickly
The accessibility of a font can vary with different needs. This can make it difficult to choose one single, ‘accessible’ font. Font choice can particularly affect people who have:
- a visual impairment
- low literacy
- learning difficulties
- conditions like Irlen syndrome that affect the way the brain processes visual information
Choosing your font
Best standard fonts for accessibility
The good news is, many common and standard system fonts are accessible. Here are some common fonts that are generally more readable than others:
- Times New Roman
- Century Gothic
Serif versus sans serif fonts
Experts disagree on whether sans-serif fonts are better than serif fonts for readability.
Serif fonts have decorative strokes at the end of each letter. These are sometimes called ‘feet’. An example of a serif font is Times New Roman.
Sans-serif fonts do not have ornate, decorative strokes. They are simpler and more stripped back. An example of a sans-serif font is Arial.
Research suggests serif and san-serif fonts work for different groups of people. It’s a common myth that all serif fonts are inaccessible.
Some serif fonts (like Times New Roman) are popular for a reason. Partly because they are familiar. But also because they can improve readability for certain users. This is because the added strokes can make the characters more distinct.
What makes a font accessible?
If you want to choose a font that’s accessible to a wide audience, look for the following:
Simplicity and familiarity
Fonts with simple, familiar shapes are generally easier to read.
This is because most people scan through text quickly when they read. Without needing to read individual letters or words.
Fonts that are very elaborate or ornate can be difficult to read or see clearly. Even if you’re using them sparingly as headings. This is because the letter shapes are not well-defined or regular in shape and size. These irregularities mean we have to pause to examine and process the characters. This particularly applies to handwriting and script-style fonts.
Each character looks distinct from one another
When certain characters look similar, the brain has to work harder. This can affect reading speed and comprehension.
Some font families use practically identical letter shapes for different characters. These are sometimes called ‘imposter’ letter shapes. An example of a font that does this is Gill Sans. The upper case “i”, lower case “l” and the number “1” look the same next to one another.
This can also occur with “e”, “c” and “o” characters. Depending on the font, and how narrow the openings are in the “e” and “c” letter shapes, these can all look very similar.
Instead, choose a font with distinct features on these characters. Some good examples of fonts with more defined letter shapes are Tahoma and Verdana.
Letters do not mirror one another
Similarly, some characters look the same when you flip them horizontally. For example, “d” and “b” and “p” and “q”. This is also known as ‘mirroring’.
Often designers use mirrored letter shapes for consistency and to speed up the design process. But this can cause some barriers for certain readers. Particularly for some people with dyslexia who may prefer unique character shapes.
Examples of fonts that do not use mirrored letter shapes include:
- Times New Roman
Enough spacing between characters
Letter spacing is another important factor in font accessibility. Every font has different widths. And some fonts have less spacing between characters by default.
Choosing a tightly packed font can cause letters to overlap and words to look squashed. This can create barriers for certain readers. It can cause letters to blur together and become confused with other letter shapes.
For example, “r” and “n” next to one another can easily look like an “m” without enough spacing. Similarly, too much spacing between letters can also make text hard to read.
You can manually edit the spacing between letters (also known as ‘tracking’). But for usability, it’s easier to choose a font that has adequate spacing between letters as default.
This is especially a problem with narrow, condensed fonts.
Specialist fonts for accessibility
Some fonts are especially designed to be accessible for a specific group of people.
But not all ‘specialist’ fonts have research and user testing to back up their claims. The best way to find out which font your users prefer is to do user research.
Scope’s brand font Hargreaves has multiple accessible design features. It’s easy to read. It has a larger letter height and generous spacing between each letter. There’s no ambiguity between letters and numerals, like capital “i” and “I” and “1”s.
Scope named the typeface Hargreaves after William Hargreaves. The first disabled person to sit on the charity’s council back in the 1950s.
FS Me (MenCAP)
Learning disability charity Mencap developed their custom font FS Me in 2008. This was created by Fontsmith and several learning disability groups in the UK. It’s also designed for better readability.
Again, FS Me’s main feature is its differing forms and characters. Designers created:
- larger than average dots on the “i” and “j”
- simplified “a” and “g” letter shapes
- entirely unique letter shapes for the rest of the alphabet. These avoid any characters that mirror one another
Dyslexia accessible fonts
Several designers have made fonts that claim to help people with dyslexia. Either by improving reading speed or general comprehension. Examples include Dyslexie, or Gill Dyslexic.
Although there’s not enough research to suggest that they’re any better for people with dyslexia than Helvetica, Arial or Verdana.
The British Dyslexia association uses Aktiv Grotesk font for headings and body text.
Read our article on writing better content for dyslexic users.
Font styling and accessibility best practice
Choosing a readable font is a good place to start. But to be more accessible you need to consider other best practices when it comes to styling:
- Use simple and familiar fonts (like those listed above).
- Limit how many fonts and font variations you use.
- Make sure you have good colour contrast between the text and background colours.
- Avoid italics. This can make text very difficult to read, particularly for people with dyslexia.
- Avoid using all capital letters. This makes the text much harder to read.
- Try to use bold sparingly.
- Use font size 12pt to 14pt.
- Don’t use underline unless it’s a link. Most users think that underlined text is clickable and this can cause confusion.
- Larger line spacing improves readability. Line height (line spacing) should be at least 1.5 times the font size.
Fonts on the web
Instead of using pixels (px) for your website font, use responsive font-sizing instead. For example using Rem (relative to the document) or Em (relative to the nearest parent).
Doing so means that your users can change the font size in the browser to suit their needs. If you code your font in pixels, this may not be possible.
This is a really important part of:
- online accessibility
- the Web Content Accessibility Guidelines (WCAG) criteria
Use an equivalent font size of 16 pixels, then convert to rem or em.
To understand if your website or app is accessible, why not look at our accessibility audits? We can tell you how to improve the online experience of your disabled customers.
Testing your fonts
The best way to make sure the fonts you use are right for your audience is to test them with a range of users. This includes disabled people.