Letter Spacings

Visual reference of all default letter-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;