When I was revamping DigitalA11Y, we ensured the website was accessible in many ways. But there was one thing that stood out as missing: Accessible fonts. Through my research, I realized that not all fonts are designed with web accessibility in mind.

Now, we all understand the importance of accessibility, so I looked into the Web Content Accessibility Guidelines (WCAG).

It’s interesting to note that the Web Content Accessibility Guidelines (WCAG) don’t specify which fonts to use. However, there are certainly typefaces that can enhance accessibility significantly. Ensuring that your fonts are accessible is crucial, and there are several strategies to achieve this.
Accessible font types need to be legible, with clear height, width, and thickness characteristics. This is why it’s essential to consider typography, typeface, and font selection right from the start of the design process.

In this blog, I will take you through everything I discovered during my research. We’ll cover:

• What accessible fonts are and why we need them
• Guidelines for implementing accessible fonts
• Some of the best accessible fonts I love, like Atkinson Hyperlegible
• Fonts to avoid

What is an accessible font?

We all know how essential accessibility is but what does it mean when we talk about accessible fonts?
In simple terms, an accessible font is one that is easy to see and read, with a clear distinction between the foreground and background. This ensures that individuals with visual impairments, reading disorders, or other disabilities aren’t left behind.

Benefits of an accessible fonts for web accessibility

Expand Your Audience: Choosing the right font improves legibility and readability, making your content accessible to a broader audience.
Mitigate Legal Risks: Using accessible fonts isn’t just a good practice; it’s a legal requirement. Not adhering to accessibility standards can expose you to legal issues under regulations like the Americans with Disabilities Act (ADA).
Safeguard Your Brand’s Reputation: Ensuring your website’s fonts are accessible shows your commitment to inclusivity, enhancing your brand’s image.

Also, millions of people live with vision impairment, and it’s essential to consider their needs. Remember, it’s not just those with visual disabilities who may struggle—individuals with learning disabilities like dyslexia can also be affected by certain typefaces..

What Makes a Font Accessible?

Creating accessible text should be part of our everyday practice. Readability and legibility are essential for ensuring that everyone can engage with content on websites and other platforms.

While improving both legibility and readability is important, these concepts alone don’t guarantee full text accessibility. Let’s break them down:

• Readability refers to how easily the overall text can be understood, focusing on how smoothly the reader can process sentences and paragraphs.
• Legibility is the measure of how distinguishable individual characters and words are to the reader.

Readability

Let’s talk about readability. It’s crucial for ensuring that your text is easy to understand and quick to process. Good readability isn’t just about the words themselves; it’s about how the content is structured and flows. When text is readable, people can scan through it, grasp the meaning, and move on without any interruptions.

You might have noticed that we tend to scan text for patterns rather than reading every single letter. If the text is poorly structured or has unfamiliar characters, it can throw us off track, causing us to pause. By optimizing readability, we can help our readers glide through the content more smoothly.

The four typographic characteristics that affect readability:

• Font weight
• Character spacing
• X-height
• Line height

These elements are vital for accessibility, and the WCAG 2.1 Guidelines actually address each of them.

1. Font Weight

Let’s start with font weight. This refers to how thick or thin the strokes of a font are. Using bold or semi-bold fonts can enhance readability by creating a clear visual hierarchy. But be cautious: overly bold fonts can become hard to read, while very light fonts might lack clarity, especially for those with visual impairments.

• Key Tip: Thin fonts at smaller sizes aren’t accessible, and narrow-width fonts can be problematic too. It’s all about finding that sweet spot between weight and simplicity.

2. Character Spacing

Next up is character spacing, which is the space between individual letters. Too much or too little space can really trip up a reader. Proper spacing makes it easier to distinguish words and helps maintain the flow of text.

• Tracking is about adjusting the spacing uniformly across all characters.
• Kerning focuses on the spacing between specific pairs of characters.

3. X-Height

Now, let’s talk about x-height. This is the height of lowercase letters, and a larger x-height can significantly improve readability, particularly at smaller sizes. Taller x-heights help make those important parts of letters more visible.

• Key Tip: Aim for an x-height that’s slightly larger than half the body size. For a 12-point typeface, that means an x-height of around 7 pixels.

4. Line Height

Finally, we have line height, or leading. This is the vertical space between lines of text. Adequate line height prevents lines from crowding together, which helps your readers’ eyes move smoothly from one line to the next.

• Key Tip: Use a generous line height, but don’t make it so large that the lines feel disconnected. Also, keep your line lengths at a comfortable width to avoid reading fatigue.

Proper text spacing is essential for readability, too. Line height, letter spacing, and word spacing all play a role in how easily someone can read your content. Following the guidelines in WCAG SC 1.4.12 Text Spacing can make a significant difference for individuals with disabilities.

Legibility

Let’s dive into legibility. This term refers to how easily individual characters can be distinguished from one another. For example, confusing “b” with “d” or “6” with “9” are common issues that can stem from how characters are designed. Improving legibility is essential, especially for those with dyslexia or other reading difficulties, as it can make a big difference in their reading experience.

Key Factors Influencing Legibility

1. Similar Characters
2. Font Size
3. Font Color Contrast

1. Similar Characters

When it comes to fonts, some can blur the lines between characters, making it tough to distinguish between them—like “l” and “I.” By selecting fonts that clearly differentiate these characters, we can significantly enhance readability.

See how easy it is to distinguish

Examples of Similar Characters

Take a look at lowercase “i,” lowercase “l,” uppercase “L,” and the numeral “1.” Some sans-serif fonts make these characters nearly identical. For instance, in Helvetica, the lowercase “l” and uppercase “I” can easily be confused, whereas PT Sans clearly distinguishes them with a subtle curve at the base of the lowercase “l.”

The numeral “0” and uppercase “O” can also pose a challenge. In PT Sans, these characters can appear quite similar, while Helvetica does a better job of making them distinct.

This highlights the importance of choosing fonts that clearly differentiate these characters for improving readability and accessibility.

Mirroring and Flipping Issues

Individuals with dyslexia may struggle with mirrored characters—think of lowercase “b” and “d.” Fonts that clearly differentiate these characters can alleviate confusion. Similarly, transposing letters (like “loin” versus “lion”) is common for those with dyslexia. To help, opt for fonts where these pairs are distinct:

• qp
• db
• 0O
• il1I
• 69
• rn, m

Sans-serif fonts, in particular, can sometimes blur these lines due to their minimalist design. Look for fonts with subtle distinctions, like serifs on “1” or a tail on “l,” to enhance legibility.

On the left, you can see how Helvetica and Public Sans mirror characters. On the right, Andika offer clearer distinctions.

Open Counters

The space inside letters—known as counters—plays a vital role in readability. Fonts with open counters make characters like “o,” “e,” and “c” appear larger and easier to tell apart, which is especially beneficial for those with visual impairments.

Closed counters can make letters harder to distinguish, while open counters significantly improve clarity

2. Font Size

Choosing a legible font is only the first step—using the right font size is equally important for making your text accessible. Consider the following when selecting font sizes:

Allow Users to Control Font Size

Empowering users to adjust font size without zooming the entire page can enhance accessibility for many, particularly those with visual impairments.

Support Zooming

Make sure that content remains clear and well-structured when users zoom in by up to 200%, as mandated by WCAG standards. This means avoiding overlapping text and ensuring line heights are flexible to maintain readability even at larger sizes. The aim is to allow users to zoom in easily, without needing assistive devices to change font size.

Adding a text size slider on your site can provide users with the ability to customize their text size as needed.

Zooming and Accessibility Standards

While the WCAG and ADA don’t specify a minimum font size for web text, they do require that text can be resized up to 200% without losing content or functionality. Designers should ensure that text remains legible and usable at these larger sizes.

Mobile devices also offer system-wide font size adjustments, with Android using scalable pixels (sp) and iOS utilizing Dynamic Type. To support these features, avoid hard-coding line heights, which could lead to overlapping content when users increase font size.

Clear Hierarchy with Headers

Font size not only enhances readability but also establishes a clear hierarchy, making it easier for users to navigate content. Since people often scan headers for relevant information, use larger, fixed font sizes for main headers (like H2) and smaller sizes for subheaders (like H3). This helps users grasp the content structure quickly.

Minimum Font Size for Accessibility

While there’s no strict minimum font size required by ADA or WCAG standards, it’s generally accepted that sizes should not be smaller than 12 points (16 pixels). A good baseline is 1 rem, which equals 16px.

Highly Recommended Fonts

When it comes to web accessibility, choosing the right font can make a world of difference. Some of the top choices that are widely recognized for accessibility include Tahoma, Calibri, Helvetica, Arial, Verdana, and Times New Roman.

You might also consider slab serif fonts like Arvo, Museo Slab, and Rockwell—they’re great for headings, though they’re usually not recommended for body text.

You may have heard that sans serif fonts are often viewed as more accessible for screen readers. However, the truth is that research isn’t entirely clear on whether serif or sans serif fonts are better for readability. Ultimately, it’s up to you! Generally, sticking with familiar fonts that feature strong, distinct characters tends to produce the best results.

Why Accessibility Standards Matter

When choosing fonts, it’s essential to think beyond aesthetics. Using accessible fonts during your web design process is crucial for ensuring your content is easy to read and that your site navigation is user-friendly. This approach also helps ensure that assistive technologies, like screen readers, work effectively.

If you focus solely on how a font looks without considering its readability, you risk isolating some visitors—which is precisely what the laws and standards like ADA, EAA, AODA, Section 508 and many more aims to prevent.

ADA Compliance

The Americans with Disabilities Act (ADA) was established to promote equal opportunities for people with disabilities. While there’s no specific ADA font size requirement, accessible fonts should be clear, clean, and easily distinguishable. So, it’s best to steer clear of cursive or overly decorative styles..

Some ADA-compliant fonts you might want to use include Arial, Calibri, Century Gothic, Helvetica, Tahoma, and Verdana.

Here are a few more tips for ADA-friendly fonts:

• Aim for a minimum size of 12px, with 16px as a solid starting point.
• Ensure the font performs well both small and large.
• Look for fonts with a large x-height.
• Choose fonts where characters are proportionate for their size.
• Make sure individual letterforms are distinct and easy to identify.

Choosing Accessible Typefaces

There’s no one-size-fits-all answer to which fonts are best for accessibility, but certain design elements can significantly help readers. For instance, fonts like Lexend and Atkinson Hyperlegible are specifically crafted with accessibility in mind. Many people also find Poppins to be a popular choice, especially among those with visual or cognitive disabilities.

Speaking of favorites, I’m a big fan of Atkinson Hyperlegible. This font not only looks great but is also incredibly easy to read for people with low vision. Developed in 2019, Atkinson Hyperlegible even snagged Fast Company’s Innovation by Design Award, and the best part? It’s free for everyone to use!

This font was created by Applied Design Works in collaboration with the Braille Institute. It enhances legibility with its clear, distinct letterforms and numerals. While it’s a fantastic choice for those with visual impairments, its stylish design is something anyone can appreciate.

Here’s a fun fact: the font is named after J. Robert Atkinson, the founder of the Braille Institute. Atkinson, who lost his sight, was a cowboy and continued to ride horses even after losing his vision!

Why Atkinson Hyperlegible makes reading easier ?

Remember how old, fancy fonts often have letters that look kind of similar? This can be tricky for people with low vision. Atkinson Hyperlegible fixes that in two ways:

Differentiated Letterforms: Similar letter pairs are differentiated from each other to dramatically increase legibility. This helps people with low vision easily tell them apart while reading.

Easy on the eyes: While the letters are distinct, they still fit together nicely, like puzzle pieces. This makes the text look pleasing and comfortable to read for everyone

How is Atkinson Hyperlegible less confusing?

Atkinson Hyperlegible uses ideas from “humanist” fonts, known for clear, wellspaced blocks.

Vertical size of lowercase letters that do not have ascenders or descenders is known as the x-height, and the greater the x-height compared to the overall vertical space, the easier it is to read.

Apertures, or gaps that open an otherwise enclosed space in a letterform, are widened to make them easier to distinguish, and the negative space inside enclosed letterforms is enlarged.

The stroke ends or terminals are set at an open angle, rather than the straight 90 degree terminals in Helvetica, to visually enlarge the gap.

How Atkinsons hyperlegible solves the Issue of homoglyphs ?

In fonts without the little lines, some letters like “I”, “l” , and “1” can trick your eyes, especially if you see blurry. The lowercase i and the exclamation point can also be difficult to separate from these characters.

Atkinson distinguishes these by adding serifs to the uppercase I and a tail to the lowercase l. On the lowercase i, the space between the dot (tittle) and the main body was increased, and a left handed upper serif added.

In the case of the capital O and zero, a slash was added. Initially a forward slash, but after feedback online, this was mirrored to avoid confusion with the Danish Ø.

Uppercase B and the number 8 also get into difficult territory. So the top half of the 8 was narrowed to create a more distinct, pear-shaped profile.

How IT solves the ISSUE partial and pseudo homoglyphs ?

Uppercase Q: If the tail is too recessive, it could easily be partially obscured for someone with diabetic retinopathy, so this was made more prominent.

Capital B and R, with imperfect vision at this bottom left corner, Helvetica’s B & R look very close, so a straight legged R is more legible.

Fact: The spacing has the benefit of making it easy to substitute Atkinson Hyperlegible for Helvetica or Arial in a document, without worrying that your page count and layout will be drastically changed.

Fonts to Avoid

While selecting the most accessible fonts is crucial, it’s equally important to be aware of fonts to steer clear of. When designing with accessibility in mind, the following font types should be avoided:

• Decorative fonts: These can be visually complex, making them harder to read for many users.
• Thin or lightweight fonts: Fonts that are too thin or light can be difficult to read, especially for those with visual impairments.
• Fonts that slow down reading: Fonts that disrupt readability or flow should be avoided.
• Fonts with “imposter letter shapes”: Avoid fonts where letters like uppercase ‘I’, lowercase ‘l’, and the number ‘1’ look very similar, as this can cause confusion.
• Fonts with indistinguishable character shapes: Fonts that make it hard to tell the difference between letters and characters should be avoided.
• Fonts that overlap characters: Avoid fonts that crowd or overlap letters, making it hard to separate one letter from another.
• Specialty display fonts: Fonts like handwriting styles, custom fonts, or cursive fonts are often difficult to read and should generally be avoided for body text.
• Avoid fonts that are italic, handwritten, or overly stylized. These fonts can be harder to read.
• Serif fonts have small strokes or “serifs” at the ends of letters, while sans-serif fonts do not. While many assume that serif fonts are always less accessible than sans-serif fonts, this is a myth. Both serif and sans-serif fonts can be accessible or inaccessible, so testing is essential.

Conclusion

Choosing the right font isn’t just about aesthetics—it’s about ensuring that everyone, regardless of ability, can read and engage with your content. By selecting accessible fonts, you’re making your website or product more inclusive and user-friendly, while also adhering to important legal and ethical standards.

Remember: accessibility starts at the design stage, and typography is one of the first building blocks. So, make sure you’re choosing fonts that enhance readability, legibility, and inclusivity from the get-go.

Is your website’s typography accessible? Time to give it a second look!

Related Reads

• Read Easier With our Free Font by Braille Institute
• Understanding Accessible Fonts and Typography for Section 508 Compliance by Section508.gov
• Introducing accessibility in typography by Google fonts
• Understanding WCAG SC 1.4.12 Text Spacing by W3C