Letter spacing

Utilities for controlling the tracking (letter spacing) of an element


Class reference

ClassProperties
tracking-tighterletter-spacing: -0.08em
tracking-tightletter-spacing: -0.05em
tracking-compressedletter-spacing: -0.025em
tracking-normalletter-spacing: 0
tracking-looseletter-spacing: 0.025em
tracking-wideletter-spacing: 0.05em
tracking-widerletter-spacing: 0.08em
tracking-widestletter-spacing: 0.12em
tracking-extreamletter-spacing: 0.27em

# Usage

Control the letter spacing of an element using the .tracking-{size} utilities.

.tracking-tighter

The quick brown fox jumped over the lazy dog.

.tracking-tight

The quick brown fox jumped over the lazy dog.

.tracking-normal

The quick brown fox jumped over the lazy dog.

.tracking-wide

The quick brown fox jumped over the lazy dog.

.tracking-wider

The quick brown fox jumped over the lazy dog.

.tracking-widest

The quick brown fox jumped over the lazy dog.

<p class="tracking-tighter ...">The quick brown fox ...</p>
<p class="tracking-tight ...">The quick brown fox ...</p>
<p class="tracking-normal ...">The quick brown fox ...</p>
<p class="tracking-wide ...">The quick brown fox ...</p>
<p class="tracking-wider ...">The quick brown fox ...</p>
<p class="tracking-widest ...">The quick brown fox ...</p>

# Responsive

To control the letter spacing of an element at a specific breakpoint, add a {screen}: prefix to any existing letter spacing utility. For example, use md:tracking-wide to apply the tracking-wide utility at only medium screen sizes and above.

<p class="tracking-tight **md:tracking-wide** ...">The quick brown fox jumped over the lazy dog.</p>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.