Here's some tips on how to make pages easier to read (without compromising style) from someone who has dyslexia! Check out my accessibility guide for other ways to make your web pages more accessible! 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 or atkinson hyperlegible. Not to say the font choice 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. 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. Word-spacing is The most important spacing to get right in my opinion. Little space between words is hard to read because it is difficult to tell where one word ends and one word begins. 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. Smaller text in a larger container 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. 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. 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. 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. 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.
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 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. 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, etc). 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. 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. This was one of the first pages on my site! I hope its still useful ♥