What is an accessible font?

Two characters A, a bigger and a smaller one

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.

Portrait photo of the post author Di Mace

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?

A word “typography” with typographical concepts highlighted on this word, like uppercase character, lowercase characters, point size, x-height, baseline, etc.

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.

Illustration on how font-weight affects font accessibility: Mereinda Regular and Merienda Bold fonts are considered less accessible than Arial Regular.

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.

Example of how character spacing affects font accessibility. The same Arial Regular font with too small or too large character spacing becomes less accessible.

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.

Two words written in different fonts, the one with a taller x-height looks more readable

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.

Two examples of text written in the same Arial Regular font but with a different line height. The text with a very small line height is less readable.

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

Get your own WCAG A-AA-AAA level accessibility checking tool. Click to discover how.

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.

Arial font that is considered one of the most accessible fonts. Illustration of how uppercase and lowercase English alphabet characters as well as numbers look in Arial font.

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.

Different phrases are written in Museo Slab font that is considered accessible, but better suited for headings.

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.

Examples of the same phrase are written in the following Sans-serif fonts: Montserrat, Lato, Poppins, Source Sans Pro, Roboto Condensed, Oswald, Inter, Raleway, Noto Sans

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’.

Examples of the same phrase are written in the following Serif fonts: Slabo, Cormorant Garamond, IBM Plex Serif, Zilla Slab, Nanum Myeongjo, Volkorn, Domine, Bree Sefif, Alegreya

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.

Card with Helvetica font examples and additional info about it. Helvetica is considered a dyslexia-friendly font.

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.

Calibri font examples. Calibri is considered low-vision-friendly 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.

Portrait photo of the post author Di Mace

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.

Accessibility Checker logo
Copyright © 2023 Tiny Technologies,
Inc. All rights reserved.
Icons used are from the Noun Project and photos from Unsplash