Leading
Unitless line heights that scale with the font size.
On this page
Classes
| Class | Declarations |
|---|---|
leading-<name> | line-height: var(--leading-<name>); |
leading-<name> sets only line-height. It does not change font size, add a gap between paragraphs or constrain their height.
Values
All five preset values are unitless ratios, not rem lengths or pixel counts. The used line height depends on the element’s font size.
| Class | Value |
|---|---|
leading-xs | 1.2 |
leading-sm | 1.4 |
leading-md | 1.6 |
leading-lg | 1.8 |
leading-xl | 2 |
Compare all line heights
leading-xsleading-smleading-mdleading-lgleading-xlAn inherited ratio follows each font size
leading-md supplies the number 1.6. A child that inherits it uses its own font size: 16px gives 25.6px, while 24px gives 38.4px. The inherited value is still the ratio.
The same inherited ratio produces different line heights
The children inherit a unitless 1.6 and use different font sizes. Tinted bands show complete line boxes, not the blank gaps between glyphs. The columns keep the same width.
Text description
- A common parent uses leading-md, whose preset value is the number 1.6.
- The first child uses font-md at a 16px root font size, giving 16px text and a 25.6px line height.
- The second child uses font-2xl, giving 24px text and a 38.4px line height. It inherits the same ratio rather than a fixed 25.6px length.
- Each column contains the same three lines. Colored bands are inspection annotations of the complete line boxes; they are not padding or gaps generated by leading-md.
An explicit length or percentage has different inheritance behavior: it resolves to a length on the element where it is declared. Use a native declaration such as (line-height:1.5) or add a theme token for a custom ratio; there is no preset leading(1.5) function.
Line height controls the line’s vertical metrics, not the empty gap between visible glyphs. Other inline content can make a line box taller. It does not crop glyphs or guarantee a fixed paragraph height.
A text-* treatment sets its own line height, so it replaces an inherited ratio. Apply leading-* on that same element when intentionally overriding the treatment; under the same conditions, the single-property utility follows the recipe.
See Text treatment companions and native line-height inheritance.
Usage
Set a ratio on the parent and let its children scale it with their own font sizes.
The same ratio follows this text as its font size changes. Each line leaves room to find the next.
The same ratio follows this text as its font size changes. Each line leaves room to find the next.
<div class="… leading-md"> <p class="… font-sm">The same ratio follows this…</p> <p class="… font-lg">The same ratio follows this…</p></div>Generated CSS
@layer theme { :root, :host { --leading-md: 1.6; --font-size-sm: .875rem; --font-size-lg: 1.125rem }}@layer utilities { .font-lg { font-size: var(--font-size-lg) } .font-sm { font-size: var(--font-size-sm) } .leading-md { line-height: var(--leading-md) }}Customize
Change a preset value or add a token: --leading-prose creates leading-prose.
@theme { --leading-prose: 1.7;}Generated CSS
@layer theme { :root, :host { --leading-prose: 1.7 }}@layer utilities { .leading-prose { line-height: var(--leading-prose) }}See theme directives and Typography.