Line Height Calculator
Calculate the correct line-height ratio from font size and pixel line height. Get CSS-ready values plus recommended ranges for any font size.
How to use
- Enter your font size in pixels.
- Enter the pixel distance between baselines.
- Copy the unitless ratio for the most reliable CSS.
Frequently asked questions
Should line-height use units or not?
Unitless line-height is recommended. It scales proportionally with font-size and behaves predictably across nested elements.
What is the ideal line-height?
1.5–1.7 for body text, 1.2–1.4 for large headings, and 1.1–1.25 for display type. Longer lines need more line-height.
Does line-height affect accessibility?
Yes. WCAG 2.2 requires at least 1.5 for text blocks at 16px. Tight line-height reduces readability significantly.