Don’t let common typography mistakes render your website virtually unreadable

You’ll want your website visitors to stick around and read the great information on your web page. But if the text isn’t legible, they won’t have the patience to stay. Use our typography tips to increase your site’s appeal.

Note: All images referenced in this article can be viewed @ http://bit.ly/tyqqt

Because it’s so easy to set fonts, background colors, and other formatting with CSS, some developers forget to choose this formatting carefully for legibility. Of course, it doesn’t matter how pretty the text looks if the reader can’t read it and leaves your site in disgust.

To make judging legibility even trickier, many developers don’t see the full text that will appear on the site, since the server-side code may generate it automatically. While a few test words on the site may look okay, bad formatting can cause readers to struggle while attempting to read whole paragraphs. To avoid these kinds of mistakes, it pays to know a few readability principles.


Key rules for readability

Readability refers to the ability to read all the text added to a web page. It’s much harder to read text onscreen than in print, so special considerations are required. For starters, consider the following guidelines:

• Don’t size text too small or too large.
• When possible, avoid specifying absolute font sizes, since they may prevent readers from making the text larger through their browser options. For example, fontsize: 1.5em is better than fontsize: 15px.
• Avoid overuse of type styles (e.g., bold, italic, all caps). A long paragraph in italics, for example, can be difficult to read.
• Don’t contradict common web practice in your use of type styles. For instance, avoid using colored, underlined text for anything that’s not a hyperlink.
• Be careful about placing text on a colored background.
• Choose common fonts that are easy to read on the web.

Choose appropriate fonts

Let’s take a closer look at font choice. Two key rules apply here:

• Some fonts that are good when you print a document aren’t so great online. Often, the difference comes from subtle character spacing issues. So once you find a font you like, try out several similar ones on the screen. You can use the CSS font-family property to specify your first, second, and third (etc.) choices.
• Sans serif fonts are usually easier to read than serif fonts, and they tend to look bigger. This is one good reason to specify some fonts in your style code, since browsers often default to serif fonts.

Tip: Avoid mixing serif and sans serif fonts; the transition between reading such different types of fonts can slow down a reader.

Not all sans serif fonts are created equal

Just because a font is sans serif doesn’t guarantee legibility. And while the fancier fonts may look great in titles, they can be hard to read in paragraphs. Let’s see what happens when we take even a great piece of text and put it onto a website with a poor font choice. We’ll make a CSS declaration specifying the Impact font (or any sans-serif font if the client machine doesn’t have Impact):

See page 6: http://bit.ly/iCFJt

Even great words lose impact with the wrong font

We’ll now apply this style to an excerpt from a famous speech Lincoln gave in October, 1854:

See page 6: http://bit.ly/iCFJt

Apologizing to the great Lincoln in advance, we see that the results, as shown in Figure A, demonstrate that even the most cogent text in the world is virtually unreadable in the wrong font. Even if you find it not bad reading once you get into it, the mere appearance of such a font can intimidate readers from reading it at all.

More legible alternatives

Perhaps a better choice is to stick with a system font, such as Geneva (Mac) or Arial (Windows). These fonts aren’t only easier to read onscreen, but are also more likely to be installed on the user’s computer, thus reducing the risk of font substitution.


Be careful with colored backgrounds

Another area that’s important to watch out for is the colored background. As with most things on the web, less is more. Simply put, it’s hard to beat black text on a white background (or some shade of white) for legibility.

Certainly, depending on your site’s theme and purpose, you can still get satisfying results with other color combinations, as long as the contrast is adequate. And, in some cases, a client may demand a particular color scheme.

The trick to text on color: Make it bigger

One of the problems with any colored background is that it tends to make the text look smaller — especially if the text color is lighter than the background. For instance, suppose we apply the following style definitions to a page:

div {padding:1em;}
.withcolor {background-color:#880088; color:#00FF00;}
.bigger {background-color:#880088; color:#00FF00; font-size:1.3em;}

While the result in Figure B is okay in print, the second block of text is hard to read onscreen and looks surprisingly small — as if the text is dissolving into the color around it. The final block of text uses a larger font size to help overcome the readability problems caused by the background color.


Break up the text

Choosing the right font and size with which to format text is just the beginning. Also consider the way in which you place text on a web page. As a rule, it’s easier to read text that’s in narrow columns, rather than long rows that span the entire width of the page.

Create a column effect without multiple columns

Of course, this rule creates a little of a dilemma: You certainly don’t want readers to have to scroll up and down the website to read the sort of multiple column layout you’d see in the newspapers. That’s probably why such layouts aren’t as popular as they were a few years ago. However, you can still keep text from going all the way across. The one danger here is that this sort of formatting may not come out on a printer, which is why The New York Times offers a button to see a printer-friendly page.

Keep paragraph size small

A related issue is the size of the paragraphs. If you’re involved in writing any of the actual text for the web page (e.g., instructions for a web application), favor short paragraphs over long ones that seemingly never end. Otherwise, readers may lose patience and not even read what you wrote.

Don’t let your code get rid of all the white space either

Similarly, if your web application reports on data that users have entered, don’t get rid of all the white space. Some applications trim every bit of white space out of a string of text, assuming that every line break or indent is wasteful. In some instances, developers fail to encode text entered as a line break as an HTML break <> . The result is large blocks of impenetrable text.


Design for legibility

Even using techniques to increase text readability doesn’t guarantee the content will be entirely legible. Legibility has to do with the overall design of text on the page. The goal is to format and position the text so it’s easy for viewers to recognize the hierarchy of the content.


A matter of purpose

You’ll probably notice that some sites deliberately seek to be disorderly, jarring, or even annoying. Glitzy, flamboyant sites, may work as part of marketing strategy, or to appeal to specific audiences. But if your goal is to impart information, your best bet is usually to create an orderly page.

Print this post