Line Height
行高
Aliases:行高行距leading行间距排得挤不挤松紧line height
What is it
The vertical space one line of text occupies — it sets how tight or airy a paragraph feels. Display type tightens (1.1–1.3) to look built; body loosens (1.5–1.8) to support line-by-line reading; quotes can go looser still. Prefer unitless multiples so leading scales with font size instead of freezing in pixels.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Multi-line body copy needs a trackable reading rhythm
- Headings and body share a page and leading must separate them
- Font sizes respond to viewport and leading must scale with them
✕ When not to use
- Single-line labels — use flex for vertical centring, not leading
- Body leading beyond 2.0 — lines lose their connection
- Pixel-locked leading that clips or overlaps when size changes
Variants
Tight display
收紧显示
1.1–1.3 — large headings stay solid
Comfortable body
舒适正文
1.5–1.8 — long copy stays trackable
Loose editorial
松弛编辑
1.9–2.2 — quotes and verse breathe
Implementation
line-height: 1.6line-height: normalleading-relaxedSet unitless multiples (line-height: 1.6) so children recompute against their own size; pixels freeze leading on the parent size. Starting points: display 1.15–1.3, body 1.6–1.75, captions 1.4. CJK body reads a touch looser than Latin — around 1.7. Verify separately if you use half-leading tricks for first-baseline alignment.
Platform API
line-heightleadingIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| CSS | line-height |
| Tailwind CSS | leading-none / leading-normal / leading-relaxed |
Compare
Full comparison →| Line Height行高 | Measure行宽 | Type Scale字号阶梯 | |
|---|---|---|---|
| Best for text | Body paragraphs mainly; display tightens separately | Long-form body and explanatory copy | Every heading and body level |
| Adjust granularity | Continuous — 0.05 is already perceptible | Drag container width, measured in ch | Steps by ratio — one level at a time |
| Responsive | Medium — two steps across breakpoints | High — max-width inside a fluid container | High — continuous with clamp() |
Related concepts
A ratio-based set of font sizes that assigns heading and body levels a stable rhythm. Multiply a base body size by a fixed ratio (1.25 major third, 1.333 perfect fourth) to step upward, producing predictable contrast between headings instead of hand-picked pixels. Ship it as sm/md/lg tokens or fluid clamp() steps.
FoundationUsed withHow many characters fit on one line — it decides whether the eye can return to the next line without effort. The comfort zone is roughly 45–75 Latin characters (28–40 CJK glyphs), with 65ch the usual target. Too narrow and the eye turns constantly; too wide and it loses the line. Control it with max-width in ch rather than guessing in pixels.
FoundationUsed withAn ordered fallback chain of typefaces: when the first face is missing the browser walks down to the next, with a generic family as the final safety net. System stacks cost nothing and render instantly; web fonts carry brand character but need font-display to tame flashing; local-first splits the difference. The order of the stack is the order of rendering decisions.
FoundationUsed with