I recently stumbled on a font designed specifically for dyslexic readers (OpenDyslexic). It explains how it works like so:
Letters have heavy weighted bottoms to add a kind of “gravity” to each letter, helping to keep your brain from rotating them around in ways that can make them look like other letters.
- Are there other design principles behind fonts specifically targeted at people with dyslexia? (Links to research on the effectiveness of such design principles would be very much appreciated.)
- Are there also typography tips that can be used to make an overall block of text (or page) more readable to dyslexic readers? I can imagine things like tweaking kerning or small random baseline modifications could be of some help…
There is a great article called Designing for Dyslexics, and it’s divided in three parts. Part 3 is about typography:
- Part 1 (Definition of dyslexia, population size, implications/effects)
- Part 2 (Lower color contrast & visually impaired users)
- Part 3 (Typography, layouts, language style, information architecture, screen readers)
Here is a extract, I cropped some of the ‘highlights’, but the whole article is great and worth a good read.
There is far more to designing dyslexia-friendly pages than just
reducing colour contrast. On the plus side, it is likely that these
changes will have a positive effect on page readability for all users.
Shorter line lengths and narrower text columns make reading easier. Consider setting a percentage width for text areas and set the margins to “0 auto” via CSS. The page side margins will then increase proportionately on wider screens.
Most browsers have a default line-height of around 1em. This normally results in closely packed lines of text. Increasing the line-height to around 1.3em immediately makes longer lines of text easier to read.
The smaller the text, the more difficult it will be to read. Specify font size in absolute units and you’ll also remove the user’s ability to resize the text within their browser.
If possible, use a sans-serif font. The decorative “hooks” on the main strokes of serif letters may create additional problems for dyslexic users. Recognisable letters within a word may appear to be too far apart to “see” the whole word. This can also be compounded by the spacing between words being overly small for easy reading.
If you have to use a corporate serif font, consider reducing the letter-spacing slightly so that the letters within a word lie closer together but increasing the word-spacing to create a slightly larger distance between individual words.
Justified Or Not?
Justified text can produce a pleasing visual effect. However, it achieves its nice straight lines on either side of the text by introducing variable spacing between individual words.
For a dyslexic reader, it can be catastrophic! The uneven spaces between words, creates visual distractions which are hard to ignore. As a result the reader loses his/her place repeatedly. Unjustified text, although less attractive at first glance. is far easier to read.
Use Italics Sparingly
When italic fonts are used on a web page, the individual letters can have a slightly jagged line compared to a non-italic font. This “pixelation,” coupled with their “lean to the left” makes them hard for a dyslexic person to read. The effect is compounded if the text is also small.
Use italics sparingly and consider bold text for important words. They’ll be far easier to read.
The British Dyslexia Association also has some guidelines in their style guide.