Line Height

Fixed pixel leading utilities that ship as .leading-* in the bundle.

Overview

Use leading-* classes for fixed line-height steps that stay easy to pair with any text size.

Class	Line height	Best for
.leading-tight	20px / 1.25	Compact headings and stacked titles
.leading-snug	22px / 1.375	Subheads and UI copy
.leading-normal	24px / 1.5	Everyday body copy
.leading-relaxed	26px / 1.625	Long-form paragraphs
.leading-loose	32px / 2	Spacious display copy

Example

<article class="maximum-width-lg margin-horizontal-auto">
  <h2 class="text-3xl font-bold leading-tight text-black margin-bottom-4">
    Built-in rhythm for bundled typography
  </h2>
  <p class="text-base leading-relaxed text-gray-dark">
    Use `.leading-tight` when you want multi-line headings to stay compact. Swap to `.leading-relaxed` when paragraphs need more room to breathe.
  </p>
</article>

Best Practices

• Use .leading-tight for headings and labels that should feel compact.
• Use .leading-snug when tight feels cramped but normal feels too open (subheads, short descriptions).
• Use .leading-normal for UI copy and shorter paragraphs.
• Use .leading-relaxed for body copy, summaries, and longer text blocks.
• Use .leading-loose sparingly for quotes and roomy display copy.