Spaced Out: Tracking In Typography

When we read text, we read in phrases. Our reading pattern is disturbed if letters and words are consistently too close together or too far apart.

We can adjust the space between letters using tracking and kerning – two frequently confused terms. Today we’re looking at tracking.

Tracking
Tracking (also known as letter spacing) is the adjustment of space for groups of letters and entire blocks of text. It can make text appear more airy or more dense and affects the appearance and readability of text. Tracking can be applied to small portions of text or an entire block at a time.

For example script typefaces often require tight letter spacing because the letters should connect, but they also require extra space between the words otherwise they type is difficult to read.

In the example above, when the tracking is set to 100, the space between the letters is too great, at –50 the space is too tight and makes the text difficult to read. When set to 0, the letters are touching each other correctly. This does not mean that all type should always be set to 0 tracking. Take a look at the same tracking settings using Adobe Garamond.

In this example, the text is legible with tracking at 0, –50 and +100.  Every font is different and you can get some nice effects by adjusting the space between letters.

Tracking in Photoshop & Illustrator

To change the tracking of type in Photoshop and Illustrator, open up the Character palette. In Photoshop choose Window > Character, in Illustrator choose Window > Type > Character (or Ctrl + T / Cmd + T). In the tracking field you can either choose a preset value or you can simply type in your own numbers, or drag your cursor left and right on top of the tracking icon.   Minus numbers reduce the space between letters.

 

 

Photoshop (left) and Illustrator Character palettes.

Tracking in CSS
To adjust the tracking on your web type, you can use the letter-spacing rule. Below I’ve applied a style to some text in a H1 tag and varied the letter-spacing.

 

As you can see adjusting the tracking can completely change the look and feel of the headline.  There is no rule to cover tracking for every font. The best guideline is to use your eyes. Generally if the letters look like they’re too close together, they probably are. Lots of practice and experimentation is how you really learn to use tracking in your designs.

 

Next week we’ll look at Kerning and how and where to apply it.