Maximise text readability - general advice

Why this is important

People have a natural aversion to reading on-screen - the demands of the eye and brain in processing information displayed on a surface (monitor screen) that is also a light source is significantly higher than reading printed matter on a medium that reflects light, such as paper. This can be exacerbated by factors such as screen size, resolution and refresh rate. The impact of conditions such as dyslexia can exaggerate this further, such that text presented in long, fully justified paragraphs, as in a book, may be virtually impossible to read.

General Principles

There are many ways in which content can be arranged to ease on-screen reading. The key is to design the text so that it easy for people to scan page content, allowing people to quickly gain an overview of the information and content provided.

Before you continue

The advice on this page helps you avoid introducing a specific accessibility barrier, but it's not a magic formula. To avoid attempting to follow a technical solution that is not appropriate to the resource and its intended purpose, you need to know the context in which the multimedia resource is being used:

  1. The purpose or aim of the multimedia resource in question, and whether it is being used to supplement another resource in the learning environment, or whether its use is required by students.
  2. The target audience, their knowledge and expectations, and the type of browsing and assistive technology that they may be using.
  3. Whether the information and experiences provided by the multimedia technology are already available in an equivalent, alternative form.

For more background on this approach, see our Guide to the use of multimedia in accessible e-learning.

Technique Details

Make sure that as far as possible, text is broken up into manageable chunks. Avoid long paragraphs of text (unless reproducing content that cannot be altered in this way). Instead, use headings to clearly indicate the nature of the text below (in HTML, use heading elements h1 to h6 rather than simply big, bold text!). Break down text into short paragraphs, and use lists and tables to present information best suited for those formats.

In Clip 1, Natasha, who has dyslexia, looks at a CD-ROM resource and comments on the layout and design its impact on readability to her.

Clip 1: Impact of layout and design on readability for someone with dyslexia

Length : 0 Min 45 Sec

Photo of Natasha looking at the menu page of the CD-ROM.

Avoid fully-justified text - the 'ragged' right edge can particularly help people with dyslexia in keeping reading position. The unpredictable spacing between words that arises as a result of fully justified text can lead to a 'rivers of text' effect, particularly if the space between words is wider than the space between lines of text. Allowing display customisation is important, but make sure that the default style used for the resource enhances readability, for example by using sans-serif fonts rather than serif fonts for on-screen text. Small fonts (below 12 point) are difficult for people to read quickly and easily. An option for altering text sizes can be added to the homepage. Better still, make the text resizable!

Be aware that most people will initially look for important information towards the top and left of the screen, and important information elsewhere may go unnoticed. Text that refers to screen objects in a different part of the screen may confuse people who then have difficulty finding them, particularly for people with low vision who may have difficulty refocusing on different parts of the screen, and people who use screen magnification software and may have difficulty quickly exploring the screen for important content.

Use colour, graphics and white-space judiciously to break up text; and avoid strong textures or patterned backgrounds. Use clear and simple language that is appropriate for the target audience. Also, try to avoid the use of jargon - unless the nature of the subject requires jargon!

The web page screenshot in Example 1 shows how the use of headings (styled to be distinct from the main page text), short paragraphs of text and the use of lots of white space can help to improve the readability of the text.

Screenshot of webiste showing the use of coloured fonts, different sized fonts, capitalisation, and lots of white space to make the text easy and clear to read

Example 1: Using page layout design to enhance readbaility

Testing

User evaluation is by far the best way of making sure that your design facilitates easy on-screen reading. In particular, you will benefit from getting feedback from people with dyslexia, or other impairments - visual or cognitive - that affects readability.


Related Sites

A Guide to Producing Readable, Accessible Online Text (Univ. of Teeside)
This resource was produced by Teesside University researchers to provide guidance on effective design of content for on-line reading, with a particular concentration on e-books.
Accessible Web Typography (Jim Byrne)
A thorough introduction on issues relating to accessibility and typography for web sites, available for purchase as a PDF.
The Web Style Guide (Lynch and Horton)
The online version of a well-respected and widely referenced resource, by Patrick Lynch and Sarah Horton, on effective styling of web content, discussing issues such as typography and layout.
Typography (Web Page Design for Designers)
Article from Joe Gillespie on typography and visual display units, and how to ensure effective typographic design for web content