Ten tips to make your web text easier to read

1. Left align text

Align your text to the left and leave it ragged on the right. Left-aligned text increases reading speed. The straight left edge helps to anchor the eye when starting a new line.

Never fully justify text as it can create serious readability problems. Even if you personally like the look of fully justified text, don’t do it. Word spacing is likely to go awry and you will end up with large gaps between words and ‘rivers’ of white space running down your pages. Those rivers make reading your content difficult, if not impossible, for people with dyslexia. Anything other than left-aligned text can cause problems for people using screen magnifiers.

2. Think about line length

There seems to be little agreement on what is the best line length for optimum reading speeds. The most commonly held view is that limiting line length to 9 or 10 words can increase speed and comprehension (based on the assumption that the eye can only focus on about 3 inches of a page at a time). However recent research appears to show that the rules that apply to off-line print don’t necessarily apply to online print.

It is suggested that line length can actually be longer for online content. However, having said that, don’t go beyond about 80 characters as at that point readability will start to suffer.

Reading speed and user preferences are not simple matters, consider the following conclusions 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

3 Get your ‘leading’ (line-height) right

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. They do this so that 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 is going to be for every user. In relation to leading my rule of thumb would be, if in doubt go bigger.

As an aside: you might be wondering why line-height is called ‘leading’. Well, in the olden days typesetters used pieces of lead to set the space between text lines. If you like typography and typography jargon – which I do – here’s a couple more. The space between characters is called kerning and the space between groups of characters is called tracking.

Need more exciting typography jargon? Here’s a glossary of typography terms.

4. Use the correct font

Choose a font that is suitable to your subject matter. An article about ancient manuscripts can justify the use of a flowery old font whereas an article about the design of modern art galleries can’t. For the article about the design of modern art galleries you will be looking at using a clean and uncluttered san-serif font.

Don’t use more than two fonts on a page. It will look like a ransom note. Clearly that will be distracting for visitors and draw attention away from your 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 makes you look like an amateur, which isn’t good. You may not have considered it as important but poor typography decisions can damage the credibility of you and your organisation.

* Serif fonts are those with little decorative flourishes on them and sans-serif fonts are the clean and tidy ones. Compare Times New Roman with Helvetica and you will get it.

5 Avoid large blocks of italics

Avoid using italics for small text sizes. Italicized fonts can look particularly bad at small sizes as italics are not easy to render using a square pixel grid. If you must use italics, avoid using them for large blocks of text.

6 Be spare in your 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 when 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.

7 Ensure adequate contrast

Ensure good contrast between the text colour and the background colour. If the contrast between your text and background colours is low, some of your visitors won’t be able to access your content. That’s why the WCAG contains guidelines for colour contrast. For complying with WCAG AA standard text the contrast ratios need to be 4.5:1 for standard text and 3:1 for large text. Large text means 14 point and larger (typically 18.66px).

8. 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).

9. Use lots of headings

For service based websites in particular, arrange your text for scanability, i.e. have lots of headings and provide the most important ideas at the start of paragraphs. Use lists rather than dense passages of text when possible.

Most of your visitors will not be interested in reading every word on your page. So make it easy for them to find the information they are seeking quickly by using headings as signposts; signposts for the various issues and topics you are covering in you text.

10 Use appropriate language

Use a writing style and language that is appropriate for your audience. Don’t dumb down or dumb up. Think about who you are writing for and write for that audience.

Ignore the idea that you should never use jargon. If your audience expects it and when using it will actually make your meaning clearer, use it.

On the other hand if you are not writing for a specialist audience don’t try to be clever by using jargon just for the sake of it. Think about your audience and tailor your style to suit.

Don’t strive to use ‘easy read’ thinking that that will make your content accessible to a wider audience. It will accommodate one part of your audience but it will put another part off (probably the larger part). Easy read is designed for people with learning difficulties – an easy read version is an alternative version, i.e. a version aimed at a particular audience.

Jim Byrne

Contact me If you value experience (over 20 years as a web developer) and unrivalled technical know-how. Do you need a new beautiful responsive, accessible website? Get in touch. Tel: 07810 098119. 

[contact-form-7 id=”652″ title=”Services contact form”]

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.