Use Legible Text to Design Your Website - dummies

Use Legible Text to Design Your Website

By Lisa Lopuck

Whether a website uses graphic or HTML text, reading text on the computer screen can be uncomfortable on the eye: You squint from the glare while trying to read the small text. You can minimize the torture, however, by limiting the amount of text you include on each web page. By breaking copy into small chunks (as opposed to long paragraphs), and choosing the right fonts, colors, and sizes, you can make your page much easier to read on a computer monitor.

Print designers have the luxury of working with all sorts of fonts and font sizes. This is because they can print with a high resolution (fine dot size) on paper — even if the text is very small, readers can still easily see the detail. Images displayed on a computer monitor, however, are a different story. The smallest dot of light on a monitor, called a pixel, is 1⁄72-inch wide, or 72 dots per linear inch — which, without making you get out your ruler, is not that small when compared to standard printing resolutions like 150 and 300 dots per inch.

Take a look at the type in the first example. This text is 10-point Syntax in bold on the computer. It has been enlarged so you can see that only a few pixels make up each letter. Such a small number of pixels makes the text appear clunky and unreadable — especially when magnified like this. Ten-point type size is a common font size on business cards, so as you can see, what works for a business card doesn’t work as well on the computer screen. Of course, some fonts in this size work better than others on the web, but you get the general idea.


In addition to fonts and font sizes, other factors contribute to text legibility on a web page. You can do three things to make your text more readable (regardless of what font you choose):

  • Typically, dark text on a light background is more legible than the reverse. If your web page has a lot of text that you want people to read, choose a light-colored background with dark text for good contrast. A dark, muted color rather than black text for body copy softens the effect, making the text not so glaring and stark as black text on a white background.

  • Try widening the leading the space between the lines of text to make the text more readable. Increasing the leading helps the eye to find the next line of text. Compare the visual effect of the three text blocks in the second example. The text in the left block is too cramped, whereas the middle block of text is much more readable — especially on the dark background. The loose leading in the right block gives an entirely different, more decorative feel to the text.

  • Try to limit each body text column’s width to no more than about 450 pixels. Because web pages have more horizontal space than vertical space, you may be tempted to make each line of text run across the entire page to get as much above the fold line as possible. (Above the fold line means within the browser-screen space that the visitor first encounters.) The problem with this tactic, however, is that after your eyes get all the way across the page, you can’t easily find the next line. Limiting each column’s width to no more than about 450 pixels helps your visitors’ eyes zigzag down the page quickly and accurately. Typically, web-page layouts account for two to three narrow columns of text instead of one wide one, as in the following figure.


    Using a significant amount of leading only works well for smaller blocks of text — not for entire pages of body text. You can use a lot of leading to make a lead-in paragraph or a quote stand out from the main body, as in the following figure.