Some typefaces and fonts are inaccessible to people, particularly those who are aging, have a visual impairment, or a learning disorder such as dyslexia. Unless they’ve been designed with accessibility in mind, certain typefaces and fonts make it difficult to discern the difference between letter shapes – which makes it hard (sometimes impossible) to understand the content.
Creating accessible content is crucial to reducing barriers to information. So accessible typography, typeface, and font selection should be factored into the design and production of both websites and content, from the very beginning.
Elaborate fonts, while looking wonderful, often have irregular letter shapes and aren't well enough defined or regular in shape and size. This is problematic for accessibility. The same applies to handwritten style fonts. Although the Web Content Accessibility Guidelines (WCAG) don’t define specific accessible fonts, there are several typefaces and fonts widely available that aid accessibility.
Generally, accessible text is easy to see, easy to read and there’s a clear separation between the foreground and background. Your choice of typeface and use of font therefore play a crucial role. But first, what‘s the difference between the two?
Often the two words, typeface and font, are used interchangeably but in reality they're separate (but related) aspects of typography.
Each of these three text elements play an active role in a font's readability and creating accessible typography.
One aspect of accessibility is readability. This refers to how clear and understandable your language is to all audiences. The four typographic characteristics that directly influence font readability, and therefore accessibility, are:
When reading text, most of us don’t read or parse individual characters or words. Instead, your eye scans through and parses patterns and groups of characters (typically 6-9 characters at a time). These are then nearly instantaneously converted into meaning by the human brain.
However, when characters or words are unfamiliar or there’s some form of barrier introduced between that direct pattern-to-meaning process, you pause – to more deeply examine or process the characters or words. Optimal readability, avoids those interruptions.
Each of the four typography characteristics have an impact on the accessibility of text – so much so, that the WCAG 2,1 Guidelines include specific criteria for each of these areas (see next section). But what do each of them mean and what does it do?
Is important because fonts that are too dark can become unreadable. Ones that are too light can experience dropouts, but light fonts tend to be more readable because they look simpler, cleaner, and less chunky.
The spaces (or lack thereof) between letters in a word, impact readability. “Tracking” is when the horizontal spacing between all letters in a word or section of text is adjusted. It’s called “kerning” when the horizontal spacing between two adjacent letters is adjusted.
Is the vertical size of a lowercase “x” in comparison to the vertical size of an uppercase letter. Generally speaking, a taller x-height means increased readability. Try to have an x-height that’s one pixel larger than half the body size – so a 12 point typeface would have an x-height of 7 pixels.
Also called leading, it is the amount of space between lines of text (eg. if each line of type touches the lines above and below it, readability declines). Leading is often best defined as a percentage of the body text size and can vary on the device.
However, even when you do follow the four typographic characteristics and select a typeface that's considered accessible, it’s not helpful to use them in ways that create further barriers to accessibility for users.
Using fewer fonts can help overcome this issue, as can using them at an expected minimum font size of 12 points (16 pixels), however, 16 points can improve font readability for everyone (including older readers).
The Americans with Disability Act (ADA) was passed to ensure equal opportunities for individuals with disabilities. While there's no fixed ADA font size requirement, accessible ADA compliant fonts are clear, clean, and distinguishable as opposed to cursive or handwriting styles.
The ADA compliant font list includes, but is not limited to: Arial, Calibri, Century Gothic, Helvetica, Tahoma, and Verdana.
Other ADA accessible font factors to consider:
The Web Content Accessibility Guidelines (WCAG) also don’t define specific accessible fonts, however the principle for ‘Perceivable’ content (which includes the success criterion of ‘Distinguishable’, as below) states that “information and user interface components must be presentable to users in ways they can perceive.”
This principle should therefore be the foundation for selecting and using accessible fonts.
Note: The below criterion information is taken directly from the WCAG 2.1 Guidelines 1.4 Distinguishable, and covers most (but not all) of the requirements affecting text content.
This defines how to make content more distinguishable, making it easier for users to see and hear content – including separating foreground from background. The Distinguishable Guideline includes:
Success Criterion 1.4.3 Contrast (Minimum) (Level AA)
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Success Criterion 1.4.4 Resize text (Level AA)
Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
Success Criterion 1.4.5 Images of Text (Level AA)
If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:
Success Criterion 1.4.6 Contrast (Enhanced) (Level AAA)
The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:
Success Criterion 1.4.8 Visual Presentation (Level AAA)
For the visual presentation of blocks of text, a mechanism is available to achieve the following:
Benefits of using WCAG visual presentation criterion
This Success Criterion helps people with cognitive, language and learning disabilities perceive text and track their location within blocks of text.
Success Criterion 1.4.9 Images of Text (No Exception) (Level AAA)
Success Criterion 1.4.12 Text Spacing (Level AA)
This criteria provides guidance on how to meet text spacing requirements:
Benefits of using WCAG text spacing criterion
Using color combinations within your content that fall outside the WCAG’s 2.1 Guidelines for allowable contrast ratios (4.5:1 for text content, or 3:1 for interface elements) is a major problem for color blind or low-vision individuals. In addition, some eye diseases lead to a decrease of sensitivity to color contrast.
To help overcome these barriers, consider:
The most accessible fonts for all users are the simple typefaces, with sans-serif fonts. They have a slightly higher readability than serif fonts, because their appearance is more block-like and less decorative. Very complex, decorative, or handwritten typefaces should be avoided.
One of the most accessible and widely available fonts is Arial. Other accessible fonts include: Calibri, Century Gothic, Helvetica, Tahoma and Verdana – which are all sans-serif fonts.
The slab serif fonts that are considered to be accessible, but they are mostly used in headings rather than the body text. These include: Arvo, Museo Slab, and Rockwell.
Sans is the French word for “without”, so sans-serif fonts don’t have the extended lines at the top or bottom of each stroke in a letter or symbol. They are generally cleaner and simpler than serif fonts, and are also often referred to as humanistic fonts.
In a serif font, the tops and bottoms of the letters contain decorative edges called “serifs,” which are anecdotally referred to as their ‘little feet’.
There are some accessible serif fonts (see above), but in general, they’re slightly less readable (than sans-serif ones) because of those decorative elements.
As mentioned, although there are no ADA or WCAG specifications for font size, it’s widely accepted that font sizes should be no smaller than 12 points (16 pixels).
Use widely available fonts for accessibility
It’s also wise to use more common fonts over less popular ones, to increase the likelihood of your user's device (including screen reader technology) being able to correctly display the font.
Since each browser relies on its own default font when a special font isn’t available, using a more widely available font ensures that it's not replaced by a font that is not accessible.
Helvetica and Arial are among the fonts that are considered the most widely available and safest to use. Verdana is also becoming more common.
Dyslexic-friendly fonts often use thicker lines in parts of certain letters, and letters that have sticks and tails (b, d,and p) vary in length – all of which aid an increased speed of reading.
There are some fonts that have been designed specifically for dyslexia, such as Tiresias, Read Regular, Lexie Readable, and OpenDyslexic, Both Tiresias and OpenDyslexic fonts are freely available and can be downloaded without cost.
The most commonly used other options are: Arial, Helvetica, Open Sans, and Verdana.
Note: Dyslexia is not a visual impairment. It’s a neurological condition or learning disorder that affects the processing of word comprehension.
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.
Generally, Arial is one of the best fonts for vision impairment – the letters are simple and clearly different from each other and are just as clear in bold type.
Calibri is the default font selection on MS Word. It has high legibility in large print sizes and it’s easier to distinguish the letter ‘a’ from the letter ‘u’, as well as the letter ‘g’ from ‘y’ in the Calibri font.
Excuses for not doing anything are easy to find. But by doing it, accessible typography and design can positively impact someone’s life. That’s the beauty of designing with all abilities in mind – it benefits everyone, not just those with limited vision, hearing, or mobility.
If you’re in any doubt, ponder this:
Accessibility: (noun) the qualities that make an experience open to all
The more open and inclusive you are, the more accessible your design becomes. And that's a great thing for everyone.
Di Mace is a freelance copywriter and messaging strategist who's worked with both B2B and B2C brands across the country. She helps businesses identify who their best-fit customers are, what drives them to do what they do, and then crafts messages that turn them from fans into customers and evangelists.