Fonts for Accessibility with Eleni Beveratou

What makes an accessible typeface? And how can we improve typography in regard to web accessibility? Together with my guest, type designer Eleni Beveratou, I answer these and other questions in a fun and easygoing session.

Eleni Beveratou is a type designer from Greece. She is working as Creative Director at Dalton Maag, and has a particular interest in the science of reading, accessibility and its impact on type design. She caught my attention when I listened to her at Diana Varma’s Talk Paper Scissors podcast. There she talked about likability, readability and legibility. In my conversation with her, I want to go deeper on the subject of type design for accessibility and bust some myths along the way.

We discuss

The difference between legibility and readability
What makes an accessible typeface?
If Arial and Comic Sans are really superior?
Should we use fonts for dyslexic people in our designs more often?
How you can f*** up the most accessible typeface by using it inaccurately.
If you should avoid italics or centered text?
And if ligatures are helpful or can be problematic?

Listen to the talk as podcast

Next to the video on YouTube, you can also listen to this episode audio only. You can find it on Apple Podcasts and Spotify, or simply listen to it here:

Talking Points

0:03:00 – Why Eleni got interesting in accessibility
0:05:00 – Accessibility is not only for the blind
0:09:10 – How reading works
0:12:30 – Accessibility is Legibility, Readability, Likability
0:17:00 – What makes an accessible typeface?
0:28:15 – Sans-serif vs. serif fonts
0:35:00 – Are accessible fonts always the same?
0:42:45 – Should we avoid very expressive fonts?
0:46:45 – Fonts for dyslexia
1:02:50 – Making accessible fonts inaccessible
1:07:15 – Text contrast: light on dark, dark on light
1:14:00 – Use italic text sparingly
1:16:50 – Tracking fonts
1:21:00 – Avoid centered text
1:25:35 – Are ligatures problematic or helpful?
1:30:00 – Be careful with guidelines
1:32:00 – Closing

Some of my takeaways

Accessibility with fonts is a range of things.
It is Readability, Legibility and Likability.
We read best what we read most.
We don’t read in a continuous movement, but rather in jumps (saccades)
Distinct shape of words is crucial for reading
Spacing is most important
Followed by open shapes (for telling apart a c and an o)
Followed by distinct characters l or I, O or 0
Followed by non-mirrored characters db qp
Sans-serif and serif typeface are both fine
Arial is not ideal for accessibility
Dyslexia friendly fonts are outperformed by other fonts that don’t claim to be dyslexia friendly
Use italics and centered text sparingly
Font size and color contrast are more important than the best typeface

3 Top Tips for Accessible Typefaces

If you’re not into watching the whole video right now, I distilled Eleni’s three most important tips, when it comes to accessible typefaces.

Tip 1: Know when it’s about legibility or readability

You can and should still do expressive and interesting things with type, but you show know when it’s appropriate. With documents, tokens or a password, legibility (clear character recognition) is crucial. In other cases, like with a logo or a headline, context will often fill in the gaps.

Tip 2: Look for open letter shapes

Even though it is often recommended, Arial is horrible for accessibility, because its letters are very closed. Open letter shapes (look at the c, e, s) are better when it comes to smaller sizes and still work when things are blurred.

Tip 3: Simplicity does not equal accessibility

A mistake Eleni made, because the simpler the shapes, the less distinct they are. Especially a double story “a” can help to create more distinct words and hence increase readability. Change between letters helps recognition.

Bonus tips

It’s helpful if your “l” has a little tail (legibility) and narrow characters (like “f” or “t”) are a bit wider.

2 Comments

Vyse says:

13. Mar 2024 at 17:17

So a common problem I face at work is that I design UIs for work related software products. That usually means that legibility and usability criteria are typically more important than aesthetics considerations. Also hardly any company wants to spend money on fonts for software that is only used internally by their own employees or used in an industrial machine UI/HMI for producing whatever.

When looking at free fonts that are also accessible/legible and have enough weights to be useful, you typically arrive at the same few fonts you can even consider working with. On top of that, those fonts have a very similar look to them, due to the legibility requirements. (open apertures, differentiable letterforms, decent x-height, etc.)

What is your take on this? How much wiggle room even is there when choosing a font/typeface for work related UIs? If you think. there is any under these circumstances, what would you look out for when choosing a font and how would you explain to a client that the font you picked would cost them a few thousand € extra with “no benefit” compared to a free font?

1. Oliver says:
  
  18. Mar 2024 at 14:12
  
  Thanks for that questions! We’ll do our best to answer it 😉