0PricingLogin
Tailwind CSS Academy · Lesson

Line Height and Letter Spacing

Control readability with leading-* utilities for line height and tracking-* utilities for letter spacing.

Why Line Height Matters

Line height is the space between lines. Too tight feels cramped, too loose feels scattered. Getting it right makes long text noticeably easier to read.

Tailwind's leading-* Utilities

Set it with the leading-* utilities: leading-tight (1.25), leading-normal (1.5), leading-relaxed (1.625), leading-loose (2.0). The name comes from old print type.

<p class="leading-tight">Tight: good for headings</p>
<p class="leading-normal">Normal: default for most text</p>
<p class="leading-relaxed">Relaxed: comfortable for body text</p>
<p class="leading-loose">Loose: for spacious editorial layouts</p>

All lessons in this course

  1. Font Size and Font Weight
  2. Text Color and Opacity
  3. Line Height and Letter Spacing
  4. Text Alignment and Decoration
← Back to Tailwind CSS Academy