Line Height and Letter Spacing

Tune readability with leading and tracking utilities.

Syntaxclass="leading-loose tracking-wide"

leading-* controls line-height (vertical space between lines) and tracking-* controls letter-spacing.

leading-tight, leading-normal, leading-loose.
tracking-tight, tracking-wide, tracking-widest.

Example

Loading editor…

Press Run to see the result.

When to use it

A developer improves the readability of a long article by applying leading-relaxed to the body paragraph text.
A hero section's headline gets tracking-tight applied to bring condensed letter spacing typical of large display type.
A small metadata label gains readability at size text-xs by adding leading-5 to increase the line height relative to the tiny font.

More examples

Line height for readability

leading-relaxed sets line-height: 1.625, giving multi-line paragraphs enough breathing room for comfortable reading.

<p class="text-base leading-relaxed text-gray-700 max-w-prose">
  Long-form body copy benefits from relaxed line height, which increases
  the vertical space between lines to reduce eye strain during reading.
</p>

Tight tracking on display text

tracking-tight reduces letter-spacing to -0.025em, which tightens display headlines for a modern editorial look.

<h1 class="text-6xl font-black tracking-tight leading-none">
  Big Bold Headline
</h1>

Wide tracking on label

tracking-widest (0.1em) combined with uppercase and a small font size creates the spaced-caps style common in editorial category labels.

<p class="text-xs font-semibold uppercase tracking-widest text-gray-500">
  Category Label
</p>

Discussion

Be the first to comment on this lesson.