Letter Spacing

Letter spacing — often called "tracking" in type design — is one of the fastest ways to change how a piece of text feels without changing its size or weight. A large headline set at default spacing can look loose and disconnected; the same headline tightened slightly reads as more deliberate and confident. Short, all-caps labels tend to need the opposite: a little extra breathing room between letters so they don't feel cramped.

.tracking-tighter { letter-spacing: -0.05em; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }

Every value is defined in em, so spacing scales proportionally with the element's own font-size — a tracking-tight heading at 48px and a tracking-tight label at 14px are both tightened by the same relative amount, not the same fixed pixel value.

The Scale

.tracking-normal sets letter-spacing: 0em explicitly, which is functionally equivalent to the browser default (normal). It exists so you can reset spacing at a specific breakpoint after applying a different value below it — see Breakpoints for how the prefixing system works.

Tightening Large Headlines

<h1 class="text-5xl font-bold tracking-tight">
  Build interfaces faster
</h1>

At large sizes, default spacing can look noticeably loose. .tracking-tight or .tracking-tighter pulls the letters closer together, which is why most editorial and marketing headline type is tightened by default in professional type systems.

Widening All-Caps Labels

<span class="text-xs uppercase tracking-wider">
  New Feature
</span>

Uppercase text loses the visual rhythm that ascenders and descenders normally provide, which makes it read as cramped at small sizes. Widening the tracking compensates for that — this is the same technique behind most "eyebrow" labels, badges, and section kickers in modern UI.

Responsive Tracking

Like every other utility, tracking classes accept breakpoint prefixes:

<h1 class="tracking-tight md:tracking-normal">
  Responsive Headline
</h1>

Here the headline stays tightened on small screens, where line length is short and dense text reads better, then relaxes to normal spacing at md and up, where more horizontal space makes tighter tracking unnecessary.