Skip to content

Archive for March 1st, 2007

Web Typography (part 3)

Thursday, March 1st, 2007

CSS 2.0 offers web designers a couple methods for manipulating some basic attributes in text. Some of these features are useful and others… well… not so much. Here’s a short guide on typography using CSS.

Line-height

Allows you define the vertical distance between each line of text. For those of you familiar with print, it’s usually referred to as leading. In print, for 12pt text, 14pt leading is usually used. That’s about 116% line-height. But on the web, you also generally have longer lines of text than in print. By bumping up the line-height, you make it easier for your reader’s eyes to following the line of text. For large bodies of text, a line-height of 140% to 160% should be enough to clearly separate lines of text.

Text-align

There are three ways to align your text: left, right, and justify. Left is usually the preferred method for large bodies of reading. Right alignment can be used for single lines of text. Justify aligns your text on both the right and left and is to be avoided in most cases. It matches up the line lengths by adding spaces between words as needed. This often creates “rivers” of whitespace flowing down you text, an effect which can be very distracting to your reader.

Word-spacing

This allows you to alter the spaces between words. This should only be used on single lines of text. If you use this on large bodies of text, you’ll get those same “rivers” caused by justified text.

Word Spacing Demo

Letter-spacing

This property lets you alter the space between individual letters in your text. There are a couple places where this it useful. Very small text benefits from a slight increase in letter spacing. Just a small amount of letter space can really improve the readability of your 10px sized text. Large headline text on the other hand, can be given a small amount of negative letter spacing. While this won’t make your headlines more readable, it will allow you to fit an extra letter or two on each line.

Letter Spacing Demo

A good rule to follow when applying letter-spacing, is to never fluctuate more than .1em. That means for small text, you should never use more spacing than `.1em` and for large text, no less than `-.1em`.

That’s all folks

This concludes my mini-series on web typography. Remember that none of these rules are written in stone. There are some instances where you can (and should) break them. They’re more like guidelines to help you along the way to a more readable web.