Creating and designing accessible content means more than just choosing accessible typography. Even with “perfect” font families in place on your website, people with low vision, cognitive, language, and learning disabilities may still struggle to process the text. 

Let’s look at all the steps and design considerations you’ll need to take into account when making your content more accessible.

A11y From the Beginning

This tutorial is part of Web Accessibility: the Complete Learning Guide, where we’ve collected a range of tutorials, articles, courses, and ebooks, to help you understand web accessibility from the beginning.

1. Consider Your Typography

It can be a bit overwhelming when you think of all the elements you have to consider when choosing an accessible typeface–serif vs. sans-serif, font variations, font size, kerning, tracking…to name just a few–but if you follow the guidelines below you will have taken the first steps in making your website typography more accessible.

2 Million+ WordPress Themes & Plugins, Web & Email Templates, UI Kits and More

Download thousands of WordPress themes and plugins, web templates, UI elements, and much more with an Envato Elements membership. Get unlimited access to a growing library to millions of creative and web design assets.Shopify ThemesBuild a beautiful online store that stands out from the crowd.UX & UI KitsEasily customizable UX and UI kits to inspire your next project.

Find Common Ground

Less is more when it comes to accessible typography. The easiest way to make your typography accessible is to choose a common font and limit the number of fonts on your website. This is especially important for your main body copy. Studies show common fonts most often win when reading speed and user preference of different fonts is compared.

Common fonts include:

• sans-serif font families: Arial, Calibri, Century Gothic, Helvetica, Tahoma, and Verdana
• serif font families: Times New Roman and Georgia
• slab serif font families: Arvo, Museo Slab, and Rockwell

It’s not that these fonts are inherently accessible, but most users who have difficulty with typography choices have already seen these fonts and learned how to work with (or around) them.

Readability of Serif vs. Sans Serif

The research is not conclusive as to whether serif or sans serif typefaces are easier to read. So this choice is entirely yours as long as you are picking common fonts or font families that have strong and unique characters.

For people with visual impairments or dyslexia, certain letters or combinations of letters can be confusing, so it’s important that letter shapes are clearly defined and unique. Common offenders are the “I” (ex. India), “l” (ex. lettuce) and “1” (ex. one). Likewise, characters like “b” and “d” and “q” and “p” can sometimes be mirrored (either left-right or up-down) so words such as “piqued” could be flipped into a nonsensical word like “qipueb” or sometimes into a real word that would entirely change the meaning of the content.

There are some characteristics that can aid legibility. So when you are looking for your next font family, pay particular attention to the following things and you’ll be on your way to choosing an accessible font:

• Prominent ascenders (ex. the vertical line in d).
• Prominent descenders (ex. the down-pointing line in y).
• A d/b or p/q combination which are not an exact mirror image of one another.
• Uppercase I, lowercase l, and 1 must all have different characteristics from one another.
• Avoid fonts that have tight letter spacing; these will be difficult for some users to read.
• Kerning is also important, particularly between r and n. Otherwise, words like “barn” could be read as “bam” or “modern” could change to “modem”.

Avoid Specialty Display Fonts

Besides picking a common font family and paying attention to character uniqueness, make sure you avoid using fancy or handwritten fonts and/or fonts that only have one character case available (ex. only uppercase characters). Specialty fonts with cursive, or unusual shapes, or artistic features, may look nice, but they are much harder to read than common font families.