CSS letter-​​spacing and Where to Use It

CSS letter-​​spacing and Where to Use It

The letter-spacing property is an oft forgotten CSS option which allows us to change the tracking between letters. Altering the default s... 00:18

The letter-spacing property is an oft forgotten CSS option which allows us to change the tracking between letters. Altering the default spacing is seldom needed as text fonts are designed and optimised for legibility and readability exactly for setting larger blocks of text. However, the granular control of this horizontal spacing between letters can be useful in particular circumstances.

The letter-​​spacing property

The letter-spacing CSS property has been available since CSS1 and enjoys thankfully an almost perfect support from all the main browsers. To employ the property we simply call it and give it a length value:

1	h1 { letter-spacing: −1px; }

This length value is inserted between characters in addition to the default spacing (called the kerning). Quick note: while negative values are permitted percentages aren’t (for good reason). If you want to ensure your tracking remains relative to the font size (in case it is decreased or increased) set your values in ems.
The property also accepts the descriptive values “normal” and “inherit”, but the latter IE has some problems with.
Tracking also interacts with text justification, which is computed by the user agent (e.g browser) and font rendering engine. When text is justified (e.g. text-align: justify;) the browser will not alter the tracking unless letter-spacing: normal; is set. Remember however that “normal” and a value of “0” is not equivalent in this regard, so if you want to reset inherited letter-​​spacing and ensure it behaves accordingly be sure to set it back to “normal”.
There is another CSS property similar to letter-​​spacing provides control to word-spacing. Use case: just about never.

Use Cases for letter-spacing

Increasing Legibility

First and foremost letter-spacing allows us to insert additional space between text, which can aid in providing better legibility. The two prime examples for this are setting acronyms and strings of lining numbers or figures.

Spacing Acronyms

Acronyms being chiefly a string of uppercase characters are harder to discern than their lowercase equivalents due to the uniformity in height and the baseline the uppercase letters sit on (see my previous post, Top 10 Dos and Don’ts of Web Typography: #6).
A common technique to avoid causing acronyms in a block of text to spring out and act as eyesore is to set them in small-​​capitals (font-variant: small-caps;). By doing so the height of the now “small” capitals aligns to the x-​​height as sits nested better in the text. However as now smaller, the small-​​capitals can become somewhat illegible sitting as close as they are to one another by default.
Here we can call upon tracking by adding a few additional units of spacing between the glyphs. For example:

1	acronym, .caps, abbr {

2	text-transform: lowercase;

3	font-variant: small-caps;

4	font-style: normal;

5	letter-spacing: 1px;

6

}

Spacing Lining Figures

A second example is additional spacing given occasionally to lining figures, that is figures (i.e. numbers) which are uniform in height and don’t extend beyond the x-​​height or drop below the baseline like text or “old-​​style” figures.
The same principles from setting acronyms apply. Although not chiefly done for figures that reside in body copy (because ideally you’d use text figures) lining figures are commonly used in tabular work: e.g. financial reports. See below for an example where lining figures are intermixed with full-​​caps in the form of ID numbers:

For Aesthetics

Tracking can be employed for aesthetics too. One particular popular trend is to negatively space Helvetica (or Arial):

Note: be very careful when applying negative spacing as not to make the text illegible and harder to read. The above styling would become difficult to read if set at a smaller size so reserve negative spacing for special occasions and only at ample sizes.