Letter Spacings

Neatly organized visual reference for all spacings

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;
}