Design & dyslexia

August 2024
3 minutes
Disability
Neurodiversity

Dyslexia affects about 10% of the global population. It's a cognitive disability and a form of neurodivergence, as it involves processing information differently from most people.

However, it is not linked to intellectual deficiency and even comes with benefits. Dyslexic people often have a better grasp of the big picture. They usually possess excellent problem-solving skills, a great ability to anticipate trends and to come up with original solutions.

The difficulties associated with dyslexia can vary from person to person. Some mix up the sequence of letters, such as "does" and "dose". Others perceive letters as 3D objects and may struggle to distinguish the letters p and q or d and b. Since their challenges vary, there is no one-size-fits-all solution.

Still, I have a few tips to make reading easier for everyone, including dyslexic people. These are quick changes to implement that will not compromise your original design.

Keep lines of text short

Short lines of text are easier to read. This applies not just to dyslexic people but to everyone. For optimal reading comfort, it's recommended not to exceed 80 characters per line.

Do a max of 68 characters per line that is easier to read than 116 that are hard to read on the same line.

Adjust line height to 150%

Line height is the space between two lines of text. To optimise reading, you can adjust it to 150% in Figma. In Word or Google Docs, you can select 1.5. The result may vary slightly depending on your font, but it's a good standard and a WCAG criteria.

Figma line height setting set at 150 %

Make sure your site can handle space adjustments

Sometimes, a line height set at 150% is not enough for comfortable reading. Dyslexic people may use a browser extension that lets them adjust spacing between lines, letters, words, and paragraphs. By tweaking the extension settings, you'll make sure that none of the text overflows or overlaps. If your site is properly coded, this won't affect your design.

Choosing a typeface for dyslexic people

Typefaces like OpenDyslexic, Dyslexie Font, and EasyReading are specifically designed against some common symptoms of dyslexia. Each letter has a unique shape, making it easier to distinguish from others.

Several studies have been conducted to determine their real impact on reading, comparing them with Arial and Times New Roman. The results are mixed and tend to show no significant improvement. Only EasyReading seems to have a real benefit, but this is based on an isolated study that needs confirming with another.

I used Atkinson Hyperlegible on Neon's site. Designed by the Braille Institute for visually impaired people, it can enhance the overall reading experience.

Don't put important info in placeholders

A placeholder is an attribute that displays default text in certain form fields. This text disappears when the user starts typing. For dyslexic people, short-term or working memory deficits are common. Therefore, if you use a placeholder, make sure it doesn't replace important information like the expected format.

Do use a sub-label for expected format information. Don't put that expect format info inside the field as a placeholder.