Line Height & Letter Spacing

Tune leading and tracking to make type readable for body copy and tight for display headings.

4 min read Level 1/5 #tailwind#typography

What you'll learn

Use the leading-tight to leading-loose scale plus numeric values
Use tracking-tight through tracking-widest
Combine size and leading with the slash shorthand

Line height controls vertical rhythm; letter spacing controls density. Get these right and ordinary text starts to look designed.

Line Height (Leading)

Use the named scale for body text, or a numeric value for exact control:

<p class="leading-relaxed">Roomy leading for comfortable reading.</p>
<p class="leading-tight">Tight leading, good for large headings.</p>
<p class="leading-6">An exact 1.5rem line box.</p>

Letter Spacing (Tracking)

Big headings often benefit from slightly negative tracking; uppercase eyebrows benefit from positive tracking:

<h1 class="text-5xl font-bold tracking-tight">Tighter display heading</h1>
<span class="text-xs uppercase tracking-widest">section eyebrow</span>

The Size and Leading Shorthand

You will most often set size and leading together. The slash modifier does both in one class:

<p class="text-lg/8">Large text on an 8 (2rem) line box.</p>
<h2 class="text-3xl/tight font-bold">Heading sized and tightened at once.</h2>

This keeps the relationship between size and rhythm explicit and in one place rather than spread across two utilities.

Text Color →