What is an accessible font?
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.
Di Mace
Communication strategist
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?
What are typography, typefaces and fonts?
Often the two words, typeface and font, are used interchangeably but in reality they're separate (but related) aspects of typography.
- Typefaces: are sets of designed text characters (e.g Arial, Helvetica, and Times New Roman) and each one is made up of a set of fonts
- Fonts: are subsets of a typeface, and each has a unique combination of characteristics including weight, style, and size (e.g 14 point and bold font in the Arial typeface)
- Typography: is how typefaces and fonts are arranged, or presented on a page or interface
Each of these three text elements play an active role in a font's readability and creating accessible typography.
What makes fonts accessible?
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:
- Font weight
- Character spacing
- X-height
- Line height
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?
1. Font weight
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.
2. Character spacing
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.
3. X-height
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.
4. Line height
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 WCAG Success Criterion 1.4.8 Visual Presentation (Level AAA) and WCAG Success Criterion 1.4.12 Text Spacing (Level AA) detail the exact typographic requirements for accessible fonts.
Font accessibility standards
ADA compliance
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:
- It’s generally best not to go below 12px with 16px as a starting point
- It performs well when it’s small or large
- It has a large x-height
- The character is large for its point size
- The metrics (such as x-height) are consistent between letterforms
- Individual letterforms are distinct in shape and unambiguous
WCAG compliance
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.
WCAG Guideline 1.4 Distinguishable
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:
- Large Text
Large-scale text and images of large-scale text have a contrast ratio of at least 3:1 - Incidental
Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement - Logotypes
Text that is part of a logo or brand name has no contrast requirement
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:
- Customizable
The image of text can be visually customized to the user's requirements - Essential
A particular presentation of text is essential to the information being conveyed
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:
- Large Text
Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1 - Incidental
See success criterion 1.4.3 for a definition - Logotypes
See success criterion 1.4.3 for a definition
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:
- Foreground and background colors can be selected by the user
- Width is no more than 80 characters or glyphs (40 if CJK)
- Text is not justified (aligned to both the left and the right margins)
- Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing
- Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window
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.
- People with some cognitive disabilities can read text better when they select their own foreground and background color combinations
- People with some cognitive disabilities can track their locations more easily when blocks of text are narrow and when they can configure the amount of space between lines and paragraphs
- People with some cognitive disabilities can read text more easily when the spacing between words is regular
Success Criterion 1.4.9 Images of Text (No Exception) (Level AAA)
- Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed
- NOTE: Logotypes (text that is part of a logo or brand name) are considered essential
Success Criterion 1.4.12 Text Spacing (Level AA)
This criteria provides guidance on how to meet text spacing requirements:
- Line height (line spacing) to at least 1.5 times the font size
Spacing following paragraphs to at least 2 times the font size - Letter spacing (tracking) to at least 0.12 times the font size
Word spacing to at least 0.16 times the font size
Benefits of using WCAG text spacing criterion
- People with low vision require increased space between lines, words, and letters
- People with dyslexia may be aided (with an increase in reading speed) through the use of increased space between lines, words, and letters
- Although not required by the success criteria, white space between blocks of text can help people with cognitive disabilities discern sections and call out boxes
Accessible typography color contrast
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 contrast between the text and background must be greater than or equal to 4.5:1 for small text and 3:1 for large text.
- Make text more readable for color-blind users, by limiting the use of reds and greens.
- Slightly temper the contrast between your text and background color. (eg. don’t use pure black text on a pure white background. Stark contrast can result in blurred or moving text for people with Irlen syndrome).
- To use text over images, add a solid background behind the text or a dark overlay to the image.
- Don’t use color alone to convey meaning. Use icons, written content, and other visual elements to reinforce clear communication of the content.
What are the most accessible fonts?
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.
What is a sans-serif font?
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.
What is a serif font?
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.
Minimum font size for accessibility
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.
Best fonts for dyslexia
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.
Best fonts for visually impared
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.
Accessible fonts help everyone
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
Communication strategist
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.