Spaced Out: Tracking In Typography

Tweet

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.

Script

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.

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. TrackingIcon  Minus numbers reduce the space between letters.

PhotoshopTracking  IllustratorTracking

 

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.

Letterspace1em

1em 

Letterspace-1em

Text-1em

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.historycommons.org/ Black Max

    Good article. Spacing is very important, and so often overlooked by even the most experienced designers.