Readability – making web pages easy to read

All web users benefit from clear, readable text on web pages. People with visual impairments are particularly helped.

Don’t use too many font sizes

Font sizes are a great differentiator. They work as signs that say "Here is something important" or "Here is a new section – This big bit tells you what the section is about, the small stuff below is the actual content". Just like any other means of visually differentiating elements, there needs to be a sufficient level of visual difference for text size to work.

For this reason, it is not recommended to use more than 3 different main font sizes to render your main content (i.e. main header, sub-header, body). This only applies to the main body content. Other screen elements may use alternative sizes (such as superscript/subscript, labels, advertisements, separate nav links, footer nav etc.)

Use sans-serif face for all body copy

Different classes of typefaces (fonts) have different innate levels of readability.

Serif vs. Sans-serif fonts

The following 2 paragraphs should be displayed first in a serif font, then in a sans-serif font. Read both word-for-word and then judge which is easier to read.

Serif

Serif fonts have worked well for hundreds of years. They tend to look more old-fashioned and ‘establishment’. The serifs – the flowing marks at the points of letters – work by leading the eye on to the next letter, making for a smoother and easier read. However, this only works at high resolutions (e.g. print). At low-res, the extra complexity decreases clarity, and the reduced whitespace between letters makes recognition slower. I find that serifs become more acceptable at higher sizes.

Sans

Sans-serifs are literally fonts that don’t have serifs. They look more modern and open. Sans-serif fonts are more readable than serifs on pixel-based displays, because they are simpler, which translates well to low-resolutions.

Many sans fonts have been developed specifically for electronic media. The most readable sans-serif fonts are broad, providing ample space between letters, which facilitates recognition. In the opinion of most designers, Verdana is the most effective font for body text.

Verdana is specifically good for body text, because it’s a broad a spacious font, which leaves an ample square space for each letter. This makes it easier to distinguish each different letter at low resolutions.

Click image to view larger
Arial vs Verdana

Don’t use too many typefaces

Different fonts project their own personalities, which can be helpful for branding.

In general body copy, I would always recommend using Verdana (1st preference), Helvetica or other sans-serif fonts. Titles and other page features (logos / navigation / ads) may use a huge variety of other typefaces to create different feels. However, it is generally acknowledged that too many different typefaces is counter-productive.

As a rule, don’t use more than 3 different typefaces throughout a single web page design.

Emphasis

Create emphasis through using underlines, bold and italics, but use them sparingly. To draw attention to a whole line, consider using a coloured background, or emboldening, which are less detrimental to readability than underlines or italics.

Emboldening increases contrast, and contrast only works when it has something to contrast against. Lots of bold text doesn’t draw attention, it competes for attention, creates extra noise and decreases readability. See my case study on foruse.com.

Italics are quite handy for emphasising words or short phrases. They tend to have a softer emphasis than emboldening. Italics should not be used for blocks of text, because they can have a similar effect to serif fonts at small resolutions, reducing readability. Sans-serif fonts that work well on screen can have poor readability in italic form.

Similarly, underlining text can serve to emphasise certain words or short phrases, when used in moderation. Be careful that underlining for emphasis is not mistakable for hyperlinks (perhaps by having hyperlinks in blue without underlines in normal state, exhibiting the underline on hover).

Alignment

Left-aligned text is easier to read than right-aligned text.

Full justification (where words are stretched so that they meet both the left and right margin, as in this paragraph) is only effective with pretty long lines of text (40chars+). However, on-screen text is easier to read in narrower columns, which makes it hard to justify full justification! In my opinion, a web page is the wrong place for fully-justified copy, because it doesn’t have the resolution to implement it smoothly.

The above fully-justified column remains relatively readable. This somewhat narrower column uses fully-justified text, but notice how the reading flow is jerky and awkward, particularly with substantially longer words.

Contrast in text

It’s very important to have sufficient contrast between text and its background. Use white background with black body text where possible. If not, black on the lightest background colour you can manage. An alternative is white or brightly-coloured text on a black or very dark background colour, but this seems slightly more tiring.

Case / Capitalisation

DON’T USE CAPS FOR BODY TEXT, BECAUSE IT DECREASES THE CONTRAST BETWEEN LETTERS WHEN THEY ALL TAKE UP THE SAME SIZED BOX.

Capital letters are useful because they announce the start of a piece of text (sentence) or an important piece of information such as a name. They lose their effectiveness when over-used. Full capitalisation is more tiring and slower to read, because it reduces recognition by making all letters a similar size.

In titles, use capitalisation consistently. I prefer to capitalise the more important words in titles, and keep the lesser filler words in lowercase (and, the, to, a, etc.)

Spacing text

Clearly, whitespace is vital for text to be readable. Whitespace around elements is known in design-speak as guttering, or margin when applied to blocks of text. It’s useful because it helps the eye to identify a block of text as a group, and also helps you quickly find the beginning of each line.

Use proximity to associate headers and titles with content. Proximity also requires whitespace, so use space around all paragraphs and headers, but make sure a header is nearer to its child content than previous paragraphs. This softly suggests further levels of association, and helps scanning.

The spacing between letters is known as letterspacing, track kerning or tracking.

The spacing between lines is called leading (derived from the thin strips of hammered-out lead used by typesetters).

CSS allows designers to change letterspacing (through the letter-spacing property) and leading (using line-height), but should be only considered with very good reason. Do not be tempted to reduce letterspacing or leading below the default value, as this will reduce readability.

» Research proof that margins improve readability (and leading is nice)

Text block size

Blocks of text should not be too long or too wide.

When paragraphs get long, they’re harder to read because there’s less whitespace. Whitespace gives paragraphs shape, which acts like visual bearings, making it easier to find your place, and to find the start of the next line. Using more, smaller paragraphs suits web content particularly, because it lets you subtly highlight more useful phrases, by putting them in their own paragraph, or starting a new paragraph.

For similar reasons, long lines (wide paragraphs) are slower and harder to read than narrower ones. Lines of around 100 characters present neat bite-size chunks of text that can easily be decoded, and also make it really easy to scan round to the start of the next line. That’s why newspapers and magazines use several columns on a page, and why books use the same common format.

37 Comments Leave a comment

  1. Michael Persson says:

    having 10 years in the internet business i have seen and experience all situations like these. most design agencies have problems with design vs. readability and most often design wins and the message loses…

  2. Pingback: 44centKylie Minogue strikes a pose and looks amazing

  3. Pingback: 44centBentley changing 18 month product cycle

  4. Pingback: How the typeface joins in the logo harmony | Growler Talk

  5. Pingback: 44centOfficial: Aston Martin DB9 facelift revealed

  6. David Snell says:

    Not really a fair comparison of serif vs sans-serif. The first line of the the serif text is shorter than the first line of the sans-serif text, but contains four more letters. Although the fonts are the same height, the serif characters are narrower because they have taller ascenders.

    • WDFS says:

      David, you’re right that the sizes are different. They’re just in the browser’s default, and Verdana does tend to appear big. The principle still seems correct, though.

  7. Pingback: Justifying Readability [ VOID-STAR.NET ]

  8. Pingback: 5 manières d’améliorer vos résultats avec vos bannières publicitaires | Webpratique.ca

  9. Pingback: Let’s Try That Link Again « professoroldham

  10. JCRogers says:

    So, to summarize: “Here’s a bunch of opinions (that in one case, even goes against established rules) that you should take as hard and fast rules while designing.” Awesome.

    • Ben Hunt says:

      JC, can you elaborate please?

      • JCRogers says:

        As an example: “I prefer to capitalise the more important words in titles, and keep the lesser filler words in lowercase (and, the, to, a, etc.)” — There are actually clear rules about which words to capitalize in a title, and it’s not really open to your judgment (though the words you’ve listed shouldn’t be capped, so they’re fine). What you deem “important” may be against the rules to cap, and what you deem unimportant may, in fact, require capitalization. It’s not really a big deal, I just thought it was interesting to list opinions as rules.

  11. Pingback: I love Justified. The TV series. Justified body copy? Not so much. | Douglas Communications Group

  12. Andrew says:

    You’re right, people need to calm down with all the crazy fonts as it makes sites rather unreadable and very hard to stay on!

  13. Pingback: 18 Super Quick Web Typography Tips for Newbies - Speckyboy Design Magazine

  14. Shannon Gerdel says:

    Ben,

    I have a brain tumor, and sometimes reading different fonts is very difficult. My tumor is stable, ie: it is not growing. It can still have a profound ability to cause me problems with reading, comprehension, and memory.

    I appreciate your opinion, since sometimes reading my own text as Times can be very tiring. Thank you for the ideas, and opinions on the matter. I am very grateful to you for your willingness to help people like me that are trying to find any way that we can improve our quality of life.

  15. Pingback: Serif vs Sans Serif for body text | JonathanMH

  16. Bob Macdonald says:

    Congratulations on your website. Noticing the general detioriation in quite a few websites, as well as software visibility in recent years, then how do we get your, and my message, out to the website and software designers? Pale grey, even very pale greenish yellow fonts in small sizes on spacy white backgrounds are a no no. So why are they so prevalent today? Muddy menus are also a problem. For example note the deterioration in the screen interface between the 2000 and 2010 versions of MS Office in Windows.
    Kind regards
    Bob

    • Ben Hunt says:

      Hi Bob. You’re quite right. This is very much part of my mission.

      I do think that design for the web, and web-based apps is getting better overall, and that best practice is also getting better.

      But we’re certainly not there yet.

  17. Leslie says:

    Hello,

    I came across your site searching for easier to read fonts and found this article most useful as I didn’t consciously realise all of what you have written.

    I’m in the process of updating (redesigning) my website and just putting some final touches on it…

    I’m considering the font tahoma for body text as an alternative to verdana. At the moment it is still in arial or whatever default.

    Thanks,
    Leslie

  18. Anna says:

    I also don’t like when people use many fonts. It irritates, especially when there are too many colors.

  19. Pingback: Web Design Relief Links Roundup, Week Of 1/28 - Web Design Relief

  20. Shred Pillai says:

    Nice article and very informative. You didn’t however mention the most suitable color to be used, at least on a common background of white.Is Black the best ?

    • Ben Hunt says:

      Yes, black text on a white background is best.

  21. Puella Nivis says:

    Actually, studies have been done and found that black text on yellow background are the easiest to read. Basically, look into how to format a proper letter to Donald Knuth, and you’ll see the pedantic features of readability.

    • Puella Nivis says:

      Actually, thinking about it, most black text is really just really dark purple, wherein from the color wheel yellow would most contrast. (There’s a good guide online about “why you should never use black”.) This likely explains why yellow is the most legible with black text… however, most monitors are set to a “warm” white, and so a faint blue should increase contrast even more than white.

  22. Pingback: Website design mistakes that are hurting your tour business

  23. Pingback: Læsevenligt webdesign « FruMik

  24. Pingback: Week 3: Emphasis & Alignment | Alex Locke Designs

  25. Pingback: How To Become a Freelance Web Designer

  26. Ben says:

    You suggest using a Serif font for body text. Yet, you use a sans-serif font for the article text. Is this not a clear contradiction?

  27. Jeannette says:

    bookmarked!!, I like your website!

  28. Pingback: Web Design Mistakes Web Designers Should Avoid | The Webmasters RealmThe Webmasters Realm

  29. Pingback: Mo Ghaoui, Personal Blog – Web Design Mistakes Web Designers Should Avoid

  30. Pingback: Web Design Mistakes Web Designers Should Avoid | Live Project Web Training