Accessibility & Inclusivity in Typography: What Designers Need to Know

Typography is the art of arranging text to make it legible, readable and visually appealing. As a graphic designer or web designer, you’re probably most concerned with the visually appealing part—it’s a creative profession after all. The other two, legibility and readability, probably take a bit of a backseat. If you can read the text comfortably, then what else is there to consider?

The truth is, your designs aren’t meant for your eyes only, and people have a wide range of visual and reading abilities. You may be able to read something easily, but it doesn’t mean that everyone else will, too.

This is why accessibility and inclusivity are so important in typography. As you’re choosing typefaces and arranging text, it is your responsibility to keep a diverse audience in mind, including people who may have visual impairments or reading disabilities.

The Americans with Disabilities Act (ADA) and the Web Content Accessibility Guidelines (WCAG) both offer specific requirements you can follow. Let’s take a closer look at those and other ways to make your text-based designs more accessible.

Legibility vs. Readability

Accessible typography is legible and readable. These two terms are often used interchangeably, but they actually mean different things, and both are important to consider when designing with accessibility in mind.

Legibility refers to how easily readers can identify letters and differentiate between them. For example, some typefaces feature complex flourishes that make certain letters difficult to recognize. They may work perfectly in logotypes and headings, but for large blocks of text, a simpler typeface offers better legibility.

Readability measures how easily people can read and process the text. It’s less about the choice of typeface and more about how it’s arranged. For example, imagine a block of text with very little space between the lines or light-colored text on a light-colored background. Both of these would be difficult and uncomfortable to read.

Legibility and readability are both personal, meaning what one person finds comfortable may be strenuous for another. Your goal as a designer, then, is to ensure that your text is as legible and as readable as possible, so you can serve a wide range of needs.

Key Principles of Accessible Typography

A number of factors can impact text legibility and readability. These include:

Typeface

Choose a typeface with simple, easy-to-recognize letters. Pay attention to:

X-height: this is the height of the lowercase letter x and most other lowercase letters. Taller x-heights are generally easier to read.
Counters: these are the fully or partially closed areas in letters a, b, d, e, g, o, p, and q. They should be large and easy to see.
Similar characters: make sure the typeface you choose doesn’t have any ambiguous characters. For example, letters “C” and “Q” can be mistaken for an “O” if the opening of the “C” or the tail of the “Q” are too small.
Serifs: these are small decorative strokes attached to letters. Both serif and sans-serif typefaces can be accessible, though the ADA mandates sans-serif typefaces on signage and display screens.
Stroke width: this is the thickness of the lines that make up the characters. Aim for a happy medium here—lines that are too thin can be hard to see, while lines that are too thick can be distracting.

Popular ADA-compliant typefaces include Times New Roman, Verdana, Arial, Helvetica, and Tahoma, though there are many others.

There are no strict rules about font size, but the general recommendation for body text in print and digital publications is 12 points (16 pixels), with 9 points (12 pixels) being the absolute minimum. For websites, it’s best to use relative font sizes, so that visitors can scale the text to fit their own preferences.

For printed materials that will be viewed from a distance, calculate your ideal character height by adding 1 inch for every 10 feet of viewing distance. For example, if you’re designing an outdoor banner and expect people to read it from 20 feet away, make sure your characters are at least 2 inches tall.

Spacing

Letter, word and line spacing can affect the readability of your design. When text is too crowded or too sparse, it can be hard for readers to follow. To ensure proper spacing, adhere to the following WCAG standards:

Line height (leading) is the distance between the baseline of one line and the baseline of the next. It should be at least 1.5 times the font size.
The space between paragraphs should be at least 2 times the font size.
The space between letters (kerning) should be at least 0.12 times the font size.
The space between words should be at least 0.16 times the font size.

Color Contrast

You can choose any colors for your design, but there needs to be enough contrast between the text color and the background color to ensure good readability.

Use WebAIM's Contrast Checker to check whether the colors you’ve chosen provide enough contrast. The WCAG requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Practical Tips for Accessible Typography

You now know how to select typefaces and optimize font readability. Below are a few other typography best practices and things you can do to create accessible and inclusive designs:

Avoid using color to communicate information, since not everyone perceives colors in the same way. For example, instead of using green text for pros and red for cons, use headings to clearly label each list.

Limit your use of italicized fonts and avoid introducing too many typefaces into a single design or webpage. This can cause visual clutter and negatively impact readability.

Make use of headings and subheadings to organize information and guide the reader’s eyes through the design. When designing web content, be sure to tag headings accordingly—if anyone is using a screen reader, this will help them navigate the page and skip to the most relevant sections.

When designing content for electronic devices, make your layouts responsive and dynamic. Not only should the layout adjust to fit the screen it’s being viewed on, but readers should also be able to increase the font size or zoom in without interruptions to their user experience. According to the WCAG, they should be able to zoom in on a web page by 200% without seeing any overlapping elements or having to scroll horizontally.

Avoid using images to present text in digital content, as screen readers will not be able to read it. If absolutely necessary, include alt text that duplicates what’s written in the image.
When designing web pages, use an online tool like Accessibility Checker to make sure they’re WCAG compliant.

Learn Typography & Graphic Design with Skillshare

As you dive deeper into typography for graphic design and gain experience with a wide variety of projects, think about how you can use typography to create designs that can be enjoyed by as many people as possible. It’s your responsibility as a designer and one of the many important things you can do to help promote accessibility and inclusivity in the world of graphic and web design.

Written By

Sayana Lam

Sayana is a musician, writer and graphic designer based in Toronto, Canada.