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.
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?
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.
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.
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.
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.
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
Use a typeface with clean, distinguishable letters instead of cursive, themed, and handwritten styles.
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
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)
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!
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.
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
Print it out, cut along the red line, and fold like so.
If you like my work, you can support me on ko-fi.