Calculate CSS line-height using px, rem, or unitless values for clean and readable typography.
Enter font size and desired line-height.
CSS unitless line-height formula:
line-height = line-height(px) ÷ font-size(px)
Example: 24px ÷ 16px = 1.5
Unitless values scale better across nested elements.
Line-height controls the vertical spacing between lines of text in CSS. Proper line-height improves readability, accessibility, and visual rhythm.
Unitless line-height values inherit cleanly and scale automatically when font size changes, making them ideal for responsive typography.
| Font Size (px) | Line Height (px) | Unitless Value |
|---|---|---|
| 14 | 21 | 1.5 |
| 16 | 24 | 1.5 |
| 18 | 27 | 1.5 |
| 20 | 30 | 1.5 |
| 24 | 36 | 1.5 |
16px font → 24px line-height = 1.5
18px font → 27px line-height = 1.5
20px font → 32px line-height = 1.6
1.4–1.6 is ideal for paragraphs and long-form content.
Unitless values are recommended for responsive and accessible designs.
Yes. Proper line spacing improves readability, especially for dyslexic and low-vision users.
line-height: 1.5;line-height: 1.2;line-height: 1.4;line-height: 1.6;