line-height
Set line height and understand how unitless values differ from fixed lengths.
Overview
| Class | Declarations |
|---|---|
leading:1 | line-height: 1;
|
leading-xs | line-height: var(--leading-xs);
|
leading-sm | line-height: var(--leading-sm);
|
leading-md | line-height: var(--leading-md);
|
leading-lg | line-height: var(--leading-lg);
|
leading-xl | line-height: var(--leading-xl);
|
leading:<size> | line-height: <size>;
|
Examples
Basic usage
Line height contributes to the line box; it is not the visible height of the glyphs.
The leading tokens are unitless multipliers. Each paragraph uses 16px type and the same maximum line width, making its line spacing directly comparable.
<!-- leading-xs --><p id="target" class="max-w:24ch m:0 font-md leading-xs">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p><!-- leading-sm --><p id="target" class="max-w:24ch m:0 font-md leading-sm">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p><!-- leading-md --><p id="target" class="max-w:24ch m:0 font-md leading-md">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p><!-- leading-lg --><p id="target" class="max-w:24ch m:0 font-md leading-lg">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p><!-- leading-xl --><p id="target" class="max-w:24ch m:0 font-md leading-xl">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>text:* combines size with size-dependent leading and tracking. Its treatment uses formulas rather than a fixed golden ratio.
Set line height with font size
Choose the size and leading independently. At the default 16px root size, font-md leading-lg produces 16px type with a 28.8px line height.
<!-- 16px type · 1.8 line-height multiplier --><p id="target" class="max-w:24ch m:0 font-md leading-lg">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>Generated CSS
@layer theme { :root, :host { --font-size-md: 1rem; --leading-lg: 1.8 }}@layer utilities { .font-md { font-size: var(--font-size-md) } .leading-lg { line-height: var(--leading-lg) }}Tighten display text
Compact leading can bring the lines of a large heading together. leading:1 makes the line height equal to its font size; check accents and actual wrapping before using it.
<!-- Two explicit lines · 40px each --><h2 id="target" class="m:0 font-5xl font-medium leading:1">Make room<br>for ideas.</h2>Use explicit values
A unitless value is inherited as a multiplier, so it adapts to the child’s font size. A length is inherited as that length. Both parents below start at 16px; the child is 24px.
<!-- Unitless · 1.5 --><div id="context" class="font-md leading:1.5"> <p class="m:0">Parent at 16px</p> <p id="target" class="m:0 font-2xl">Child at 24px<br>Second line</p></div><!-- Fixed length · 24px --><div id="context" class="font-md leading:24px"> <p class="m:0">Parent at 16px</p> <p id="target" class="m:0 font-2xl">Child at 24px<br>Second line</p></div>The child’s line height is 36px in the first example and 24px in the second.
Apply conditionally
The paragraph uses compact leading below sm, regular leading at sm, and relaxed leading in print. Resize the viewport or open Print preview to inspect each real condition.
<!-- Responsive reading rhythm --><p id="target" class="max-w:24ch m:0 font-md leading-sm leading-lg@print leading-md@screen@sm">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>