The controversy of accessible type

+ download a pocket guide of best practices

Note: the image descriptions are in the alt text if shorter than 125 characters and in the caption if longer.

Why accessibility?

As you navigate cities, transportation, products, and services, you might notice that most of the built environment has been created by non-disabled people, forming barriers and preventing *disabled people from participating. Just one common example is how stairs prevent wheelchair users and people who use mobility aids from interacting with physical space, though that only begins to describe the seemingly endless amount of barriers disabled people navigate constantly.

Accessibility is the process of removing barriers to meet people’s access needs. It goes hand in hand with usability, affordability, availability, and overall good design. To learn more about disability and accessibility, check out this resource list I update every couple weeks.

This article focuses specifically on visual barriers in typography and how to be more accessible to people who have low vision, cognitive disorders, and dyslexia or other learning disabilities. These best practices also benefit everyone!

*I use the term “disabled people” to embrace disability. You can read more here: I am Disabled: On Identity-First Versus People-First Language.

The controversy! What makes a typeface accessible?

This question actually drove me bonkers for years. I’ve read a lot of conflicting information on how to choose an accessible typeface. Is it better to use serif or sans serif? To clarify the difference, serif has marks at the end of a stroke (like Times New Roman) and sans serif doesn’t (like Helvetica).

The general consensus amongst graphic designers is that sans serif is more accessible because it’s more clean and less distracting. However, dyslexic people still experience barriers reading sans serif text. So what does that mean?

With the creation of dyslexia-centric fonts such as Dyslexie, researchers have done studies to determine what fonts are more accessible to dyslexic people — with mixed results.

• For example, this study says Dyslexie, Open Dyslexic, and Comic Sans are the clear winners.
• However, this study says there was no marked preference or improved performance between Dyslexie, Times New Roman, and Arial.

Given all this conflicting information, what are we supposed to do?

The overarching message in accessibility is: listen to disabled people. Many people in the disability community prefer fonts like Comic Sans. Despite it being the bane of practically every designer’s existence, it’s very accessible. Why? According to Critical Axis, Comic Sans is more legible because it has bulbous curves and disproportionate lines. All these characteristics help people differentiate letters more when they read.

This article surveyed dyslexic people for their preferences and they found a list of things to look for in an accessible typeface:

• Is there a difference between capital I, lowercase l, and the number 1?
• Compare letters b and d, p and q — are they mirror images or distinguished?
• Compare letters g, a, and o — are they distinguished?
• Do the letters rn look like the letter m?

Image compares characters I, l, 1, b, d, p, q, g, a, o, r, n, m, and the words Illinois, modern, and debatable between the typefaces Comic Sans, Verdana, and Helvetica..

Once you compare the letters, it’s pretty clear that Comic Sans wins. The asymmetrical strokes that give it (in my opinion) a childish look also make it easier to read. While people might be more used to clean, modern fonts like Helvetica, many of the letters are too symmetrical or identical. For example, the capital I and lowercase l look exactly the same, making words like “Illinois” difficult to read.

So if the question is do we use serif or sans serif?, my answer is actually neither. After understanding the access needs of dyslexic people, my personal preference is for something in between serif and sans serif that balances a clean look with the need for distinguishing letter forms. (Wow, I guess I’m nonbinary in every way).

This means I usually go for a contemporary or slab serif, where the additional strokes are more geometric and clean. For the pocket guide zine (download below), I used Arbutus Slab for headers and IBM Plex Sans for body text. I use the latter as my general type of choice (it feels cute and nerdy, like me!). I also like humanist and grotesque sans serifs; I don’t think they’re as accessible as slab serifs but they pop and still have pretty well-defined letters. I use Archivo Black for headers on my personal site.

Image compares characters I, l, 1, b, d, p, q, g, a, o, r, n, m, and the words Illinois, modern, and debatable between the typefaces Arbutus Slab, IBM Plex Sans, and Arial Black.

Obviously, accessibility is an entire, holistic experience with a lot more considerations than a singular typeface. Whether you end up using Verdana or Helvetica, it probably won’t make or break it. But it is an important detail to keep in mind.

At the very least, maybe it’s time to retire the Comic Sans jokes.

Pocket guide for accessible typography

Expanding on the typeface debate, these are general guidelines and best practices for how to make your typography accessible.

Alignment

Align text to one direction (left, right, or center) to make it easier to read.

The fully justified text, while it creates a clean overall text block, creates uneven “rivers of white” spacing that makes it difficult to read.

Left-aligned vs. justified text

Font size

Use large font sizes instead of tiny text. It’s best practice for body text to be at least 16px for web. I personally prefer 18–20px.

People should also be able to zoom in up to 200% without losing information or structure.

Big vs. small text

Weights and styles

Use different weights and styles sparingly to make text simple and clean.

• Use sentence case, not all caps
• Don’t combine bold and italics
• Don’t create blocks of text with italics

Simple vs. complex styles

Typeface

Use a typeface with clean, distinguishable letters instead of cursive, themed, and handwritten styles.

Clean vs. complex typefaces

Spacing

Use accessible spacing to differentiate lines of text and make reading easier. Best practices are:

• 1.5x font size for line spacing
• 2x font size for paragraph spacing

White space vs. little space

Contrast

Use high contrast to make text stand out. The text on the left is easy to read because:

• It uses regular instead of light weight
• It’s at 100% instead of 30% opacity
• It’s at 21:1 contrast (aim for at least 7:1)

High contrast vs. low contrast

Photos

Make text stand out against a photo so that it’s easy to read:

• Position text over a clean area of the photo
• Add a solid color background
• Even better, don’t use this pattern at all!

Graphic image: [😁Accessible] option on left with photo of mountains and foggy grey-blue sky. The word “mountains” is displayed on clear sky, on solid color background, and not on image at all. [😪Not accessible] option on right shows word “mountains” directly on busy photo of snowy mountains, making it difficult to read.

These tips work — just look at Medium

You might notice that reading Medium articles feels really nice.

That’s because Medium follows several of the guidelines mentioned above: notably high contrast, large font size (21px body text), and accessible spacing (1.58 line height). Most blogs, even design blogs, end up straining my eyes because they miss these details.

Note: I don’t identify as disabled, but I’ve worn prescription glasses since I was 9. I regularly have trouble seeing and reading things, even with my contacts or glasses on. About 75% Americans have some sort of vision correction and therefore a similar experience, so we all benefit from these practices! (source)

Medium also has one column of text with plenty of white space on either side. That’s because we don’t want to multi-task as we read, we just want to read. We don’t want distracting elements like moving ads, banners, and related stories on the side, as most news sites throw in. These days, anywhere from 30–70% of the screen is literally covered in moving ads. It’s a disgrace.

Screenshot of an article in the Washington Post. The actual story (highlighted in pink) takes about 25% of the screen. The advertising, related stories, and other navigational elements (highlighted in blue) take about 75% of the screen.

I love Medium! The only complaint that I have is they now hide several stories behind a paywall (for a platform with millions of users, I’d prefer to give monetary support directly to writers and stories I like rather than to Medium). Also, requiring payment makes content inaccessible to poor/low-income folks, so we have to ask who are we excluding? Something to think about.

Download the pocket guide zine

The pocket guide zine with the best practices mentioned above is available for free download here. Print on 11x17 tabloid paper, zoom 100%. Tweet at me if you use it! @access_guide

The zine prints like this

Print it out, cut along the red line, and fold like so.

Diagram by tellatale.org.uk

If you like my work, you can support me on ko-fi.