web typography study guide

Letter-spacing

Letter-spacing is the same as tracking in desktop publishing. It's the amount of space between a group of letters.

The amount of letter-spacing in text can affect readability. Tight letter-spacing, particularly in small text sizes, can be difficult to read. On the other hand, too much space to the point that individual letters become isolated can destroy readability as well.

In addition to Letter-spacing, word-spacing is another CSS property that can be specified to further tweak the text display. Word-spacing is the size of the space between words. By default, it is 0.25em.

On longer lines, a little extra word-spacing will mean fewer words per line, and thus make it easier for readers to keep track of where they are in the text. However, too much word-spacing breaks the line into separate elements, inhibiting reading. Word-spacing should always be less than line-spacing. Otherwise it makes reading difficult because the eye tends to move from top to bottom instead of left to right. Word-spacing is also hugely influenced by justification (the text-align property in CSS).

Using two spaces after a period—a habit that came from using the old monospaced typewriter—is inappropriate for the web. A page of text with two spaces between every sentence looks riddled with holes. Remember always to use one space between sentences.

Letter-spacing and word-spacing never should be considered in isolation. It is the combination of line-height, font face, font-size, width of the text box, white space surrounding the text and the letter- and word-spacing that gives the designer more accurate control over the word density, and thus the readability, of any given page.