Designing for Dyslexia

Increasingly, accessibility is becoming increasingly important in design. We have written before about how accessibility is really just another part of usability.

The main reason is quite simple. Easily accessibly sites are highly useable sites. They may not always be the most aesthetically pleasing, they may not always have interactions and animations that make a site stand out but they deliver results.

But there is a group of people who frequently get left out of the conversation. We think of good colour contrasts for the visually impaired, we think of tab orders for people with lower motor skills and we think of how screen readers will work for blind users.

But depending on both definition and source, up to 0% of the population are dyslexic. Are you thinking about them in terms of your design? If you aren’t, you could be potentially alienating 20% of your audience – or certainly putting barriers in their way that a few small changes could fix.

There’s 2 things to mention before I get into this:

1. Almost every idea here will make your site easier for any user who reads your site.
2. If you don’t design for dyslexia, it’s not the end of the world. We’re a hardy bunch and live in a world where you learn to cope. It doesn’t mean we don’t love it when we see people considering it.

Think about typography

You may have noticed over the last few months that the BBC have changed their headline font on BBC News. It is now their BBC Reith font. Now whatever you think of the visual output, I would guess the primary reason they have made this change is to help dyslexic readers.

Fonts are one of designs many subjective battle grounds.  BBC Reith is a font created perhaps not exclusively, but certainly primarily, to be easy for dyslexic readers.

How?

One of the main features of good dyslexic fonts is small serifs. Serifs not only guide the eye, but also offer type foundries the opportunity to create difference in mirrored letters.

Ideally fonts should be non-symmetrical in their mirrored letters, mainly lowercase d and b and q and p

You can see the fonts mirror each other with perfect symmetry. The same happens for q and p also:

Another important consideration is distinguishing between lower case ‘L’, upper case ‘i’ and the number 1. I mean, dyslexia or not, no sane human could tell me if the order below is iL or Li or 2 in roman numerals.

The reality is your brain shouldn’t have to do so much work. And for dyslexic readers, this is even more important. Letters tend to move around and so a word like Ilfracombe can become really challenging to figure out.

Now, here’s where designers and people like me often fall out. People will of course say ‘Ok, what’s the best for for dyslexic readers?’ and whilst there is no ‘right’ answer, Comic Sans is one that will certainly gets a fantastic reaction from most designers!

Comic Sans has become a bit of a joke, a font more akin to school projects when a child first discovers they can change the font in Word as opposed to a serious font you could use in a credible design.

The argument against Comic Sans deepens further when you try to get away from the idea that being dyslexic means you have a low IQ (Edit: Top 1% say whuut) or are intellectually inferior. 

But if you actually look at Comic Sans, each character has a unique glyph and no two look the same. It’s actually a beautifully crafted font.

If you look at Comic Sans on the right here (BBC Reith on the left, Times New Roman in the middle) you’ll notice that each character has a subtle yet significant difference. The p has a small ascender and a straight descender whereas the Q is a sharper shape and a clearly angled descender. Even the d and b have subtle curves to their glyph (d is slightly concave and be fractional convex).

Good Dyslexic Font Examples (BBC Reith, Times New Roman, Comic Sans)

In Times New Roman you’ll see the serifs on the d and b are different and where similar, point in different directions.  BBC Reith is really elegant, the d and b, along with q and p, almost perfectly proportioned yet distinctly different.

But here’s a challenge you’ll be faced with! 

No designer is going to choose Times New Roman when there’s a million other fonts out there. But this is where the conversation needs to happen. Many designers will design for aesthetics and the symmetry provided by fonts that mirror letters is visually far more appealing. Go to a branding agency selecting a headline font for their client and they will measure it on how the font represents the brand, not on accessibility.

But this is the conversation you need to have.

And if you can’t win, there’s another rule you should follow…

Familiarity wins, every time.

This is another truism that is hard to refute not just for dyslexics but for anyone. It is far easier to process, digest and action something we are familiar with rather than create something new.

This is true for most all sorts of design. But in digital design, it’s interesting because the platforms are relatively new. The mobile web has really only existed for 10 years, yet the hamburger icon – a symbol of complete abstraction that makes next to no sense – is now commonly accepted as where the menu lives on mobile.

It is not because the icon means anything to most users (it only made sense to techies) and in fact when tested it almost always gets horrible scores from users.

However, now, it is not only a sign of mobile navigation, it is THE sign of mobile navigation. Even though a button that says ‘menu’ scores far better in testing, people still prefer the burger as a mobile navigation device.

But familiarity is so important.

That’s why it’s important for dyslexic users. If you can’t persuade a designer to use a dyslexic friendly font, at least try to persuade them to use a familiar font. System fonts like Arial, Verdana, Helvetica might not pass the scientific interrogation but they offer a sense of familiarity that reduces cognitive load for dyslexic readers. All readers in fact.

Black text on off-white background

Another way to upset your designer. Limit their colour palette. Again, not without good reason. And the reason behind this is actually a lot more straightforward.

When we grow up learning to read, we read from books that are almost always black text on white paper. But it’s not actually white, it’s usually a cream or buff colour so that’s what our young brains learn and our older brains find familiar.

So as a rule, you want to write dark text on a very light but not white background.

Left aligned copy

This again feeds into the way we learn to read. In the West, we read top to bottom, left to right. Yes, sometimes it looks nicer to centrally align copy. but it make it harder to read. Not impossible – just harder. It is the same principle behind why centralised logos can look elegant but have a significant and consistent impact usability.

Again, this isn’t specific to dyslexic readers.  Most people’s brains are wired to read the way we learnt to read at school. It’s just increasing the effort for dyslexic people is another step for them to consume your content. So by centrally aligning a large chunk of copy, you’re making it harder to read.

Conclusion

Of course, there’s an argument that by making all of these compromises you make the design bad for 80% of the audience.  And this is true. Which is why it’s a golden rule for designing with dyslexia – and indeed any level of accessibility be it visually impaired, lower motor skills, deaf or the wide variety of user needs we should consider – All you need to do is factor it into your design consideration.  Make sure journey’s are easy to complete. As long as they aren’t impossible, most of the time people will figure them out. Yes, with a degree of frustration but no more so than any other site they are likely to visit, and much less frustration that those who don’t consider them at all.

So that’s it, it’s really simple.

• Clear, well crafted typography 
• Familiar design patterns
• dark text on light background
• Left aligned copy

It’s not that complicated. These steps reduce cognitive load not only for dyslexic user, but for all users.

As with most things accessibility related, good solutions don’t only impact certain groups.

But one final point here. If you don’t design for dyslexic users, or if you don’t follow all the rules, don’t worry! Life is full of poorly accessible content and most dyslexic people have techniques to help get through their challenges. It’s more of a courtesy. When the BBC changed their font, straight away I knew my designers would hate it and I loved it.

But life isn’t always a beauty contest. Accessible design isn’t always about the most beautiful visual – but that doesn’t mean it can’t be beautiful and remember, including that 20% of the population in your design considerations means more people will enjoy the outcome. It has to be a good consideration to make.

Need help designing for a broad user base? Give us a shout.