Line Height from Font Size Calculator
Turn a unitless line-height ratio into pixels and leading for any font size — with a readable range for body text.
How it works
line-height (px) = font-size × ratio · leading = line-height − font-size
A unitless line-height (like 1.5) multiplies the font size to set the height of each line box; the difference between that and the glyph size is the leading, split half above and half below the text. Setting it unitless is best practice because it inherits as a multiplier — child elements with a different font size get a proportionate line-height instead of a frozen pixel value. Body text generally reads best around 1.4–1.6; tight 1.1–1.2 suits large display headings, where generous spacing would look disconnected.
Worked example
16px body text at a 1.5 line-height: line box = 16 × 1.5 = 24px, so leading = 24 − 16 = 8px, placed as 4px above and 4px below each line. The comfortable range for 16px runs from 22.4px (1.4×) to 25.6px (1.6×).
Frequently asked questions
Should line-height be unitless or in px?
Unitless (e.g. 1.5) is almost always right: it scales with each element’s own font size when inherited. A fixed px line-height on a parent can crush larger child text onto overlapping lines.
What line-height is best for body text?
Around 1.4–1.6 for paragraphs. Longer line lengths and smaller type benefit from the upper end; very short measures can go a little tighter. Headings usually want less, roughly 1.1–1.3.
What is leading?
Leading is the vertical space added around a line of type — line-height minus the font size. The name comes from the strips of lead typesetters once placed between lines of metal type.
Related calculators
This calculator is for educational purposes. Double-check important results before acting on them.