Line Height Calculator
Enter a font size and line-height ratio to see the unitless CSS value, pixel line box, and the extra leading between lines.
A QUICK WALKTHROUGH
How to use this tool
- Enter a font size and line-height ratio within the practical ranges.
- Calculate the unitless CSS line-height and pixel line box.
- Use the suggestion as a starting point, then check the actual typeface and text measure.
Two useful CSS values
The ratio is the unitless line-height value to use in CSS. The pixel result is the resulting line box for the entered font size, while extra leading is the space beyond the font size.
Suggestions are heuristics
Body copy often starts around 1.4–1.7, headings around 1.1–1.3, and display text may need tighter or looser treatment. Actual typeface metrics, language, width, and accessibility needs still determine the final choice.
Local and bounded
Inputs are limited to 1–500 px and a 0.8–3.0 ratio. Calculation happens in the browser; no text or settings are uploaded or stored.
GOOD TO KNOW
Common questions
What is unitless line-height?
It is a ratio multiplied by the element’s font size, such as 1.5. It scales naturally when the font size changes.
Is the pixel spacing exact for every font?
No. It describes the CSS line box. Font ascent, descent, language, and browser rendering affect how the type appears inside it.
What ratio should I choose?
Use the suggestion as a starting point: body text commonly needs more space than headings, but always review the real font and reading context.