📐 Line Height Calculator
Enter a font size and line-height and see the computed spacing in pixels, whether it sits in the comfortable reading range, and a live preview of real text.
Computed line height
24px
16px × 1.5
Recommended range
1.4–1.6
Body text — the comfortable reading range · in range ✓
Preview
The quick brown fox jumps over the lazy dog. Good line height keeps lines of text easy to follow without crowding or drifting apart.
A unitless line-height (like 1.5) scales with the font size and is what you almost always want — it means "1.5× the current font size", so nested elements inherit sensibly. Body text reads best around 1.4–1.6; large headings can go tighter. In CSS: line-height: 1.5; 🔒
How the line height calculator works
Line height is the vertical space each line of text occupies. Set with a unitless number (like 1.5), it means "1.5 times the font size", so it scales automatically with the type. The calculator multiplies your font size by the line-height to show the result in pixels, compares it against the recommended range for that size, and previews a paragraph so you can judge it by eye.
Body text reads best with fairly generous line height — roughly 1.4 to 1.6 — because the eye needs to find the start of each new line without lines crowding together. Large headings can be tighter (around 1.1–1.25), since their few words don't need the same guidance and loose spacing looks disconnected. Always prefer a unitless value over a fixed pixel line-height so nested elements inherit sensibly.
Frequently asked questions
What is a good line height for body text?
Around 1.4 to 1.6 (unitless) for paragraph text — generous enough that the eye finds each new line easily without lines feeling far apart. This tool flags whether your value is in range for the size you enter.
Should line height have units?
Prefer a unitless number like 1.5. It means "1.5 × the element's font size", so it scales with the type and nested elements inherit a sensible multiple. A fixed pixel line-height doesn't adapt when the font size changes.
What line height for headings?
Tighter than body — often 1.1 to 1.25. Large text with only a few words doesn't need wide spacing to guide the eye, and generous line height on a heading can look disconnected.
How is line height calculated in pixels?
Multiply the font size by the unitless line-height: 16px text at 1.5 gives a 24px line box. The calculator does this and shows the result alongside the recommended range.