logo

Air CSS ver. 2.3.2

Tracking

Tracking affects the visual density of a word, phrase or paragraph. Decreasing the tracking makes the words appear more compact, while increasing tracking increases the amount of white space between letters and words, creating a more airy effect.

Mnemonics

Bases
Modifiers
Optional extensions
tracked

-tight
-large
-oversize

-m = medium width container
-l = large width container


Shorthand

It is possible to use the class name .tracked instead of .tracked-large.

Examples

<p class="tracked-tight">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog. 

<p class="tracked-large">The quick brown fox ...</p>
<p class="tracked">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog. 

<p class="tracked-oversize">The quick brown fox ...</p>

The quick brown fox jumps over the lazy dog.

Source code

/* generate: container-rule */
.tracked-tight { letter-spacing: -.05em; }
.tracked-large { letter-spacing: .1em; }
.tracked-oversize { letter-spacing: .25em; }
.tracked { letter-spacing: .1em; }
/* end generate */