Usability article: how to create readable Web text

The following is a list of some of the main readability and usability issues:

Text alignment:

Aligning text to the left, ragged on the right, increases reading speed because the straight left edge helps to anchor the eye when starting a new line (Designing Web Usability : The Practice of Simplicity by Jakob Nielsen).

Line length:

There seems to be little agreement on the best length length for optimum reading speeds. The most commonly advice is that limiting line length to 9 or 10 words can increases speed and comprehension (based on the assumption The eye can only focus on about 3 inches of a page at a time).

However reading speed and user preferences is not a simple matter, consider the following conclusions by by Melissa Youngman and Dr. Lauren Scharff (1998)

“Users read faster when line lengths are long, although they tend to prefer shorter line lengths. When designing, first determine if performance or preference is important. If user performance is critical, use longer line lengths to increase reading speed. However, if user preference is critical, use shorter line lengths. Usability.gov

Leading (line-height)

Set the leading larger than the default – as a rough guide 1.3em of leading (130%) will make a big difference to the readability of a web page. Leading and line length however are related; the longer the line the bigger you need to make the leading.

Newspapers have very short line lengths and very little leading – so they can fit as much text into a small space as possible. However, given the variable nature of the devices people use to view web pages, we can never be sure what the line length will be for the user.

Choice of fonts:

Choose a font that is suitable to your subject matter. If you use more than two fonts on a page and it can start to look like a ransom note – distracting the users attention from the content. Off-line, headings are commonly set in a sans-serif font, with body text set in serif. However, on-line, sans-serif are often used for both headings and body text; the cleaner outlines of the sans-serif fonts tends to make them easier to read on low resolution screens. Don’t mix serif and sans-serif fonts in your body text, as it rarely looks good.

Italics:

Avoid using italics for small text sizes: the problems of screen display of outline fonts has not entirely disappeared. Italized fonts look particularly bad at small sizes – as italics do not easy to render using a square pixel grid. If you must use italics, avoid using them for large blocks of text.

Use of capitals

Don’t use all caps for bodytype – or even capitalise all words in headings. The uniformly of size and shape of capitals make them harder to read than lower case letters.

Readability is increased if only the first letter in a heading is in capitals; each capital – being less recognizable – acts as an interruption to the eye as it scans across the text.

Contrast

Ensure good contrast between the text colour and the background colour.

Underline links

Make it easy for visitors to understand what is a link and what is not a link. Don’t rely exclusively on mouseovers to identify links, as this can be confusing and reduces usability. (From Usability.gov)

Users scan web pages

For Service based website in particular, arrange your text for ‘scannability’, i.e have lots of headings, provide the most important ideas at the start of paragraphs, and use lists rather than dense passages of text when appropriate.

Contact us; we can help you create accessible, usable websites.

“LCIL has won a Breakthrough Independent Living Award under the Information category for the LCIL website and the Grapevine Online service. The judges were particularly impressed with the website and asked for the name of the person who designed the website.” Catherine Garrod Information Co-ordinator Grapevine, Disability Information Service

Take my Web Accessibility Online Training Course - WCAG 2.1 Compliance

Learn to design and manage WCAG compliant, accessible websites with my online course

You will learn both the techniques of accessible website design and an entire ‘framework for thinking about the subject’. It will equip you with the skills to understand, identify and fix issues any accessibility issues you come across. Watch the free videos to get a taste of what is on the course.