Designing For Dyslexia

This information in this article has been taken from a number of sources:

  1. The Royal National Institute of the Blind (RNIB)
  2. Issue 35 of Dyslexia Parent magazine
  3. The British Dyslexia Association
  4. The University Of Manchester’s Web Accessibility Guidelines
  5. WebAIM (Web Accessibility In Mind)
  6. my own prior knowledge.

What problems would a dyslexic user face?

People with dyslexia frequently experience discomfort when reading because they find it more difficult to ‘decode’ the words on the page, and can also find it difficult to remain focussed on a particular piece of text. Some people may also have to concentrate more to remember what they have already read, which means they will tire more easily.

So how do we help?

  1. Text size - the minimum recommended font size for users with dyslexia is 12pt. Printed material should always be made available at this size.
  2. Text scaling - on a website you may wish to use a default size smaller than 12pt. If so, use a font size which scales easily, such as percent (%) or em. This way users with dyslexia (or poorer vision) can adjust their own settings to increase the font size. Note that if you start with a base font size of around 80% (used by a lot of websites), Internet Explorer will allow a font size increase to over 12pt at the largest setting, but at 70%, a user with Internet Explorer will not be able to reach a font size of 12pt.
  3. Font style - use a rounded font that is easy on the eye. Use a sans-serif style font (i.e. without curly bits). Commonly used fonts for this purpose are Arial, Comic Sans, Verdana, Helvetica, Tahoma and Trebuchet. It is important to note that not every dyslexic user dislikes serif fonts: many have no problem with them provided the line spacing is sufficient.
  4. Capitalisation - avoid the use of capitalisation for emphasis. All capitals can make text more difficult to read and gives the impression of ’shouting’.
  5. Background - an off-white background can be easier to read from than a ’shiny’ white background. Text is also harder to read on a patterned or tiled background.
  6. Spacing - use line spacing between paragraphs to break up text.
  7. Justification - don’t right justify text. This leads to variable spacing between words and can create visual patterns of white space which are difficult to ignore and are sometimes termed ‘rivers of white’ running down the page making it extremely difficult to read.
  8. Italics - avoid them. They make text more difficult to read.
  9. Paragraphs - keep them short.
  10. Bullets - use lists to bullet point items rather than presenting continuous prose. Number menu items where appropriate.
  11. Writing style - use short words where possible, and write in simple sentences. Refer to the reader as ‘you’.
  12. Navigation - ensure your navigation is simple and stays the same across the site. It is helpful to include a site map and a search facility.
  13. Moving text - this creates problems for dyslexic users and users with other visual impairments. Don’t use it.
  14. Columns - Dyslexic people find that the further text is presented from one side of the screen to the other, the more difficult it becomes to read. Ideally a column should be no more than 70-80 characters wide.
  15. Pictures - where a picture will aid comprehension, use one.
  16. Document structure - as a general rule, the more structured your document is, the easier it will be to understand. Use headings, bulleted lists, numbered lists and indented quotes where appropriate.
  17. Abbreviations - always expand the first occurrence of any abbreviation on a page. For subsequent occurrences, consider use of <acronym> and <abbr> elements to aid understanding.

6 Responses to “Designing For Dyslexia”

  1. Joe Clark responds:

    So we can’t use italics for their actually necessary purposes in English even with designed italic typefaces? I beg to differ.

    And don’t be recommending Comic Sans for Web pages, please.

  2. JackP responds:

    I didn’t say don’t use italics. I said avoid them. Frequently, italicised text is more difficult to read. Highlighting words (such as if you use <em> on this site), or following typographic conventions (for example the names of ships) is less of a problem than whole paragraphs in italics.

    And why don’t you like Comic Sans? I don’t particularly like it on web pages, but that’s more because I don’t like the look of it. I have seen it used on pages written by dyslexics, with it being recommended as a clear font (unfortunately as this post is about 15 months old I can’t remember where). If there are accessibility — rather than personal preference — reasons for not using it, let me know and I’ll update the article.

    [Edit: don't think this was the original location, but the British Dyslexia Association don't seem to have a problem with Comic Sans:

    Select sans serif fonts such as Arial or Comic Sans.British Dyslexia Association

    …although this is a general reference, rather than a "specifically for the web" one]

  3. JackP responds:

    I’ve asked a web designer I know with dyslexia to review this list for me and he has kindly provided his comments on my designing for dyslexia article. Thanks for that, Phil :-)

  4. phil responds:

    Sorry Joe, but your wrong, and Jack’s right. Italics should be avoided, and for good reason. And Comic Sans may not suit many sites, but its readability is excellent.

    Re italics, there are a great many ‘proper’ uses of English, which are adverse in their effect upon the the fluentcy, of acquisition, of text-based content. Like the sentence I just wrote. Avoiding unecessary barriers to access, including for those with cognitive differences/difficulties, is incredibly important.

    If I’m confronted with a large page of text, most of which is in italics, the chances are I’ll not stop to read it without A.T. handy. I’m typical of ~10% of the population. You can signify that content is quoted by useing quotes. Styleing it in a div. Changing its colour and tone and lableing it as such. Putting it in a cite tag, etc… No need to take up a page with inaccessible text. I’m not clear on the current legal status of dyslexia in the States and Canada but in the UK its covered by the DDA, and as such making such accomodations is not just good business sense (10% is a big chunk of a market to spurn), or a moral standing, its a legal consideration to be made also. (I’m dyslexic and have worked in the field for ~10 years)

  5. phil responds:

    “Re italics, there are a great many ‘proper’ uses of English, which are adverse in their effect upon the the fluentcy, of acquisition, of text-based content. Like the sentence I just wrote. ”

    Apart from the fact I made some mistakes of course :) So not exactly proper. Bordering on irony there… But I hope you get my point.

  6. Mary responds:

    Not only do the Dyslexia Association recommend Comic Sans, but in the PTLLS teacher-training course, which I’ve just finished, Comic Sans is recommended for all visual aids and handouts. It might not be your personal taste, but that shouldn’t really take precedence over inclusiveness.


Leave your comments

Enter Your Details:




You may use the following markup in your comments:

<a href=""></a> <strong></strong> <em></em> <blockquote></blockquote>

Enter Your Comments:

|Top | Content|


  • Worn With Pride

    • Titan Internet Hosting
    • SeaBeast Theme Demo
    • Technorati
    • Guild of Accessible Web Designers
    • my Facebook profile

Blog Meta

|Top | FarBar|



Attention: This is the end of the usable page!
The images below are preloaded standbys only.
This is helpful to those with slower Internet connections.