Our job as graphic designers is to design legible, clean, and aesthetically pleasing printed and digital pieces. We’ve spent years studying the best fonts for legibility and learning how to use grids for a balanced design and color psychology.
But, we must ask ourselves, are we overlooking some groups when we designing a project? Part of our job should also be creating accessible content to engage a wider and more inclusive audience. About 17% of the world’s population are classified as dyslexic, so why aren’t we paying more attention to making design accessible to more people?
In this article, we’ll look at the relationship between dyslexia and design. I’ll outline a few layout tips that you can include in your next project to improve its accessibility. I’ll also provide you with a list of dyslexia-friendly fonts that can help reduce some processing errors for dyslexic readers.
What Is Dyslexia?
Dyslexia is a common learning difficulty that affects an estimated 17% of the world’s population. It’s a neurological learning disorder in which some of our brains have trouble identifying letters and words and matching them up with sounds. This results in slow reading and can have other secondary consequences like understanding what’s being read and remembering information.
The way designers treat content, font choices, typographic details and color combinations can affect the way a user with dyslexia experiences a printed piece or a website. The most common problems for dyslexic readers are due to letters swapping, mirroring, and melting together.
Daniel Britton, a student at the London School of Communications, was diagnosed with dyslexia in his last year of university. Britton designed the font Dyslexia to show the difficulties dyslexic readers face when trying to read text. Using Helvetica, one of the most readable typefaces, as a base, he reduced each character’s anatomy to have just enough information to decode it. The result is a font that can cause readers the kind of stress and frustration that dyslexic readers face every day.
Type Specifications
You have a plethora of fonts to choose from, and they all come in different weights, heights, widths, and shapes. Many people with dyslexia find some fonts easier to read than others. For most non-dyslexic people, fonts that include serifs (e.g. Times New Roman or Garamond) are easier to read due to the “feet” that help connect one letter to the next.
For people with dyslexia, serifs tend to melt the shapes of the letters. In this case, sans serif fonts (e.g. Arial or Comic Sans—yep, you read it right) are preferred because each character can stand on its own, and they look the most similar to handwriting. However, there are a few sans serif fonts that can be more difficult to read than others.
There are some letter combinations that can cause confusion—for instance, pairs like “rn” and “m” look too similar in shape, or a capital “I” can be mistaken for a lowercase “l”. Ascenders and descenders on letters like “b” and “p” need to be prominent as many dyslexic readers rely on remembering visual shapes. Mirrored letters like “b” and “d” can slow down reading.
So how can we help? There are some characteristics that can help with legibility. When you are designing print or on-screen work, pay special attention to these points:
- Use a larger than usual font size, between 12 and 15 points.
- Avoid using all capitals as they can blend in together.
- Italics and underlined words are also found to impair reading.
- Set headings to be 20% larger than the body copy.
- Set the style of headings to bold to help distinguish it from the rest of the text.
- Keep text aligned left and use an appropriate column width (45–75 characters).
- Avoid tight tracking and leading as letters and text lines can look as if they are merging.
- Use lightly colored backgrounds and avoid printing on glossy paper.
Best Fonts for Dyslexia
Over the years, there have been several fonts designed specifically for dyslexic readers. There are two studies (Good Fonts for Dyslexia and the thesis Special Font for Dyslexia?) that looked into the effect of using exclusive dyslexia-friendly fonts amongst students who have the disability. Both dyslexia font research papers didn’t find significant improvement in using special fonts, but they may help with some related errors. It is important to say that dyslexia isn’t the same for everyone—some may experience it differently than others.
You can use the following fonts for printing or on screen (computer and even smartphones!). Let’s take a look at some of the dyslexia-friendly fonts that have been developed in the last few years:
Dyslexie
Dyslexie was specially developed and designed for dyslexic readers by Christian Boer in 2008. While it is informal, it was originally designed to make learning more fun. In this font designed for dyslexia, each letter is individually shaped so every character is unique to avoid confusion with other characters that might look similar.
This dyslexia-friendly font includes higher x-heights, large openings in each character, and longer ascenders and descenders. A few of its special features are bold punctuation marks to emphasize when sentences start and end and different heights for letters that look alike (v, w, and y) to avoid letter swapping.
Open Dyslexic
Open Dyslexic is a dyslexia-friendly font designed to reduce a few of the common errors caused by dyslexia. This open-source font includes several font styles: regular, bold, italic, bold-italic, and even a monospaced style.
This font is an optional choice in many websites and formats such as Wikipedia, Kobo eReader, Amazon Kindle, and a few children’s books. You can also find instructions on their website to install this dyslexia-friendly font on Android.
Sylexiad
This dyslexia-friendly font was developed by Robert Hillier from the dyslexic point of view and for adult dyslexic readers. As part of his research, observation and tests with non-dyslexic and dyslexic individuals, Hillier has found new knowledge within the field of dyslexia typographic research.
This font includes a combination of handwritten style, long ascenders and descenders, uniform strokes, and generous word spacing.
Read Regular
Read Regular was designed by Natascha Frensch. She took an individual approach to the characters and designed distinct shapes to create even more differentiation to avoid mirroring.
The design of the overall font is clear and simple. She eliminated unnecessary details like the two-story “a” and a two-eyed “g”. The ascenders and descenders are longer than usual to avoid confusion. The counter space is more open to prevent it from visually closing.
There are a few other fonts that already come installed in our computers that are dyslexia-friendly. As I said before, none of these fonts will completely solve or cure dyslexia, but they can help make something. Some of the fonts that the British Dyslexia Association recommends are the following:
Arial
Fonts like Arial have been used by dyslexic and non-dyslexic readers for a long time. This popular font is available on both Windows and Mac computers. The sans serif font has soft curves and open counters, making it easier to read. Arial is evenly spaced and plain.
Comic Sans
While not loved by many designers, Comic Sans is doing something right. The AIGA mentioned it as the best font for dyslexia due to the variation in character heights. Comic Sans is not a designer’s first option—it looks unprofessional and childish—but we can’t ignore the fact that it is working for some readers.
While other fonts use a repetition of some shapes for many characters, Comic Sans only repeats itself once (mirrored “b” and “d”). For this reason, Comic Sans makes its characters easily distinguishable.
Verdana
Verdana was designed to be readable at a small size. Verdana has a large x-height—this could be why it is so popular amongst dyslexic readers. It also includes wide proportions compared to other sans serif fonts and loose tracking, which helps when dyslexic readers need to identify separate letters.
Since Verdana has a large x-height, it allows for wide apertures and keeps strokes separate from one another. Characters that might look similar in other fonts are designed to do the opposite in Verdana—this increases legibility in body text.
The uppercase “I” has two horizontal strokes at the top and bottom, helping to differentiate it from the lowercase “l”. Additionally, the number 1 includes a horizontal stroke at the bottom to set it apart from both aforementioned letters.
How Can We Help?
In the last few years, we’ve seen an improvement with web accessibility breaking down barriers that prevent access to online content. From keyboard-friendly websites to images with alternative text to resizable copy, these small steps help greatly.
As designers, we can help improve our projects for wider inclusivity. While there isn’t a “one size fits all” solution due to the fact that dyslexia is different for everyone, we can surely take some steps.
I’ve mentioned a few tips that can help you design more carefully by keeping in mind your audience. I’ve also listed fonts that are specifically designed for dyslexic readers and some that are already included in your operating system. While they might not solve and cure dyslexia, they do help in reducing some of the difficulties that readers might be facing.
If you liked this tutorial, you might like these:
AccessibilityDesigning Accessible Content: Typography, Font Styling, and StructureCarie Fisher
AccessibilityA Beginner’s Guide to Email Accessibility (Checklist + Resources)Stig Morten Myre
AccessibilityAccessibility in Game Design: Text DisplaysKyle Sloka-Frey
AccessibilityNew Course: Website Accessibility With ARIA RolesAndrew Blackman
UX6 Tips for Accessibility in Form DesignJoanna Ngai
AccessibilityAccessible Apps: Barriers to Access and Getting Started With AccessibilityJane Baker
{excerpt}
Read More