Achieving Good Legibility and Readability on the Web

Continuing straight on from my previous post, this article will examine legibility and readability more closely by exploring the elementary typographic factors that affect them.

Typography gained its prominence in the print world. As such, the basics of good legibility and readability are well understood, but on a digital medium, we need to take a few additional considerations into account.

Typeface

As previously outlined, typefaces have a significant impact on the text they set. Selecting a good and applicable typeface that honors the copy, and caters for its requirements (e.g. if you know you’ll be setting mathematical symbols, ensure the typeface has glyphs for them) is paramount.

Chances are, you’re setting larger blocks of text. You’ll want to pick a good text font—one that’s designed for setting lengthier blocks of text. The best way to test a typeface as a text face is to set a paragraph of Lorem Ipsum in the basic Roman, at size 12px to 14px with a leading of 1 to 1.5 (see § Leading below), and see how it reads. Text faces can be either serif (e.g. Georgia) or sanserif (e.g. Arial).

Typefaces are declared in CSS with the font-family property and take descriptive values—either a generic family or specific font family. For example, here’s a transitional serif font stack:

p {
    font-family:
        Baskerville,
        Times
        'Times New Roman'
        serif;
    }

Sizing

When setting type, select a comfortable size: 14 pixels and up is a good rule of thumb for most screen text fonts. Not many of us have 20-20 vision, so better to display your text a tad large than too small.

Note: JavaScript-powered text sizing widgets ≠ accessibility.

Don’t size text arbitrarily; try to stick to a scale:

The classical scale.
The “classical scale”.

Another scale.
Another scale.

A scale based on the Fibonacci sequence.
A scale based on the Fibonacci sequence.

Type is best sized relatively, using ems. An em is the distance that’s horizontally equivalent to the type size in points (e.g. 1em of 12pt type is 12pt; 1em of 16pt type is 16pt). We set font size in CSS using the font-size property:

p { font-size: 1.2em; }

Remember that font sizes are inherited within the DOM by children from their parent elements. This can make em sizing calculations for nested elements difficult. A good idea is to size everything in pixels first, and then convert the measurements over to ems. Pixels are easy to work with, but fall short as a fixed unit—particularly when you’re scaling a website (see § Measure below).

To calculate the desired value in ems, find the value of 1 pixel in ems, then multiply by the desired font size (in pixels):

1 ÷ parent font-size × desired pixel value = em value

For example, if the parent font size (as defined by, say, the body element) is 16 pixels, but we’d like to size a paragraph—which is a child of the body element—at 12 pixels, we calculate: 1 ÷ 16 × 12, which gives us 0.75em.

The 62.5% trick

There is a neat trick to simplifying these calculations. Consider the following CSS:

p { font-size: 80%; }
blockquote { font-size: 80%; }

That styles this markup:

This is a short paragraph, followed by a quote:

Block quotes are blocks of quoted material, and can hold a
range of things, including paragraphs, lists, and even
headings of course.

[/xml]
80% of 16px is 12.8px, so p and blockquote elements will be that size, but what happens when we put a p element inside a blockquote element? The parent (blockquote) is 12.8px so the p will be rendered at 80% of that: 10.42px.

Guh! This has the potential to be quite confusing. Richard Rutter developed a neat trick to simplify the sizing calculations of nested elements. Consider:

  • Browsers have a common default size of 16px for text.
  • Set the body to a font-size of 62.5%, resetting everything to 10px.

From this point, the calculations are similar for direct descendants of the body, for example, 12px = 1.2em; 8px = 0.8em; and so forth. Deeper nested elements are (still) relative, of course.

Measure

The measure is the line length. It’s important to keep lines at a comfortable length: not too long, and not too short.

The eye has difficulty going to the next line when measures are too long. A grand and almost infamous example of a website that could do better in this regard is Wikipedia, where the measure is relative to the length of the browser window; expand the window to full-screen on a widescreen monitor and notice how suddenly, where there was a comfortable 40 characters per line, you’ll have measures of 100 characters or more.

Conversely, ensure lines aren’t so short that the eye has to drop a line every few words. There are some publication styles where short measures are popular—for example, periodicals—but copy that’s set so short elsewhere begins to look cheap, as if, once read, it could be thrown away just like a newspaper.

Measures are set in CSS with the width property. Ideally, set the design or total page width in ems, and columns in percentages, such that columns, the grid, and the entire page design scale proportionately. For example:

body {
    font-size: 62.5%;
    width: 96em;
   margin: 0 auto 0 auto;
    }
    div#content {
        width: 75%;
        float: left;
        }
    div#sidebar {
        width: 25%;
        float: right;
        }

In this example we’ve used the 62.5% trick to reset the base font size to 10 pixels in the body and defined a total design width of 960 pixels which is centered. Meanwhile, we’ve defined two div elements: one as a sidebar with a width of 240 pixels (25% of 960 = 240 pixels) and the other as a content container with width of 720 pixels (75% of 960 = 720 pixels). This design scales perfectly, even when only text-only zoom is available.

Leading

It’s important to provide ample space between lines so that the eye can read along and travel between lines with comfort and ease. A good rule is to give copy with short measures less leading, and longer measures more leading.

Leading is controlled in CSS using the line-height property. You can use it to set unit-less number values (e.g. 1.5), whereby it acts as a multiplier of the font size:

p { line-height: 1.5; }

This means the leading will be one and a half times the size of the font-size. Unit-less values are easier to keep track of, and to work with when setting leading for descendent elements. They also scale nicely.

Alignment

Alignment refers to the placement and arrangement of text. When setting blocks of copy, align text to the left margin or “gutter”, and don’t be afraid of having a ragged edge (i.e. “left-aligned”, “flush-left”, or “ragged-right”). Justification is great if there is a sufficient measure to cater for the adjustment of the word-spacing and, ideally, if automatic hyphenation is accessible. Avoid justification in narrow columns of text.

Alignment is controlled in CSS using the text-align property, and takes descriptive values, for example:

body { text-align: left; }
    div#content p { text-align: justify; }
    div#content p.verse { text-align: center; }

The culmination (contrast)

Legible and readable text has a high contrast with its surroundings without becoming an eye-sore. Good contrast is achieved by setting text with the above factors in mind, and by considering the color of the type and the background it’s placed on. A good guiding principle is dark text on a light background, or visa versa. Avoid clashing colors or a barely visible grey on a white background.

In CSS, the text color is controlled by the color property, while the background is controlled by the background-color property and takes numerical and descriptive values. Here’s an example:

div#content p {
    color: #111;
    background-color: white;
    }

Pay attention to contrasts when working with light text on a dark background. Dark text on a light background generally has a higher contrast than light text on a dark background. Thus, when light text rests on a dark background check its contrast—increase leading and decrease font-weight as applicable.

div#footer p {
    color: white;
    background-color: #333;
    line-height: 1.8;
    font-weight: lighter;
    }

Closing

That’s it. Applying these principles should provide your text with the elementary typographic goodness, as well as better legibility and readability.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Matt

    Assuming that everyone has their browser set to 16pt as the default and then resizing to 62.5% of that is a bad assumption.

    Why IE ever decided that 16pt was a good choice for body text is beyond me, and in my mind is the one thing more than anything else that has screwed up typography on the web.

    Too many designers scale down from that, and then when users change their default to something more to their liking, the sites that have overridden the default end up with text too small.

  • Tom

    I thought that 62.5% thing was old, outdated and deemed, well, wrong. Setting 100% on the body, and sizing elements as needed-in ems or %-or not at all is much more acceptable and better from a users point of view. Why force a font size on a user at all? Someone of poor eyesight will grumble at not being able to read your content. I realize most designers are in love with small font sizes, but that’s heavy handed.

  • JennyC

    Thanks for some very clear explanations of some essential css and design basics. Wish I’d been able to use this when I was teaching last year!

  • http://angelobeltran.com/blog Angelo Beltran

    I still use the 62.5% trick as it provides a better and simpler way to calculate font sizes. Thanks for the other great tips.

  • http://twitter.com/BlackMaxDesign Michael Tuck

    Pascal, welcome to Design Festival! Good to have you here, buddy.

  • http://twitter.com/fineartdavid David Owens

    I’d suggest using real text over Loren Ipsum to test readability.

    You can’t really “read” the fake stuff so it can make you think fonts are clear when you might have problems with real copy.

    Grab some from WIkipedia, but make sure you haven’t picked an article that is offensive to the client!.

  • Pleccy

    I have never met a typical end user (that is, not an internet professional) that actually sets a non-default font-size in his browser. They don’t even know it’s possible, let alone how to do it. I think the very vast majority of the regular computer users use their computer and screen right out of the box with the defualt settings. They don’t tweak settings in hardware and software. They don’t even know basic things like copy and paste with shortcuts, etc. I can’t count the times I noticed people have expensive monitors and graphic cards, and still use terrible the lowest default settings. The same goes for browsers and mail software. Very few people change default settings, and even get nervous when you say it’s possible to improve settings. It works, so they leave it as it is.

    So why do designers stress the importance of scalability? In real live very few people will use that feature, so you’d better use a fixed size like 12, 13 or 14px for body. And for titles, why should they follow some kind of artificial sequence like described above. I think you should use whatever looks good and is user friendly. Using fixed sizes give you best control over your design, something that is totally accepted in print (I know, there is no alternative), but somehow is being attacked by some in web.

    • http://twitter.com/fineartdavid David Owens

      The trouble is that the “very few” who do change this particular setting are probably those who are most harmed by designers ignoring it.

      Some people like to increase the text-size without scaling the rest of the page and IE won’t do that for pixel-based font sizes. Last time I checked this was even the case for IE9.

      • Pleccy

        But then they can just use the zoom function and set it to 125%. If you allow people to set font sizes, often the layout of the design is harmed. So it’s a choice between two bad things… And from a designer point of view it’s far more easier to use fixed sized fonts.

        • Stevie D

          Using zoom has a tendency to stuff up layouts (particularly if you’re not enlightened enough to use Opera, which has a slightly better zoom than other browsers), and is pretty much guaranteed to stuff up images, which will render really badly at anything other than 50%, 100% or 200%.

  • Stevie D

    I’m appalled to see a Sitepoint article advocating the use of the 62.5% hack … or are we back in 2001 and the last 10 years have just been a dream?

    For a start, assuming that everyone has a text size of 16px is just plain wrong, and if you’re predicating your design on that then it’s going to break for a lot of people. Second, you’ve implied that it’s a solution to the problem of nested elements, but it doesn’t help at all.

    But third … YOU’RE SAT AT A COMPUTER. How hard is it to fire up the calculator and divide 16px by 14px to get the proportions you want?

  • Tomas

    I think it was a great article. I have a background in editorial design and it has always been dificult for me to translate design concepts from one field to the other. I think you managed to do that very well, despite the “62.5 %” issue.

    Thanks!