Accessible Fonts

Accessible Fonts

In one of the classes I took on web accessibility, I learned thanks to one of the teachers who was dyslexic, that the font you choose for your website can have a significant impact on its readability.

So I decided to write this article to share what I learned.

Easy to Read Fonts

When choosing a font for your website, it is important to consider how easy it is to read. And when I mean easy, I mean that we read without effort because distinction between letters is clear. A good test that I learned is to write the following letters:

If you can distinguish between all of these letters, then the font is easy to read. If you have trouble distinguishing between some of the letters, then the font may not be the best choice for your website. Letters are also grouped in a way that you can see how they look together with another letter that might be similar in some fonts. So that is why we want to see how they look together, not just one by one. Maybe you can see the difference between ‘o’ and ‘e’ when they are alone, but when they are together, it is harder.

Let us analyze the following fonts:

Inter

Inter is a typeface specially designed for user interfaces. It is a highly readable font that is easy on the eyes. It is a great choice for websites that need to display a lot of text. A lot of companies have been using it during the last years. The biggest downside is that the capital letter ‘i’ and ‘l’ are very similar, which can be confusing for some users. See the test here.

Raleway

Raleway is a sans-serif font that is easy to read. It has a modern look that makes it a popular choice for websites. It is a good choice for headings and other large text. However, it may not be the best choice for body text, as it can be difficult to read in long paragraphs. It is pretty good, it has some letter combinations that might be hard to read, like ‘fi’, but it is a good choice for headings and other large text. See the test here.

Comic Neue

I do not know about you, but when I was a child a lot of people (professional) used to make laught of Comic Sans. However, this became somewhat famous in the 1990s primarily due to its casual and informal appearance. Its large x-height (the height of lowercase letters) and generous spacing between letters made Comic Sans more readable for people with dyslexia or reading difficulties. This unintentional benefit contributed to its adoption in educational materials and other accessible contexts. The font Comic Neue is a modern version of Comic Sans that is more refined and better suited for professional use. See the test here.

Inclusive Sans

Inclusive Sans is a typeface designed to be more readable for people with dyslexia. It has a larger x-height and wider letter spacing to make it easier to read. It is a good choice for websites that need to be accessible to people with dyslexia. See the test here.

Atkinson Hyperlegible

My favourite one and the one I am using on this whole website. Designed by Braille Institute, Atkinson Hyperlegible is a typeface that is easy to read for people with low vision. It has a large x-height and distinct letterforms that make it easy to distinguish between letters. It is a very good choice. See the test here.

Conclusion

When choosing a font for your website, it is important to consider how easy it is to read. This is especially important for people with visual impairments or dyslexia. By choosing a font that is easy to read, you can make your website more accessible to a wider audience.