Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

enter image description here

I wonder:

  • 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…
share|improve this question
3  
For me it's better if: Text leading is loose rather than tight ( Easier to jump to the next line ). I'd say that kerning at its best, is right between tight and loose. Both tight and loose have the same issue ( loose creates the issue a bit sooner I'd say ), it is hard to distinguish where word beings and ends. I also find sans-serif fonts the easiest to read. I'm a heavy user of the search feature in anything that has it ( OS, websites, browsers.. ). If it's hard to read, I drop it immediately. ( Every now and then I see questions in SE sites that have no line breaks. Instantly ignored. ) –  Joonas Nov 5 '12 at 10:40
1  
...In my prior comment I was actually thinking about tracking, not kerning. Kerning I find somewhat unimportant. –  Joonas Nov 5 '12 at 10:50
    
Didn't realize that the link lead to a font preview, so I ignored it ( assuming that it was some long article ). After seeing the font, I don't think it adds anything extra to readability ( I think the big font size is the only thing that adds to the reading experience ), though it is surprisingly readable font ( considering that before I concentrate on reading anything, it all looks like individual floating letters ). Very ugly font. –  Joonas Nov 5 '12 at 12:28
1  
@Joonas I will definitely be using more line breaks from now on! Thanks for the great insight! –  Yisela Nov 5 '12 at 21:38
2  
@yisela I felt that I should elaborate the line break thingie a bit: when I'm reading multiple lines of text, I nearly always need to back track the line I just read to the beginning word by word and hop to the next line from there, because I easily lose track of where I was. Leading affects this too. With line breaks, I can more easily keep track of what I'm reading because there's less lines to keep track of. I find that line breaks have similar effect as columns. It chops the text into more readable and compact chunks, making it less intimidating to begin reading. –  Joonas Jan 4 '13 at 1:06
show 1 more comment

1 Answer

up vote 16 down vote accepted

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.

Line Width

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.

Line Height

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.

Font Size

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.

Font Face

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.


Some "Extras"

The British Dyslexia Association also has some guidelines in their style guide.

Dyslexie typeface for people with dyslexia

Read Regular font for effective reading and writing

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.