How to choose an accessible font

Aesthetics, brand attributes and on-device distribution are often the key considerations when designers and marketers come to select the fonts and typefaces they want to use in their marketing communications, but another important factor that shouldn’t be overlooked is accessibility: can the chosen fonts easily be read, and therefore understood, by people of all abilities.

Accessibility is an important issue for anyone not wanting to limit audience comprehension or market size due to poor font choices. 

Why is it so important? Approximately 3% of adults in countries such as the US and UK are vision-impaired, while about 15% have dyslexia, which is a difficulty decoding letters that causes reading difficulties.

On its own, a typeface doesn’t guarantee accessibility, but some fonts are definitely easier to read than others, particularly for anyone with a disability or learning difference such as dyslexia, so it’s worth understanding the basic principles that underpin this.

ℹ️ There are many elements within accessibility to consider in addition to font choice - see the Web Content Accessibility Guidelines for the latest recommendations on web accessibility. Created by the World Wide Web Consortium, WCAG guidelines cover things like the presentation of text, images, audio and visual media, use of colour and many other considerations for making websites and services as accessible as possible.

To understand more about how to ensure your font choices help, rather than hinder, comprehension of your messaging, read on. 

Typography — the basics

Typography, or the craft of giving human language a clear, intelligible visual form, comes with its own highly technical language, so it may be worth recapping a few of the basics. 

Typography starts with a typeface, which is an alphabet and associated characters that share a common design. Within a typeface — sometimes called a font face or font family when it comes to digital fonts — a font is a set of characters with a common size, weight and style.

There are two main types of typefaces — serif (those that have small, decorative strokes or ‘feet’ at the tip or foot of the characters) and sans-serif (those that don’t). Within those two overarching categories are myriad individual typefaces, which can be further divided into categories that have common characteristics, such as Old Style, Transitional, Modern, Script, Handwriting, Geometric Sans-serif, Humanist Sans-serif, Decorative, and so on.

An individual typeface will have particular characteristics that are common to its characters, such as stroke weight, direction and variation, the size and shape of the bowl and the counter (the curved, enclosed part of a letter and the space it encloses), the size of the apertures in particular letters, and the height and shape of the ascenders (stroke height above a typical lower-case ‘x’) and descenders (stroke length below the baseline on which the letters rest).

Within each typeface or font family there may also be a number of style variations of design, weight, size and orientation — such as regular, thin, italic, bold, condensed and so on — that together define an individual font, which will have its own purpose and personality.

Other things to consider are the leading (the distance between individual characters), kerning (distance between lines of text), hierarchy (the way type is presented to establish an order of importance) and alignment (how text flows relative to a page, image or box).

What to look for in an accessible font

There are a few key elements to keep in mind when choosing fonts to ensure they can be read by as many people as possible.

Put simply, look for a font that is simple, clear and avoids the particular design ambiguities that can cause confusion for readers by following these principles:

1. Avoid complex letter forms
2. No identical or imposter letter shapes
3. Unique letter pairs
4. Prominent ascenders and descenders
5. Loose apertures and open counter spaces
6. Varied character width
7. Sufficient letter spacing and kerning
8. Avoid italic fonts 

Let’s have a look at these in turn:

1. Avoid complex letter forms

Complex script fonts and highly decorative display fonts with lots of flourishes and curlicues that obscure the actual shape of the letter should be avoided to increase readability. Ideally, an ‘F’ should not look like an ‘S’, a ‘V’ or any other letter.

2. No identical or imposter letter shapes

This is when certain glyphs are used to represent several similar letters or characters, making it impossible to tell them apart, other than by context. The most common examples are capital ‘I’, lower-case ‘l’ and the number 1.

In the examples below, you can see it’s very difficult to distinguish these three glyphs in Gill Sans, while only the ‘1’ is unique in Arial. In contrast, all three glyphs are distinct from each other in PT Sans, while in Open Sans the lower-case ‘l’ is slightly taller..

3. Unique letter pairs

Dyslexic readers often confuse the letters p and q, and the letters b and d. To minimise this, look for fonts in which these pairs are not the exact mirror image of each other but include other distinguishing features, such as a tail on the ‘q’.

In this example, ‘p’ and ‘d’ in Gill Sans are mirrored opposites of ‘q’ and ‘b’ respectively in Gill Sans, but in Open Sans, where the bowl meets the vertical stroke is slightly different in ‘p’ and ‘d’ than for ‘q’ and ‘b’.

4. Prominent ascenders and descenders

Prominent ascenders and descenders are commonly found in fonts that are inherently more accessible. 

In the examples below, Open Sans and PT Sans have more prominent ascenders and descenders. 

5. Counters and apertures

Fonts with narrow bowls and counters and tight apertures can be harder to read and cause confusion between letters such as ‘o’, ‘c’ and ‘e’. 

6. Varied character width

Avoid monospaced fonts, in which letters such as ‘w’ and ‘v’ or ‘m’ and ‘n’ are the same width, in favour of proportional fonts that have varied character widths.

In this example, Courier is a monospaced font, while Open Sans is proportional.

7. Sufficient letter spacing and kerning

Ensure your chosen font incorporates distinct spaces between letters, particularly when it comes to glyphs such as ‘r’ and ‘n’ — the lack of which can cause words such as ‘barn’ to be read as ‘bam’ and ‘modern’ as ‘modem’.

8. Avoid italics

In one study that assessed font readability, dyslexic readers took longer to read italic styles across a variety of typefaces. And screen readers often ignore italicised or bolded fonts, making them unreadable for blind users.
 
So are there some clear winners when it comes to choosing a more legible and therefore more accessible font? Here are some example typefaces to consider that are inherently accessible:

How to apply your accessible font

Choosing the right typeface for the job can help you with legibility and offer better readability but by themselves, fonts don’t guarantee accessibility.

It’s important to apply the other WCAG guidelines around the treatment of text and other elements on your website: 

1. Use a limited number of typefaces and fonts
2. Establish an information hierarchy
3. Avoid justified text
4. Ensure sufficient contrast between the text and the background
5. Avoid very small font sizes
6. Avoid presenting text in all-caps
7. Limit line width 
8. Consider leading or line spacing as well as kerning.

Let’s go through these in a little more detail:

• Use a limited number of typefaces and fonts

Choosing one font for body copy and a contrasting font for headlines will serve most purposes and reduce the cognitive load on the reader.

• Establish an information hierarchy

Make the relative importance of information clear by structuring text elements with headers, clear sub-headers and body copy.

• Avoid justified text

Text that is aligned on one side, such as the right or left, is easier to read than when it is force-justified on both sides, as it requires irregular spacing between words and letters to achieve this effect, which disrupts and slows the way the brain interprets the text. 

• Ensure sufficient contrast between the text and the background

Use colour/contrast testing tools and simulators to measure contrast ratios for your online designs. WCAG contrast guidelines recommend small text should have a contrast ratio of at least 4.5:1 against its background, while large text (18pt and larger) should have a contrast ratio of at least 3:1.

Use blocks of colour as background, and avoid red/green contrasting combinations.

Beware of using light colours for text, especially grey, as it can be hard to read.

• Avoid very small font sizes

Base fonts should not be too small and font size should be defined with a relative value (ex. %, rem, or em) to allow easy resizing.

WCAG guidelines require the end user to be able to override page styles for paragraph spacing to 200 per cent of the font size without loss of content or functionality,   and make similar adjustments to text line height/spacing, word spacing and letter spacing. 

• Avoid presenting text in all-caps

All-caps text is harder to read because there is no variation in letter heights, so use it sparingly. 

• Limit line width

WCAG guidelines suggest a maximum line width of 80 characters for any paragraph or section of text so that lines can be read on a single screen without scrolling horizontally, aiding readability.

• Consider leading or line spacing as well as kerning

It’s important to take into account the vertical space between lines of text, as well as the space between letters. WCAG guidelines outline the recommended spacing at the end of sentences and between paragraphs relative to line height. Under most circumstances, line spacing should not exceed 2.0, and the spacing between paragraphs should not exceed 2.0 times larger than the line spacing, or you risk distracting your readers.  

Finally, a word on serif and sans-serif fonts: Sans-serif fonts are held to be more readable on screens, or for beginning readers, while serif fonts are generally accepted to aid readability when it comes to long passages. 

However, high screen resolutions have superseded some of these rules and there are highly legible, readable and accessible fonts available in both categories, so choose whichever ticks the most boxes for your brand, channel and audience. 

As well as generally following accessibility principles and guidelines when selecting and applying a font or typeface, choosing one that is familiar to your audience will also help to make your messaging as readable as possible.