Text Leading

Line height guidelines for better readability.

Tailwind Line Heights

Guidelines

Headings

Use tighter line heights for headings:

<h1 class="text-4xl leading-tight">Compact Heading</h1>
<h1 class="text-4xl leading-none">Display Heading</h1>

Body Text

Use relaxed line heights for long-form content:

<p class="text-base leading-relaxed">
  Long paragraphs are easier to read with more generous line spacing.
</p>

Rules of Thumb

1. Larger text = tighter leading - Headlines can use leading-tight
2. Smaller text = looser leading - Body text needs leading-relaxed
3. Long lines = more leading - Wide columns need extra spacing
4. Short lines = less leading - Narrow columns can be tighter

Responsive Leading

Adjust line height at different breakpoints:

<p class="leading-normal md:leading-relaxed">
  Responsive line height
</p>