Selecting the right fonts for a design project is always a tricky business. For a start, your client will likely require a particular typeface (or even a bespoke one) be used. But the last thing you want is to take your designs out to user research only to discover that the text is illegible (or at least difficult to read) for many users. Bear in mind that:
- 1 in 30 people in the UK is visually impaired;
- Around 15% of the UK population has dyslexia;
- 1.5 million people in the UK have a cognitive disability.
That’s quite an audience. If you were to say to your client that you could increase the effective audience reach by 15% just by making the content more legible to those with dyslexia, you would probably get an enthusiastic response.
Note that Dyslexia is not a visual impairment. Rather, it is a neurological condition that affects the processing of word comprehension.
With specific regard to the design of fonts, below is a quick approach to ensuring that your font selections will be accessible to all.
People do not usually parse individual characters (or even words) when reading. In fact, the eye scans text and parses patterns (that is, groups of characters, typically 6–9 at a time). The brain then converts these ‘shapes’ into meaningful text. All this happens without you being consciously aware of it. Only when we encounter unfamiliar characters or words do we pause to deconstruct what we are reading.
So if a font is not designed sufficiently well it can make it difficult for users to differentiate between letter shapes and make reading the text problematic (and even impossible for many with certain disabilities and special needs). In particular, there are three main font design characteristics that cause problems, namely:
- Imposters
- Mirroring
- Discernibility
Imposters
Imposters are specific letter shapes that are designed in such a way that they are similar to other letter shapes (an uppercase i and a lowercase l, for example). This can make it very difficult for users to differentiate between the characters in question. Take a look at the figure below. The examples show characters I, l, 1 (i.e., uppercase i, lowercase l, and the number 1).
You can immediately see that in the case of Gill Sans, to the left, it is virtually impossible to differentiate the letterforms. But Assistant, to the right, has very distinctive letterforms, making it much easier to read. Be sure to check for these imposters at a minimum (there can be others) when evaluating fonts for a project.
Mirroring
Next up is mirroring. This refers to flipping letters back to front. A hiccup in the brain’s shape translation process, if you like. We all flip characters in this way as children, but the processing improves in time and everything eventually works as it should. But some people never naturally correct the neurological condition and flipping letters is a lifelong behaviour. As such, letter pairs should never be the mirror image of one another. The figure below shows two letter pairs, d+b and q+p.
Helvetica, to the left, suffers mirroring – the two letters in each pair are exact mirrors of one another and therefore ambiguous when flipped. Raleway, on the other hand, has unique shapes are can therefore be differentiated even when flipped.
Discernibility
Many low-vision users have difficulty discerning similar shapes. This is especially true for the characters o, c, or e. If the letters are confused, then obviously the text is harder to read. Take a look at the figure below, which compares uppercase and lowercase c, o, and e.
The things to look for are apertures and counters. Apertures are the openings of a partially close shape (e.g., the gap between the opening of the c). Counters are the enclosed shape in a letterform (the internal area of an o or p, for example).
From the figure above, you can see that the apertures in Public Sans, to the left, are close enough together that some users will mistake them as being closed completely, confusing c with o, or e with o. By contrast, Commissioner has nice wide apertures, making it much easier to distinguish the letterforms.
It’s not just the character design you have to think of. There is also the matter of how the type is formatted on the screen. WCAG requires that there is no loss of content when the user overrides style properties. Specifically:
- Line height (leading) to at least 1.5x the font size;
- Spacing following paragraphs to at least 2x the font size;
- Letter spacing (tracking) to at least 0.12x the font size;
- Word spacing to at least 0.16x times the font size.
Ensure that your page text can be modified by the user without it disappearing or overlapping other page content. You can find out more at WCAG 1.4.12 Text Spacing.
When selecting fonts for any project, include even a rudimentary check for accessibility as part of your selection criteria. Using the letters for comparison shown in the examples above is a good starting point. It will not be as thorough as user testing, of course, but it’ll certainly help you to separate the wheat from the chaff.