Solarias Readability Tips

Here's some tips on how to make pages easier to read (without compromising style) from someone who has dyslexia!

Edited Nov 27, 2023.

Check out my accessibility guide for other ways to make your web pages more accessible!

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.

Not to say the font choise isn't important. After all a font can be hard to read if the letters that are very thin, super thick, have lots of flourishes/accents (think fancy cursive fonts or caligraphy), or otherwise styled very differently from how they normally appear. I would save fonts like these for titles and headings since they tend to be larger and only a few words. Main body text in articles, blog posts, tutorials, etc should have easier to read font, so readers can focus on the content, rather than parsing the font.

This text takes longer to read than text in simpler fonts.

The above text is more difficult to read because of the thin slanted font and curly flourishes. I even increased the font size to make it more legible.

But again, there are a lot of fonts out there that have cool styles while still being legible. In fact, spacing can be what makes or breaks a font's readibility. Some fonts can be hard to read just 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 two examples:

Here is some example text with narrow letter spacing.

Here is some example text with wider letter spacing.

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 with little space between words.

Here is some example text with larger space between words.

The first example is hard to read because it is difficult to tell where one word ends and one word begins.

Text Alignment: Justified

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 extra space normally at the end of a line is distributed to each space between words on that line. Since most lines will have a different amount of excess space, this leads to each line having different widths of space between words, which creates rivers of negative space for dyslexic readers to get lost in.

Here is an example paragraph in justified text alignment.

Here is an example paragraph in default left alignment.

I hope this example speaks for itself.

Note that I used large text in a small container to illustrate the issue. Smaller text in a larger container (like this one) means that the space between words can be more evenly distributed, without looking signifigantly different line to line, thus the justified text will cause less problems for dyslexic readers. Just keep in mind that the reader may be on a small screen, or have their default font set to a larger size, which will expose the issues of justified text.

line-height

Dyslexic readers typically find it easier to read when the text has sufficient line height, as this reduces the common problem of skipping lines while reading.

Here some example text where the line height is the same as the height of the font. This is usually the minimum line height.

Here is some example text where the line height is 1.5 times the height of the font.

Just be careful going too close to 2 times the font height, because you may make it difficult for readers to tell the difference between a new line and a new paragraph. Also note that some fonts by default have notable space between lines, so you don't need to increase line height for these.

Paragraphs

It can be very easy to lose your place in a wall of text if there are no paragraphs, or space between paragraphs. Luckily I mostly only encountered this problem when I used to read fanfic.

You may have noticed that this page liberally uses paragraphs.

Make sure the space between your paragraphs is larger than the space between your lines (you can do this by adjusting paragraph margins or padding in CSS).

Just be careful not to make a new paragraph so often that you end up with one for each line, rendering them useless, as it would look like you have no paragraphs, just wide line height.

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. A lack of horizontal margins results in very long lines of text on computer screens, and the longer the line, the more difficult it is to stay on the line. Even if you do have margins, be aware of how your text may look on a wide screen, as this presents a similar issue.

I would also add extra margin-top space above headers, so they do not blend in with the rest of the text.

Emphasis

Emphasis with Styling

Bold, italics, color coding, highlighting, and boxes are some ways to draw attention to key words or concepts.

These can be used to ensure that important words are not skimmed over, or for negatives (not, don't, no) so the reader doesn't glean the opposite meaning.

I like to put examples in boxes, so they are instantly recognizable as examples. I also like to make headings a different color, so they are easier to pick out.

Just be sure not to use emphasis so often that it becomes clutter, and is no longer effective at emphasizing. If every other word is bolded, then the important words get lost.

Headings and Lists

Headings and lists break up content into defined, easy to find 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.

things to vary:

• number of lines in paragraphs
• number of words/clauses in sentances
• how info is presented (lists, examples, diagrams, ect)

Examples and Visuals

This is pretty self explanitory; including examples and visual aids for important concepts are helpful for any reader. They help illustrate points, that might not be clear if they are only explained.

This page makes use of a lot of examples, which I put in boxes so people can pick them out easier.

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). Just be sure that the colors vary in value for color blind users.

Be Concise

Simply put: Less words equals less 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 due 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 can't 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.

Bad Example

Take a look at what this site would look like if the majority of this advice was ignored (visit this immersive page or view the example below.)

Top of Page - Solaria's Homepage