Web Typography for Dyslexia
I know most or all of us have heard of dyslexia, but what does it mean?
Well, it can actually mean a number of different things. Dyslexia is an umbrella term that describes disorders related to difficulty with word recognition. It can manifest itself in many ways, a few of which include:
· Letters spinning in place
· Letters skating across the line of text
· Letters mirroring/flipping
· Letters raising off the page
· Some letters simply not being there
Now, because dyslexia is experienced differently by different people, it is important to remember that there is no single catch-all font that will be the perfect solutions for those with dyslexia. However, there are certain typographical decisions that we can make that can make experiencing our websites a little bit easier.
The first instructor I ever had in web development kept repeating the words, “Be a good internet citizen.” These words have stuck with me through every project I have made since. As developers, we are the gateway to the internet. Sites that I create by myself on my own laptop can go live to the whole world, which is amazing!
But as a wise man once said:
We want our sites to be available to the broadest user base possible, which means making conscious decisions that will ensure as broad a range of users as possible have a good experience when interacting with our sites.
What you will see here is that no matter what level of web development skills you have, you already have the tools and know-how to make changes on your sites that can potentially enhance the experience for users with Dyslexia. All I am going to do is point out a few trouble areas, so that going forward in your future as a developer, you will be able to identify these trouble areas and take appropriate actions.
Trouble Area #1 — Serif VS Sans-Serif Fonts
As I am sure you know already, serifs are the small ticks at the end of letters in serif fonts. Many people with dyslexia find that sans-serif fonts are a bit easier for them to read, as it more closely resembles the way that they learned to write as children. I mean, you definitely don’t see most kids writing their name for the first time in crayon taking the painstaking time to add little serifs to their name!
So, as developers, what is an easy fix for this?
CSS! One line! Change the font! Pretty easy, right?
Trouble Area #2 — Similar Letter Shapes
The next trouble area looks at similar letter shapes. Can you tell which characters are written in the above image? It is pretty difficult, right? They look almost exactly the same! The first is an uppercase ‘i’, the second is a lowercase ‘L’, and the third is the number ‘one’.
For your average user that does not have dyslexia, we understand the meaning of these letters by taking them within the context of where they are in a certain word, and where that word is in a particular sentence to understand what they are intended to be. Now consider your users with dyslexia. If their experience with dyslexia causes letter to move, spin, skate across a line, jump off a page etc., then they have no context in which to take these letters, and consequently may have an unpleasant experience trying to read fonts that have similar letter shapes.
Here we go again, what is an easy fix for this?
CSS! One line! Change the font! This sounds familiar…hmmmm.
Trouble Area #3 — Letter Mirroring
This area is somewhat similar to what we just discussed. Consider the above image. You may notice that the letters ‘D’ and ‘B’ are exact mirrors of one another. Again, many of us can assume which letters they are supposed to be by taking them in the context of the sentence. For a user with dyslexia, even if they have trouble with letters mirroring on the page, it may not be too difficult for them to see that a backwards ‘r’ is in fact supposed to be an ‘r’, as it has a unique shape. However, if two different letters are mirrors of one another, and the letters are moving around on the page…see where I’m going with this? Again, it will be very difficult for this user to determine what letter it is supposed to be without getting extremely frustrated. And that is not the experience we want for our users.
So, what is an easy fix for this? (Do you see what I’m driving at?)
CSS! One line! Change the font! I will admit, this one is a little more difficult to screen for in your font, but certainly not impossible.
And now our last trouble area…
Trouble Area #4 — Character Spacing
Take a look at the image above. As you will see, the two different fonts have inherently different character spacing. Reading the top line, it is fairly easy to recognize the word ‘Modern’. However, on the bottom line, the tight character spacing makes the same word look somewhat like ‘Modem’. For a user without dyslexia, character spacing is already very important in understanding the message of a piece of text…
…so for our users with dyslexia, where the letters may be moving on their own, providing adequate character spacing may play a big part in allowing your user to properly understand the message of what they are reading.
“But Chelsea, my company has a proprietary font, and they won’t let me change it!”
So? What’s the fix for this issue?
CSS! Letter spacing! It’s super easy, just one line! One or two pixels of extra space could make a world of difference to some of your users.
Fonts Designed for Dyslexia
Pictured above are some fonts that have been designed specifically to help people with dyslexia. While these fonts will not assist every user with dyslexia, I thought they were very innovative attempts at tackling a unique issue. If you have a look at the font named “Dyslexie”, the thicker bottoms on each letter were designed to give the letters a sense of gravity to assist the user in properly orienting the letter on the page. Cool, right?
I am not telling you to go buy these fonts. I mean, you can if you want, but mostly I am presenting them to you as an option. And as you probably already know, there are others!
Open Source Solutions
Google fonts is an excellent resource for free online fonts, and if you put a little bit of effort and time in, you can find a few fonts that avoid the trouble areas discussed above!
From here, I am going to leave you with two thoughts…
Consider Your Font Stack
Don’t be the person that puts a lot of time and effort into choosing one single accessible font, and hope that font is the one that actually loads on your user’s device. Grab a couple different fonts that satisfy your requirements, and set up that font stack!
Consider Operating System (OS) Specific Fonts
When developing your font stack, perhaps consider putting in a couple different OS specific fonts, so that there is a device specific font as a fallback that you are reasonably certain is already available on your user’s device.
Call to Action
You already had the tools going into this article, and now you know what you are looking for. Now you have a piece of the accessibility puzzle. If everyone brings a piece to the table, then the internet is going to look pretty good, for everybody!
