In CSS, line-height sets the height of each line box — the vertical space a line of text occupies. It can be written as a unitless multiplier of the font size or as a fixed pixel value. This calculator converts between the two so designers and front-end developers can match a mock-up’s pixel spacing to a maintainable unitless rule, or vice versa.
How it works
A unitless line-height multiplies the element’s font size to produce the line box:
line box (px) = font size (px) × unitless line-height
The calculator runs this in either direction:
- Ratio → pixels: multiplies the font size by the unitless value.
- Pixels → ratio: divides the pixel line-height by the font size to recover the unitless value (
ratio = line px ÷ font size).
Unitless values are recommended in CSS because each child element inherits the ratio and recomputes the line box against its own font size. A fixed pixel line-height is inherited literally and can crowd larger nested text.
Example
For 16px body text with a line-height of 1.5:
line box = 16 × 1.5 = 24px
Going the other way, a 24px line-height on 16px text gives 24 ÷ 16 = 1.5.
| Font size | Unitless | Pixel line box |
|---|---|---|
| 16px | 1.5 | 24px |
| 18px | 1.5 | 27px |
| 24px | 1.3 | 31.2px |
| 14px | 1.6 | 22.4px |
Both forms update instantly, all in your browser — nothing is sent anywhere.