Line height
Set line height from a configured token or an arbitrary CSS value; leading-none falls back to 1 when no none token is configured.
Control the distance between lines of text. A compact leading suits short labels and larger headings; a more open value can make body copy easier to follow.
Quick reference
| Example class | Expected declarations |
|---|---|
leading-copy | line-height: var(--zw-leading-copy); |
leading-[1.8] | line-height: 1.8; |
Example setup
The shared preview base explicitly selects spec 1, reset none, strict mode, spacingUnit 0.25rem, and no breakpoints. Each token example declares tokens.lineHeights. The named copy and compact values are ratios, while leading-[1.8] is an arbitrary ratio. No font-size token is implied by a leading utility.
Examples in use
Compare named line heights
The paragraphs use the same copy but different configured ratios, making the baseline spacing visible.
<div class="wind-demo-leading">
<div><span class="wind-demo-label">Compact</span><p class="leading-compact">Line height controls the distance between baselines. The same paragraph makes the spacing easier to compare. / 行の高さは行の基準線の間隔を調整します。</p></div>
<div><span class="wind-demo-label">Copy</span><p class="leading-copy">Line height controls the distance between baselines. The same paragraph makes the spacing easier to compare. / 行の高さは行の基準線の間隔を調整します。</p></div>
</div>@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
:root {
--zw-leading-compact: 1.25;
--zw-leading-copy: 1.65;
--zw-spacing-unit: .25rem;
}
}
.wind-demo-leading {
color: #223247;
border: 1px solid #b7c5d4;
padding: 1rem;
}
.wind-demo-leading > div + div {
margin-top: 1rem;
border-top: 1px solid #d8e0e8;
padding-top: .75rem;
}
.wind-demo-leading p {
margin: .35rem 0 0;
}
.wind-demo-label {
color: #5d6c7c;
font-size: .8rem;
}
.leading-compact {
line-height: var(--zw-leading-compact);
}
.leading-copy {
line-height: var(--zw-leading-copy);
}Configuration for this example
{
"wind": {
"spec": 1,
"reset": "none",
"strict": true,
"tokens": {
"spacingUnit": "0.25rem",
"lineHeights": {
"compact": "1.25",
"copy": "1.65"
}
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo-leading": true,
"wind-demo-label": true
},
"safelist": {
"docs-preview": [
"leading-compact",
"leading-copy"
]
}
}
}Authored demonstration CSS
.wind-demo-leading { color: #223247; border: 1px solid #b7c5d4; padding: 1rem; }
.wind-demo-leading > div + div { margin-top: 1rem; border-top: 1px solid #d8e0e8; padding-top: 0.75rem; }
.wind-demo-leading p { margin: 0.35rem 0 0; }
.wind-demo-label { color: #5d6c7c; font-size: 0.8rem; }Choose a custom ratio
leading-[1.8] increases line spacing for one block without adding a named token.
<p class="wind-demo-leading-custom leading-[1.8]">A custom ratio can open the lines when a short block needs more air. / 短い文章では行間を広げると読みやすくなることがあります。</p>@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
:root {
--zw-leading-compact: 1.25;
--zw-leading-copy: 1.65;
--zw-spacing-unit: .25rem;
}
}
.wind-demo-leading-custom {
color: #223247;
border-left: 3px solid #6d7f96;
padding: .5rem .75rem;
}
.leading-\[1\.8\] {
line-height: 1.8;
}Configuration for this example
{
"wind": {
"spec": 1,
"reset": "none",
"strict": true,
"tokens": {
"spacingUnit": "0.25rem",
"lineHeights": {
"compact": "1.25",
"copy": "1.65"
}
},
"breakpoints": {},
"defaultTransitionTimingFunction": "ease",
"authoredClasses": {
"wind-demo-leading-custom": true
},
"safelist": {
"docs-preview": [
"leading-[1.8]"
]
}
}
}Authored demonstration CSS
.wind-demo-leading-custom { color: #223247; border-left: 3px solid #6d7f96; padding: 0.5rem 0.75rem; }Custom and named values
Use a name such as leading-copy when a ratio belongs to a reusable text role. leading-none emits the configured lineHeights.none token when one exists and otherwise falls back to 1. Arbitrary bracket values accept validated line-height CSS such as a unitless ratio or length. Line height inherits, so apply it at the smallest block that should share the rhythm.
Related guides: Utility grammar · Variants
Catalog details
leading
| Field | Value |
|---|---|
| Catalog identifier | v1.leading |
| Class pattern | leading-<suffix> |
| Grammar | {"acceptedKinds":["token","arbitrary"],"arbitraryProperty":"line-height","allowsFractionSlash":false,"allowsColorOpacity":false} |
| Accepted values | 1 |
| Token categories | lineHeights |
| Negative-value policy | forbidden |
| Conflict group and rank | line-height (18) |
| Order rank | 0 |
| Selector shape | ownElement |
| Spec version | 1 |
| Emitter properties | line-height |
Accepted values
| Kind | Suffix | Emitted value |
|---|---|---|
fallbackKeyword | "none" | "1" |
Declaration templates
| Property | Value kind | Fixed value |
|---|---|---|
line-height | resolved | null |
Catalog examples
| Example class | Expected declarations |
|---|---|
leading-[1.5] | line-height: 1.5 |