Visual Reference
The following table visually represents all the letter-spacings that are available.
| Reference | Class | Tracking |
|---|---|---|
| Uniform | tracking-tightest |
-0.08em |
| Uniform | tracking-tighter |
-0.04em |
| Uniform | tracking-tight |
-0.02em |
| Uniform | tracking-normal |
0 |
| Uniform | tracking-loose |
0.02em |
| Uniform | tracking-looser |
0.04em |
| Uniform | tracking-loosest |
0.08em |
Basic Usage
Apply the tracking-<variant> utility to any text based element.
<h1 class="tracking-tight">H1 Heading</h1>CSS Variables
You can customize each tracking by overriding the following CSS custom properties.
:root {
--tracking-tightest: -0.08em;
--tracking-tighter: -0.04em;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-loose: 0.02em;
--tracking-looser: 0.04em;
--tracking-loosest: 0.08em;
}