typography
line-height
Sets the vertical distance between lines of text. Unitless values are preferred because they scale with the element's own font size.
line-height: normal | <number> | <length> | <percentage>Common values
| Value | Effect |
|---|---|
| normal | Browser default, usually about 1.2 |
| 1 | Tight; lines touch the em box |
| 1.5 | Comfortable reading rhythm for body copy |
| 1.2 | Common headline density |
| 24px | Fixed leading regardless of font size |
Examples
body { line-height: 1.5; }Readable body text rhythm
h1 { line-height: 1.1; }Tight headline spacing
.pill { height: 32px; line-height: 32px; }Vertically center a single line inside a fixed-height chip
Gotcha
Using a unit like em makes descendants inherit the computed pixel value, which can throw off nested text; keep it unitless.
Related properties
font-size
Sets the size of rendered text. Modern designs use rem for accessibility and clamp() for fluid typography that scales with the viewport.
font-family
Sets a prioritized list of typefaces to render text with. The browser walks the list until it finds one that is available, so always end with a generic fallback.
text-align
Sets the horizontal alignment of inline content inside a block. start and end respect the writing direction, which is preferred for internationalized sites.
font-weight
Sets the thickness of glyphs. Numeric weights from 100 to 900 map to Thin through Black; variable fonts accept any integer up to 1000.
text-decoration
Shorthand for text-decoration-line, style, color, and thickness. Used to add or remove underlines, overlines, and strike-throughs on text.