The secrets of readable text

Have you ever looked at a website and squinted to read it?

Recently I’ve carried out a number of website reviews and each time I’ve met the same problem: the text is hard to read. Not because it was hard to understand, but because the letters themselves were hard to work out.

Here are a few tips to make sure that doesn’t happen to people looking at your website.

1. Make sure the text is big enough

This is pretty obvious: if the letters are bigger, they’ll be easier to read. But what’s too small? Generally, a font size of 16 pixels is considered to be the minimum for good readability. However, this is a relatively loose guideline which allows for other factors affecting readability to be less than ideal. Many websites use smaller fonts, sometimes as small as 12 or even 10 pixels. If the contrast, typeface and line-spacing allow, then smaller text may not be such a problem. Bear in mind that what you see on your screen may not be what others see on theirs. Different browsers and devices will display font sizes differently: the height of “1 pixel” is not consistent. If in doubt, it’s probably best to opt for bigger text!

Incidentally, behind the scenes, you may find that your website doesn’t use ‘pixels’ for font sizes at all: if it’s been built in the last few years, it’s may well define font size in ’ems’, which work on a percentage basis or ‘rems’ (relative ems) which fix the font sizes for different elements relative to a single ‘base’ size.

2. Check the colour contrast

The mistake I see most often is poor colour contrast. It’s very easy to overlook and many people with good eyesight simply don’t realise how significant this can be, especially to people with visual impairments. Even people with normal eyesight will squint and blink more at low contrast text, and reading large amounts of it can strain the eyes.

Two sections of text, one in light green and one in very dark green, both against a white background. The text gets progressively smaller in each section, showing how its readability decreases as it gets smaller.

A larger font size will help reduce the impact of poor contrast, as will the use of bold text. You may, for example,  find that it’s ok to use a lower colour contrast for page titles or other header text.

As a quick visual check, try turning down the colour contrast on your screen, or hold a tissue up against the screen to see whether text is still clear. If you want a more objective test, there are lots of online tools like WebAIM’s Contrast Checker, which will check your colours meet the World Wide Web Consortium (W3C) accessibility guidelines.

Having said that, pure black  text on a white background – as I’ve used in my example – wouldn’t be good for large pieces of text either as the contrast is too great, which can also lead to eye strain.

3. Use a sans-serif font an appropriate font

You may well have heard someone say “You must use sans serif fonts for websites” and in the early days of the web, this was probably true. While serif fonts (ones with small decorations highlighting the edges) were ideal for print, on computer screens which had lower resolution, serif fonts often became pixellated which made the letters hard to read. However, modern screens are a much higher resolution, so the “sans-serif is best for the web” argument no longer holds. Of course, there are still times when there are reasons to choose either a serif or sans serif font.

What is clear is that some fonts are easier to read than others. It’s fine to use a decorative font for page elements like titles, logos and headings, particularly as these tend to be a larger size, but the main body font should be as simple and clear as possible.

Three lists of fonts labelled 'Serif', 'Sans serif' and 'Script and decorative'. Each font name is in the appropriate font.

On a related note, don’t use images instead of text on your website. Back in the days when browsers could only show a limited number of fonts, this was a common technique for displaying specialist fonts but it’s no longer necessary. Using an image to display text means that the letters can’t be magnified easily, won’t be seen by people using a text-only version of your website or screen-reader software, and can’t be read by search engines. It’ll add to your page weight too which might slow your site down.

The exception to this is where the text is part of a graphical element, for example a logo or infographic.

4. Get the typography right

Typography is the way that the text is positioned on the page. There are a whole range of different elements to consider, including the vertical spacing between lines of text, the number of words on a line and the amount of ‘white space’ around the text.

Where possible, keep paragraphs short and concise, as people reading online tend to skim-read much more than they would do for printed text. Remember the copywriter’s golden rule of “one idea per paragraph”.

Ideally, lines of text should contain around 50 – 70 characters (that’s about 8 – 12 words) per line. Unfortunately it’s almost impossible to achieve this across all types and size of screen but it’s a useful benchmark.

Another important factor is the vertical line spacing. Put the lines too close together and it’s hard to distinguish the letters. Put them too far apart and the reader’s eye may begin to wander at the end of each line. Generally a line height that’s slightly larger than the font size (approx 1.2 – 1.3 x the font size) works well but you may want to tweak this for different fonts.

Two sections of text with different line spacing. The example on the left is difficult to read because there's not enough space between lines.

Increasing the margins and other ‘white space’ around the text helps to separate it from whatever’s going on around it, which makes it easier for a user to focus on the words.

5. The exception…

Of course you want your text to be as readable as possible. Or do you? There may be occasions when it’s better to make it less readable. A 2010 study showed that using harder-to-read fonts make people remember more.

The less-readable text forces them to slow down which, in turn, means that they concentrate more and absorb more of the information that they’ve read. The tricky bit is to get the balance between making the text readable enough that people don’t get discouraged, and difficult enough that they have to slow down.

If you’ve read this far but don’t remember any of it afterwards, perhaps I should have made it a bit harder to read…

Want more blog posts?

Subscribe to get my latest blog posts straight to your inbox

Comments

  1. Simon Charwey says

    Great insight! Alice.
    Talking of “Readability”, I think one other important thing to consider is Accessibility.
    How can we integrate fonts design to improve readability for people suffering from dyslexia? — Thank God! Some genius student out there has developed readable font for people suffering from dyslexia.
    To somehow try to answer my own question, I think website designers and developers should creatively incorporate a feature that allows people suffering from dyslexia to easily switch to the “dyslexia font” to help them read easily and comfortably.

    • Alice Gardiner says

      Hi Simon,
      You’re absolutely right! I think it’s very easy to overlook accessibility but, having been introduced to the concept very early in my web career, it’s always been a bit of a passion of mine.
      Fonts and readability are an important part of it – but not all, by a long shot. If you’re interested in the subject, I highly recommend reading Carrie Dils’ excellent articles on accessibility.
      Re: the Dyslexie font (I assume that’s the one you mean? There are others which are also recommended), I understand that it’s possible for dyslexics to install a browser extension which automatically switches to using it, which seems pretty cool.