How to make pages easier to read
(without comprimising style)
This page will feature some advice on how to make your page more accessable to users who have dyslexia
I have mild dyslexia, so this advice will be mostly based off of my own experiences
Fonts and Spacing
Contrary to popular advice, you don't have to severly limit your font selection or impliment a special font for dyslexia. Heavily stylized fonts can be difficult to read (for anyone) but that doesn't mean you have to use exclusively comic sans
More important than the font itself, is spacing, including spacing between letters, words, and lines
Some fonts can be hard to read because the spacing is tight, making it difficult for users to differientiate between letters, words, and lines. This can be easily altered by adjusting the letter-spacing, word-spacing, and line-height properties in CSS
letter-spacing
compare the two examples:
here is some example text
here is some example text
the words in the first example are more difficult to read, especially if a whole article used such a narrow letter spacing
word-spacing
the most important spacing to get right in my opinion
here is some example text
here is some example text
The first example is very hard to read because it is difficult to see the start and beginning of each word
Speaking of word spacing, one of my least favorite text alignments is justified
In order to make the text line up neatly with both the left and right margins, the spacing between the words on each line is different, which is disorienting for the dyslexic reader (or at least me)
Here is an example paragraph. Here is some more example text. More text. I'm trying to make a paragraph. Here is some example text. Here is some more example text. More text. I'm trying to make a paragraph. Text, text, text. Reading words on a page in a paragraph for an example.
Here is an example paragraph. Here is some more example text. More text. I'm trying to make a paragraph. Here is some example text. Here is some more example text. More text. I'm trying to make a paragraph. Text, text, text. Reading words on a page in a paragraph for an example.
Not only does justify vary the word spacing, but the block shape of the text makes it easy to lose which line you are on
line-height
Here is an example paragraph. Here is some more example text. More text. I'm trying to make a paragraph. Here is some example text. Here is some more example text. More text. I'm trying to make a paragraph. Text, text, text. Reading words on a page in a paragraph for an example.
Here is an example paragraph. Here is some more example text. More text. I'm trying to make a paragraph. Here is some example text. Here is some more example text. More text. I'm trying to make a paragraph. Text, text, text. Reading words on a page in a paragraph for an example.
Top example has a short line height, same as the text size, making it easy for the user to skip from a word in one line to another word in another line
Now you may be thinking, the "bad" examples for those weren't too awful, but combined they are much worse:
Here is an example paragraph. Here is some more example text. More text. I'm trying to make a paragraph. Here is some example text. Here is some more example text. More text. I'm trying to make a paragraph. Text, text, text. Reading words on a page in a paragraph for an example.
Here is an example paragraph. Here is some more example text. More text. I'm trying to make a paragraph. Here is some example text. Here is some more example text. More text. I'm trying to make a paragraph. Text, text, text. Reading words on a page in a paragraph for an example.
note that is combination example was made less intense, as to be more realistic
Line breaks
A simple solution to walls of text
It can be very easy to lose your place in a text if there are no line breaks or other indication of paragraphs
You may have noticed that this page liberally uses line breaks
Margins
You may have come across old HTML websites where the text spans the entire width of your screen (there are no margins), this is something you want to avoid. Negative space in general is helpful for dyslexic readers.
I would also add extra space before headers, so they do not blend in with the rest of the text
Emphasis
Bold, italics, color coding, highlighting, and boxes are some ways to draw attention to key words/phrases/concepts
These can help ensure that important words are not skimmed over
Using these for negatives (not, don't, no) can be helpful, as if skipped over, the reader may glean the opposite meaning
Table Rows
Tables of data can be very difficult for dyslexic users to read
Having the rows alternate in background color helps to keep the reader on the same row they started on. The narrower the rows are, the more imortant it is to have the rows alternate in background color (making the rows a little wider also helps, similar to line height)
While lines between the rows are better than nothing, alternating background color is more effective. Just be sure that the colors vary in value for color blind users
| heading 1 | heading 2 | heading 3 | heading 4 | heading 5 | heading 6 |
|---|---|---|---|---|---|
| item 1 | item 2 | item 3 | item 4 | item 5 | item 6 |
| item 1 | item 2 | item 3 | item 4 | item 5 | item 6 |
| item 1 | item 2 | item 3 | item 4 | item 5 | item 6 |
| item 1 | item 2 | item 3 | item 4 | item 5 | item 6 |
| item 1 | item 2 | item 3 | item 4 | item 5 | item 6 |
| heading 1 | heading 2 | heading 3 | heading 4 | heading 5 | heading 6 |
|---|---|---|---|---|---|
| item 1 | item 2 | item 3 | item 4 | item 5 | item 6 |
| item 1 | item 2 | item 3 | item 4 | item 5 | item 6 |
| item 1 | item 2 | item 3 | item 4 | item 5 | item 6 |
| item 1 | item 2 | item 3 | item 4 | item 5 | item 6 |
| item 1 | item 2 | item 3 | item 4 | item 5 | item 6 |
Headings and Lists
Headings and lists break up content into smaller, more defined sections
Headings are especially useful for keeping track of where you are in a text, and being able to find content much quicker than skimming.
If a list of content is important, consider making a bulleted list. Putting each item on a new line adds importance and is easy to reference when looking back at the text, where as a list within a paragraph is very easy to skip over
Variation
Overall variation can help keep text from looking the same, thus help the reader keep place of where they are in the text (the exception being spacing, which should be consistent)
things to vary:
- number of lines in paragraphs
- number of words/clauses in sentances
- style - color, bolding, boxes of content, etc
and importantly, the ratio of variation. If each detail is heavily defined, then it can be hard to see the big picture
If every other word is bolded, then the important words get lost. Likewise line breaks become pointless if there is a break after every single line
Brevity
Simply put: Less words decreases the amount of words missed
Streamline convoluted sentences. You don't have to make your text choppy, but if you have a lot of clauses in one sentance, consider breaking it up. Think about how you can be more direct and to the point. Edit out words and phrases often used by highschoolers to fluff up their papers
examples of phrasing to avoid:
- "as seen here, this example actively illustrates the point that"
- "in short, to sum up everything that has been stated thusfar"
- "almost certainly owing to the fact that this occurance"
- "for all intents and purposes it is best recommended that one be advised to"
This is not to say you cannot use examples, or be repetitive (these are actually effective tools to ensure users don't miss out on information), but sometimes "fancy" phrasing can cloud the meaning of a text
Repitition
Repetition allows the reader to encounter the same information multiple times, decreasing the possibility that they will pass over it
Not that you should copy/paste you text, but expressing the same information in different ways offers more chances for a user to interpret and potentially undertsand your text
Following an explanation with an example or a metaphor are forms of productive repitition
Examples and Visuals
This is pretty self explanitory; including examples and visual aids for important concepts are helpful for any reader
Take a look at what this site would look like if the majority of this advice was ignored:
(or visit this link for better immersion)