How-to: Design for Dyslexia Part II

Dyslexia is a medical condition affecting the perception and decoding of symbols including text and digits, making reading, writing and spelling difficult. In Part I, we looked at some of the issues around web use by dyslexics and other reading-impaired conditions, and some means to circumvent them.

In this instalment, we'll go on to looking at reading-impaired design and what we can do to make the on-line lives of those with difficulties easier.

Research from the British Dyslexia association suggests that pastel backgrounds, increased line-spacing, font choice and paragraph justification all have an effect. Their guidelines suggest:

  • background and text colours should be user defined. More on this later.
  • do not use justified paragraph alignment. It creates large uneven spaces between letters and words, making it difficult for everyone to read.
  • ensure adequate line-spacing (120% - 150% height of font-face).
  • keep line lengths down to 12 words on average.
  • allow the user to select the font and it's size. More on this, too, later.
Stepping through some of the measures here and on our client site, you can see how some of them have been applied. We'll mention some of the constraints later.

Background: check
The pure white withaltogether light-grey text that we had in the designer's original visuals and pre-launch pages gave me a headache, and I normally read just fine. Cue the spikey conversation with the external design team. Darkening down the text greatly offended the designers, but I pushed for a much darker grey, which improved readability for everyone. Note, we didn't go for absolute black on white, as this produces it's own high-contrast glare which is a strain.

We've taken on board some research that found that off-white backgrounds with near-black, but not pure-black, copy work well together by softening the glare of the page and improving legibility. This also means ditching fancy backgrounds, watermarks and other frivolous  elements that clutter our pages.

Not that it's an absolute rule; you may notice we've kept the light grey child's hand-print watermarks; they are solid colour, unobtrusive and don't interfere with the text. Unlike the medieval coat-of-arms watermark I could quote as a reference elsewhere...

Sans-Serif: check
Sans-serif fonts, such as Arial, Verdana, Calibri, and Windows' favourite Segoe UI - these lack the decorative  hooks at the ends of the letter strokes found in Serif fonts - Times, Georgia, Bookman et. al. Serifs obscure the shape of letters, making the letters run together, which is why the best web designers have been using Sans Serif fonts on the web for years. My client's 'house' font is the clear InfoText Pro.*

[*the downside with this particular font is that it works great for print but renders poorly at small sizes on-screen in some browsers . As it is the paid-for house font used across everything from pens to publications, we don't really want to deviate]

As another example, the often-derided Comic Sans font-face is proven to be a very readable font for dyslexic readers, especially when rendered as dark blue text on a pale cream background. This explains a lot; there are countless examples of bright dyslexics who devour comic books in their youth and go on to be great communicators, story-tellers and artists themselves. The text panels in comics are hugely readable and follow all the rules!

Provide alternate font settings or way for users to choose their own styles, via a style-switcher. That way, a user can choose their own preferred font with their browser, or create their own style sheet. Many dyslexics find they read best with one particular font. Now there are a good many sites with accessibility foremost in their design, but sadly not as many have style-switchers as I remember from just a few years ago. Perhaps it's become one layer too many in the stack of stylesheets and scripts in today's multi-media sites? Perhaps web-designers are relying on the current generation of web-browsers' accessibility features to pick up the slack (following)? It can be difficult getting out from under the constraints of some web platforms. I know it's something we're revisiting after three months live running.

Text size
For dyslexics, a minimum 12pt or 13pt body text becomes essential. I know users can choose to zoom text sizing on their browsers, but how many know how? And how many bother?  How many sites have you seen lately that put those zoom controls in the top right corner? Designers hate all these extra options because it clutters their clean layouts. Sorry chaps (it's mostly chaps - secretly they want to be car designers for Aston Martin), your layout is beautiful, but if the site is not usable, you've wasted your time.

Slanting the letters in italicized text makes the letters hard to read. The tilted letters render with jagged lines compared to non-italics and the effect is worse when the text size is small. Use bold over italics, if you must. I overuse italics. I repent.

Use of images
Using images to break up the impenetrable 'wall of text' not only works from a general  usability perspective, but if you can select an image which adds descriptive content, then you need less text altogether.

Screen readers
The counter argument to images is that many dyslexics now rely on screen-readers to read the text to them. Therefore pages should be designed to be compatible with most screen readers. All important information should be conveyed in text, as computers can not read or interpret graphic images.

Use of columns
There's a reason why print media opted to use columns 500 years ago.  Shorter lines lengths are easier to read. Okay, you have to scroll up and down more, so in addition, shorten the column length to cut down the scrolling.

A long story short
Since we're reconsidering the content of text as well; brevity remains the soul of wit and of a healthy web page. So let's have shorter paragraphs, too. Keeping paragraphs to the bare minimum helps with both dyslexia and usability.

And insert more white-space.

White space is your friend.

So opening up the leading (the width of white space between lines) helps to separate each line from the next.

Double, double
Double spacing after periods at the end of a sentence originates from the days of the manual typewriter, with its monospaced fonts. We no longer need this as most websites use proportionally spaced fonts (although one lunatic developer I know of wants to abolish them and return to monospaced fonts on the web. I daren't reply). Double spacing creates the 'river effect', don't use it.

Lay it out
Be consistent: don't forget, consistent layout and format throughout every page on the site helps to establish convention; navigation aids laid out consistently on every page simplifies good reading behaviours (and not just for dyslexics)

Dissecting your layout may help in a number of ways. Making a list of relevant links at the end of a paragraph or section, rather than merely placing the links in-line in the body of the text can be a useful short-cut - as long as the links clearly describe the type of information or site the link will lead to. This is also best practice on the web, in the same basket as 'alt' tags and 'title' tags.

It's a frame-up
Frames are evil. We have known this for years. Some text-to-speech software cannot read text on framed pages. If you really must use frames, be sure to provide a no-frames alternative.

The difficulty, I know, comes with embedded content such as <iframe>'s. These were always evil, still are evil, and still we keep using them. Vimeo, Slideshare and a host of other mainstream services continue to use them and are a complete nightmare for dyslexics. I have no instant solution for these; suggestions welcomed.

Which brings us onto links – if underlining and other visible markup is a bad idea for dyslexics, one suggestion is to have having arrows pointing at live links, or some other icon or symbol. 'Establishing a new visual convention takes getting used to,' you say? Only when it's unfamiliar. We said that about Windows 3.1 and lately about Windows 8 (okay, maybe not my best examples, but you know where I'm going). There is no intrinsically intuitive user interface, they all have to be learned. So use the best available.

Rainbow nation
Colour – we used colour strongly throughout the client's page design as a means of clearly dividing up the sections and also keeping cohesion when linking through to inner pages. Not too many colours, mind, a reduced palette is more usable and looks better than 'clown pants'.

The trouble with our chosen palette was reported by a partner member with reading issues who pointed out that white on strong reds is a usability nightmare. Cue a rethink along the lines we've described here.

The objective is a reworked set of accessibility features that all users will appreciate. The report card will appear here shortly. RC

  1. Document Design for Users with Reading Disorders - Kathryn Maceri, The University of Memphis
  2. Clear Helper - Web Site Design Suggestions for People with Dyslexsia
  3. 6 Surprising Bad Practices That Hurt Dyslexic Users
  4. Text justification – issues and techniques
  5. - Designing for Dyslexics
  6. British Dyslexia Assoc. - Eyes and Dyslexia
  7. Wikipedia - dyslexia, typesetting, double-spacing