Typography
letter-spacing
Adjust tracking independently of font size and word spacing.
Overview
| Class | Declarations |
|---|---|
tracking-tightest | letter-spacing: var(--tracking-tightest);
|
tracking-tighter | letter-spacing: var(--tracking-tighter);
|
tracking-tight | letter-spacing: var(--tracking-tight);
|
tracking-normal | letter-spacing: var(--tracking-normal);
|
tracking-wide | letter-spacing: var(--tracking-wide);
|
tracking-wider | letter-spacing: var(--tracking-wider);
|
tracking-widest | letter-spacing: var(--tracking-widest);
|
tracking:<value> | letter-spacing: <value>;
|
Examples
Basic usage
Compare the same uppercase label across the tracking scale.
Basic usage
The label, computed value and comparison stay outside the text context. Tracking can also change wrapping.
tracking:* adds or removes spacing in the letter sequence. These specimens use the same type size, so the tracking scale can be compared directly.
<!-- tracking-tightest --><p id="target" class="m:0 font-lg leading-md tracking-tightest">CLEAR TYPE</p><!-- tracking-tighter --><p id="target" class="m:0 font-lg leading-md tracking-tighter">CLEAR TYPE</p><!-- tracking-tight --><p id="target" class="m:0 font-lg leading-md tracking-tight">CLEAR TYPE</p><!-- tracking-normal --><p id="target" class="m:0 font-lg leading-md tracking-normal">CLEAR TYPE</p><!-- tracking-wide --><p id="target" class="m:0 font-lg leading-md tracking-wide">CLEAR TYPE</p><!-- tracking-wider --><p id="target" class="m:0 font-lg leading-md tracking-wider">CLEAR TYPE</p><!-- tracking-widest --><p id="target" class="m:0 font-lg leading-md tracking-widest">CLEAR TYPE</p>Use a custom value
An em value scales with the element’s font size. This explicit 0.03em adds 0.6px at 20px type; the box readout measures the complete run.
Use a custom value
The label, computed value and comparison stay outside the text context. Tracking can also change wrapping.
<!-- A measured custom adjustment --><p id="target" class="inline-block m:0 font-xl leading-md tracking:.03em">CLEAR TYPE</p>Generated CSS
@layer utilities { .tracking\:\.03em { letter-spacing: .03em }}Apply conditionally
Hover or keyboard-focus the button to increase tracking. Leave enough room for the text to grow without clipping.
Apply conditionally
The label, computed value and comparison stay outside the text context. Tracking can also change wrapping.
<!-- Pointer and keyboard states --><button type="button" id="target" class="font-md tracking-normal tracking-wide:hover tracking-wide:focus-visible">Explore the canvas</button>