Typefaces and written content.

Using fonts effectively to aid readability.

Choosing the right typefaces can greatly improve accessibility on web.

The style of typeface you use can have a big impact on the audience you are designing for.

Hierarchy and legibility are the two most important elements when it comes to typography and accessibility.

Learning Disabilities

  • Easier for these users to read rounded fonts and bigger sizes

  • Use short sentences and a logical layout.

  • Both titles and body fonts should be legible, clear and easy to read.

Select a button to see the different compliances.
Typefaces Low deficiency illustration

Visual Impairments

  • Distinguishable characters in typefaces (like ascending characters) need to be differentiable from capital letters.

  • There needs to be a logical hierarchy - some users need to use screen readers.

  • Be aware of the size of your font. 

Select a button to see the different compliances.
Typefaces AAA Accessible illustration

AAA Accessible

  • Clear and legible body font. 

  • Correct headings, font hierarchy and page naming

  • Optimal number of characters per line, line height and clear link purpose

  • Text is easy to understand, no loss of content when making text bigger

Select a button to see the different compliances.
Typefaces Compliant illustration

Compliant

  • Pages are correctly titled

  • Input assistance when users make mistakes

  • Small text has proper contrast and is in a legible

Select a button to see the different compliances.

Click anywhere to reveal

WARNING - This tab can cause headaches, dizziness and unsettling vision.

Not accessible

  • Hard to read for everyone

  • Fonts aren’t legible, are too small or too big

  • There is no hierarchy of text and headings

  • Changing the size of the text leads to loss of content

Select a button to see the different compliances.
Select a button to see the different compliances.
Typefaces LD illustration

Learning Disabilities

  • Easier for these users to read rounded fonts and bigger sizes

  • Use short sentences and a logical layout.

  • Both titles and body fonts should be legible, clear and easy to read.

Typefaces Low deficiency illustration

Low vision deficiency

  • Distinguishable characters in typefaces (like ascending characters) need to be differentiable from capital letters.

  • There needs to be a logical hierarchy - some users need to use screen readers.

  • Be aware of the size of your font.

Typefaces AAA Accessible illustration

AAA Accessible

  • Clear and legible body font. 

  • Correct headings, font hierarchy and page naming

  • Optimal number of characters per line, line height and clear link purpose

  • Easy understanding on text, translation pronunciation, and no loss of content when making text bigger

Typefaces Compliant illustration

Compliant

  • Pages are correctly titled

  • Input assistance when users make mistakes

  • Small text has proper contrast and is in a legible

Click anywhere to reveal

WARNING - This tab can cause headaches, dizziness and unsettling vision.

Not accessible

  • Hard to read for everyone

  • Fonts aren’t legible, are too small or too big

  • There is no hierarchy of text and headings

  • Changing the size of the text leads to loss of content

Quick Tips

Use correct headings.

Make sure you pay attention to the hierarchy of your content, as well as the naming of the information.

Don’t use font sizes below 13pt.

It always depends on the design of the font, but generally speaking font sizes below 12/13pt are not legible by most users.

Choose a readable
typeface.

Sans-serif fonts are usually more accessible than serif or display fonts. A legible serif can be used as body, but will be more tricky for users.

Optimal number of characters per line.

For body copy, the optimal number of words per line should be between 
45 and 80, including spaces.

Test fonts before signing off.

Make sure to test the font you chose in web before signing-off the font styles and the design.

Think of the users.

Adapt your design and fonts to your target audience, and always put yourself in the shoes of users.

Choosing your font

This guide will help you identify which elements to consider when
when choosing a font. Rather than official WCAG, this advice has come from designers and design research.

Imposters

When choosing a typeface, be aware of imposter letters. This is the main thing to look for, as it can really impeach legibility. A tip: write the word “Illustrate” and see how easy it is to differentiate the letters!

The most common imposters are capital letters and ascendants lowercases’s heights- the most important one being the “l” and “I”. Pay attention to the design of numbers as well.

Typography IllustrationTypography Illustration

Distinguishable uppercases

Another important element are letters that aren’t distinguishable. For example, the letters “C” and “O” can be hard to distinguish if the “C” is not open enough.

In general these 5 characters are the most important ones to pay attention to when choosing an accessible font.

Mirroring

Mirroring might be the hardest characteristic to find in body fonts. A lot of sans-serif fonts are going to be legible, but will have a lot of mirror-letters, like “q” “p” “d” and “b”.

These matters especially when your audience can be composed of early readers and people with learning disabilities.

Typography Illustration

Distinguishable lowercases

Lowercases are usually designed from the same set of modules or details - this means that the letters “a” “e””o” and “c” can look very similar, and can disturb the legibility of a text.

In general, look for characters that aren’t too closed, and when the “a” and “e” aren’t too similar.

Choosing your font

This is a guide of specific elements
a designer should look for when
choosing a font - specifically a font
used to convey key information and content. These are not official
guidelines.
This is a guide of specific elements a designer should look for when choosing a font - specifically a font used to convey key information and content. These are not official guidelines.

Imposters

Typography Illustration

When choosing a typeface, be aware of imposter letters. This is the main thing to look for, as it can really impeach legibility. A tip: write the word “Illustrate” and see how easy it is to differentiate the letters!

The most common imposters are capital letters and ascendants lowercases’s heights- the most important one being the “l” and “I”. Pay attention to the design of numbers as well.

Distinguishable Uppercases

Typography Illustration

Another important element are letters that aren’t distinguishable. For example, the letters “C” and “O” can be hard to distinguish if the “C” is not open enough.

In general these 5 characters are the most important ones to pay attention to when choosing an accessible font.

Mirroring

Typography Illustration

Mirroring might be the hardest characteristic to find in body fonts. A lot of sans-serif fonts are going to be legible, but will have a lot of mirror-letters, like “q” “p” “d” and “b”.

These matters especially when your audience can be composed of early readers and people with learning disabilities.

Distinguishable lowercases

Typography Illustration

Lowercases are usually designed from the same set of modules or details - this means that the letters “a” “e””o” and “c” can look very similar, and can disturb the legibility of a text.

In general, look for characters that aren’t too closed, and when the “a” and “e” aren’t too similar.

This is some text inside of a div block.

WCAG Guidelines

Official guidelines regarding typefaces.
LEARN MORE
A Accessible illustration

A Accessibility

Operable User Interface
  • Navigable (users are helped in navigating content)
  • Pages are titled in a way that describes their topic and purpose
  • Link purpose can be determined by text alone or in context
Understandable User Interface
  • Input assistance with mistakes (help users when making mistakes)
  • In there is an input error, it can be easily identified
  • Labels or instructions are provided when content requires user input.
AA Accessible illustration

AA Accessibility

Perceivable User Interface
  • Distinguishable Content
  • Text can be resized without assistive technology up to 200 percent without loss of content or functionality.
  • When changing style properties (like text spacing), there should be no loss of content or functionality.
Operable User Interface
  • Navigable
  • Headings and labels describe topic or purpose.
Understandable User Interface
  • Input assistance with mistakes (help users when making mistakes)
  • Error suggestions and preventions.

AAA Accessibility

Perceivable User Interface
  • Distinguishable Content
  • Width of NO MORE than 80 characters
  • Text is not justified 
  • Line spacing is at least x1.5
Operable User Interface
  • Link purpose
  • Possibility to explain abbreviations, unusual words, pronunciations.
  • Input assistance (help and error prevention).
AAA Accessible illustration

A Accessibility

A Accessible illustration
Operable User Interface
  • Navigable (users are helped in navigating content)
  • Pages are titled in a way that describes their topic and purpose
  • Link purpose can be determined by text alone or in context
Understandable User Interface
  • Input assistance with mistakes (help users when making mistakes)
  • In there is an input error, it can be easily identified
  • Labels or instructions are provided when content requires user input

AA Accessibility

AA Accessible illustration
Perceivable User Interface
  • Distinguishable Content
  • Text can be resized without assistive technology up to 200 percent without loss of content or functionality
  • When changing style properties (like text spacing), there should be no loss of content or functionality
Operable User Interface
  • Navigable
  • Headings and labels describe topic or purpose.
Understandable User Interface
  • Input assistance with mistakes (help users when making mistakes)
  • Error suggestions and preventions.

AAA Accessibility

AAA Accessible illustration
Perceivable User Interface
  • Distinguishable Content
  • Width of NO MORE than 80 characters
  • Text is not justified 
  • Line spacing is at least x1.5
Operable User Interface
  • Link purpose
  • Possibility to explain abbreviations, unusual words, pronunciations
  • Input assistance (help and error prevention)

Resources

Resource name
Black circle with arrowPink circle with arrowBlue circle with arrow

One of our favorite when doing web design.

Colour Contrast Checker
Black circle with arrowPink circle with arrowBlue circle with arrow
WACG Guidelines
Black circle with arrowPink circle with arrowBlue circle with arrow

Have a look at the official guidelines.

Examples

Example
Black circle with arrowPink circle with arrowBlue circle with arrow
Example
Black circle with arrowPink circle with arrowBlue circle with arrow
Example
Black circle with arrowPink circle with arrowBlue circle with arrow
Example
Black circle with arrowPink circle with arrowBlue circle with arrow
Example
Black circle with arrowPink circle with arrowBlue circle with arrow
Example
Black circle with arrowPink circle with arrowBlue circle with arrow
Example
Black circle with arrowPink circle with arrowBlue circle with arrow

Web designers naturally gravitate towards different and unique fonts, but it's important to hold the reader in mind when it comes to typography. Try to balance form and function. You can have fun with fonts when their purpose is decorative and not to convey key information or site navigation!

Colours graphic

Have a look at our other guides

Media graphic

Have a look at our other guides

Colours graphicMedia graphic