How to Design for Dyslexia
Knowledge Share | Industry Savvy

How to Design for Dyslexia

on / by Netania Engelbrecht

One in every five visitors to your site might be dyslexic. This means that if your content isn’t designed with these users in mind, you’re missing out on 20% of potential customers. However, designing effectively for dyslexia can be challenging because there are different types and various visual effects that might occur. So what do you need to consider to make your content accessible for everyone? We’ve come up with an actionable list of things to bear in mind when designing a user experience for dyslexia.

What is Dyslexia?

Dyslexia is a cognitive learning disability that is categorized by difficulties identifying characters, words and sentences due to barriers in the brain and not the eyes. There are three main types of dyslexia:

  • Dysgraphia where people have difficulties writing.
  • Dysorthographia where people have difficulties spelling.
  • Dyscalculia where people have difficulties with numbers.

What Should You Avoid When Designing for Dyslexia?

There is no one-size-fits-all solution when designing for dyslexia. This is mainly because it comes in various forms and impacts reading, writing and/or spelling abilities differently. There are three main visual distortions that dyslexic users might experience: the river effect, blur effect and washout effect.

1. The River Effect (Common cause: Too much white space)

How to Design for Dyslexia by Usabilla

This effect is a result of too much spacing between characters or words in a body of text. To dyslexic users this might look like large parts of white space with letters or words running down the page. There are a few (poor) design choices that may make this river effect occur.

What Should You Avoid?

  • Justified text alignment

This can be difficult to read because it creates large and uneven spaces between words or letters, often causing users to ‘lose’ their place in a paragraph.

  • Double-spacing after a full stop

Again, this creates uneven spaces and adds too much white space to a paragraph, which could result in the river effect.

What Can You Do Instead?

  • Use structured layouts

The more structure you have in your document the easier it’ll be to read. Use clear headings, indented quotes and bulleted lists wherever possible to improve readability.

  • Use column structure

The wider the text spans from one side of your screen to the other, the more difficult it is to follow. A good rule of thumb is to use columns with no more than 80 characters per line.

  • Use single-spacing after a full stop

Use a single space at the end of each sentence; this will reduce the amount of white space, making it easier to read.

2. The Blur Effect (Common Cause: Too Many Words) 

How to Design for Dyslexia by Usabilla

This visual distortion can make text look blurred, as if it’s swirling on the page or compressed. As you can imagine, this requires more effort to read as it’s more difficult to focus on the words.  

What Should You Avoid?

  • Solid black text on top of solid white background

The high contrast between a solid white background and solid black text can appear very bright to your site users, adding to the potential reading difficulties.

  • Long paragraphs

Longer paragraphs make it easier for users to ‘lose’ their place because the words might appear compressed or overlapping.

What Can You Do Instead?

  • Write in short and simple sentences

Keep your sentences brief and to-the-point to avoid the blur effect. Also try using shorter words where possible – don’t use complex words where simpler ones will suffice.

  • Avoid high contrasting colours

Reading from a high-contrast website is difficult. Use an off-white background like shades of grey or tan and a dark grey font instead of solid black.

3. Washout Effect (Common Cause: Too Much Formatting)

How to Design for Dyslexia by Usabilla

With this distortion, your users might see text as faint and indistinct. This decreases reading speed and might make it difficult for readers to distinguish certain words.

What Should You Avoid?

  • Serif fonts

These fonts are those with ‘feet’ at the end of the letter strokes. They might be visually appealing but they can be a nightmare to read. This is because they distort the shapes of letters, which makes it look like they’re connected (this is also true for underlined text – so avoid that too!)

  • Using italics

Italics are often used to highlight text but can be difficult for any user to read because the letters have uneven lines compared to regular fonts.

What Can You Do Instead?

  • Use a safe font

Try using fonts like OpenDyslexic to improve readability. This might not work for all users, but it’s generally a safe font to use. Whatever you do, avoid using serif fonts at all costs because they’re the toughest to read.

  • Don’t over-format/style

Use bold for emphasis instead of italics or underlining; this is recommended when trying to limit the visual distortion of your text.


When designing for dyslexia, you need to remember that there aren’t any quick fixes or one-size-fits-all solutions. The most important element to consider is typography and having as little white space between characters and words as possible. There isn’t a definitive way to design for this, but what you can do is create a better user experience by avoiding elements that could result in visual distortions.

Do you have any insights into designing for dyslexia that we’ve left out? Let us know in the comments section below or tweet us @usabilla!

Interesting Links on Dyslexia

On Demand Webinar Conversion Optimization: What Should You Be Testing?

Article by

Netania Engelbrecht

Share your thoughts

Pin It on Pinterest