Typography, Readability, and the Web


Published on May 13, 2005 at 1:04 PM EST
In the Discussions category.

I’m often confused by type choices web designers make. In my opinion, readability needs to be of utmost concern, not the look of the site. After all, how many sites do you visit that you don’t intend to read? Readability of the type on your site can definitely affect how many returning visitors you have.

While I’m not a type expert, I have been working in the print publishing world for quite a few years. And because of that, I’ve been exposed to and learned more about type and readability than most would probably want to know. I’d like to share a little of that knowledge and epxerience.

Serif or Sans-Serif Typefaces?

There are two kinds of typefaces: serif and sans-serif. “Serifs” are small decorative flares at the end of a character’s line. The type you’re reading now is a serif face (as are Times and Palatino, for example). “Sans-serif” (“sans,” as in “without”) don’t have these flares; the type to the left is a sans-serif face (as are Helvetica and Arial).

It’s been long-proven that “body type” or “body text”—what you’re reading now—is most readable in a serif typeface. The serifs help our brains to recognize words easier. On the flip-side, sans-serif faces are recognized by the letter, requiring more work to read. Very small and large type is often best set in sans-serif faces.

Traditionally, body type is set in a serif face, while headlines and smaller text (like captions or footnotes) are set in sans-serif.

Type Size

Body type needs to be easy to read. Always. And this is something that drives me nuts: web designers often use very small body type. The logic is simple: smaller type looks and breaks nicer. But if it’s unreadable, who cares?

Web browsers offer the capability to resize text. (This option likely exists in your browser’s View|Text Size menu.) In my opinion, this option is best suited to making text a little more readable, not overcoming a designers inability to make an easily-read site.

If you specify font sizes in your site’s CSS, I recommend against using px measurements. IE can’t resize px-specified type. Try using percentages or ems instead.

Type Alignment

I think all of us use either justified or left-aligned type on our sites.

In my opinion, left-aligned type looks best in narrower fixed-width column designs, such as you’re reading now. In a narrow fixed-width design, justified body text often leaves unsightly gaps between words, decreasing readability. (The unevennes of the right-hand side makes for a poor “rag,” but we have to accept that.)

In my opinion, justified type looks best in wide, fluid designs. A wider line of type allows for more words, allowing for more opportunity for a line break at a convenient spot—eliminating large spaces between words.

In general, justified type is considered more readable. In general, narrow columns are more readable than wide ones. With this in mind, wide-justified or narrow-left-aligned designs will be best.

Further Increase Readability

“Tracking” is the amount of space between characters and words. Tracking typically applies to a whole line or paragraph of type. “Kerning” is similar, but typically applied to only a character or two at a time.

The need for kerning is simple: some characters appear to have more space next to each other than others. For example, compare the space between “or” and “ft.” Display type—such as headlines—typically receive kerning to improve readability, but body text doesn’t because of the amount of work required. We don’t have control over kerning on the web.

Tracking is really used to get type white space “in the ballpark” for body text. In general, slightly-tighter serif type is more readble than normally-spaced type. And CSS let’s us control that! The text you’re reading now has been set with letter-spacing: -0.01em; to pull it just a little closer together. Display type—the title and subheads here—have been set with letter-spacing: -0.03em;.

Conclusion

Recognizing the effect of some of these kind of changes is often difficult. How our brains recognize letters and words—allowing us to read—is often a mystery. Type size is an obvious factor, but the other above-mentioned items also make a big difference.

Just keep in mind that you’re usually not “reading,” you’re “recognizing.” The easier your brain can recognize a word like “the,” the faster you’ll be able to read and the quicker you’ll comprehend it. A word your brain doesn’t recognize needs to be read—letter by letter—slowing comprehension and reading speed. Minimize reading by making type as recognizable as possible!

Oh yeah, use typographically-correct curly quotes and em-dashes. The SmartyPants plugin takes care of this quite easily.