Top Five Tips on… Legibility in design
You want to make your content inclusive to as many audiences as possible, whether that’s in print or online. So here are our top five tips for making your designs legible, gleaned from years of experience plus guidance from RNIB and the Equality Act 2010:
There’s much discussion about whether serif or san serif are more legible. Choose what works for the situation, what the audience might be more comfortable with, and don’t make it too fussy. Some serifs are hard to read, as are some san serifs, it’s a personal choice often. Headings can use ‘display’ fonts which can be more tailored to the item you’re creating (period style, more character etc). You should generally ensure that blocks of copy use simple, clear fonts such as Frutiger, Helvetica, Cambria. The less flourish on them, the easier they are to read.
The general rule is that italics and scripts, although fine for highlighted text, are harder to read as blocks of copy, as are very light fonts since they can seem to disappear. Bold and heavy weights can be used for headings but are not suitable for body copy. Upper case can be very clear when used for pulled out points but avoid blocks of copy with it.
In terms of sizes, all the fonts in the image above are written in the same point size so you can see how much variation there can be. For good legibility you want to pick a well-balanced font where the ascenders and descenders aren’t too long (that’s the top of the ‘d’ and bottom of the ‘p’). For printed items, 9.5pt for body can be perfectly legible if you’ve chosen a well-balanced font. On an information panel, generally the smallest size you can use is 14pt.
Contrast and colours
You want to ensure maximum contrast when using copy over colour or imagery. Here I’ve shown you the same size and weight font used across several background images and colours. When using on a coloured or shaded background, make sure to use a very light/dark coloured font over a very dark/light image or colour. When a word is put over a noisy image with lots of contrast in itself, such as trees or mountains as here, it makes it very difficult to understand.
Equally, tonally similar colours make it hard to pick out words (as grey and yellow shown here). Never use red/green, grey/red or complementary colours as text and background together. They appear to zing and are just really hard to read, whether or not your reader is colour blind!
All content needs a heading at a minimum, then body copy. Longer chunks of information (articles and such) are better broken up with subheads, bullets and pulled out quotes if suitable. This is called hierarchy of text as shown here: it starts short and big and filters down to body copy. Generally in print, short line lengths are easier to read, usually columns of up to ten words are fine. On panels, you want to keep the line lengths short, particularly for pull-outs as you don’t want people visibly moving their heads just to read the information! Hierarchy is important to consider both online, off line and in print.
Good use of space can actually make copy more legible (particularly for dense or small copy). You’ll see in the hierarchy example, extra spacing between blocks of text. It enables the design to breathe and makes it more visually appealing than solid blocks of text. In the spacing example you can see the same copy used with left aligned text, force justified and with tight kerning (the space between the letters). Version one is best practice for legibility, as you can see. It’s easy to follow, well spaced and clearer than the other two.
A last consideration for legible design which is particularly important to keep in mind for financial reports and statistics, is how the numerics appear. Some fonts have their numbers all sitting on the baseline, others break out of it as shown in the example. The latter can make it hard to follow lines within charts and spreadsheets unless shading or lines are used to separate them. If working on a number-heavy document, choose a font where there can be no ambiguity between numbers such as 3, 5 and 8 and 1 and 7, which can be commonly confused.
I hope this helps with your next project and has been an interesting read. If you’d like to talk further or have any questions about legibility in design, please do get in touch via our Facebook page. I could go on but I’ve tried to keep it brief!