Readability

Legibility and readability can be easily confused. Let’s start with ‘legibility’, as the more important of the two. Legibility simply means that the text can be read. The contrast between the background and the font color is sufficient, the size is suitable, the letterforms can be easily distinguished.

A ‘readable’ text invites you to read. It goes beyond simple legibility. Usually, some clever formatting is needed to make the text readable. So how do you make a text readable, rather than just legible?

Chunking

A wall of uninterrupted text can put off even the most seasoned readers. Splitting your text into paragraphs helps the reader. When working in a desktop publishing programs such as InDesign, you can control exactly the amount of space between the paragraphs. For web publications, this can be achieved with CSS.

Getting the layout right

Your heart is on your left side…and so should be your text.

Text formatting on the web got much better in recent years, also CSS now offers much more flexibility. Yet we still see some usual offenders:

• line length too long,
• too much line spacing (or too little),
• center-justified text.

Examples from the New Yorker, The Times, and The Guardian online versions illustrate how to solve that problem: A lot of white space is added to make the line shorter. If a line length is too long, your eyes start trailing off, making reading harder.

Tip: A line of 30-40 characters and spaces is a comfortable line length.

Many websites still use a full-page layout for the text body, often the text is center-justified, making reading even harder. Your eye needs to ‘anchor’ itself on a straight line of the block of text. Center-justified (aligned) or right-aligned (sometimes called rugged) text is only appropriate for snippets of texts, headlines, and captions. The main body has to be left-aligned, like a mantra: religiously, no exception.

Adding large margins and splitting the text into smaller columns is a good solution. Columns of text shouldn’t be too narrow, either, as it will make reading harder.

Tip: A line should have a minimum of six words - different rules might apply for German and other languages…

The New Yorker and the Guardian used a similar layout, adding lots of white space to the right. Die Zeit text is centered, but it is left-aligned. It also shows that ‘white space’ does not need to be white. Sometimes also called ‘negative space’ it might even be pink-ish/beige, as in the case of Financial Times:

The most important thing is to be able to focus without the clutter of ads and popups distracting from the text.

Adding visual interest to the text

The New Yorker text is enhanced by a ‘drop cap’: the first letter of the text body is much larger than the rest and takes up an extra line. This hiccup from the days of printing adds visual interest. The effect can be achieved with CSS.

References

Readability Guidelines - Sarah Richards

• readability
• legibility
• setting text
• layout