Line Height / Leading Calculator for Typography

One ratio, expressed three different ways

A 16px font size with a 1.5 leading ratio produces a line-height of 1.5 unitless, 24px in pixels (16 x 1.5), or 150% as a percentage -- three different CSS-valid ways to express the exact same visual line spacing.

All three values represent identical visual spacing at this specific 16px font size, but they behave very differently once nested elements with different font sizes enter the picture -- which is exactly the distinction the next section covers.

24px of line-height on 16px text means there's 8px of extra vertical space distributed around each line of text (24 - 16 = 8) -- roughly 4px above and below the text's own height, which is what creates comfortable breathing room between lines rather than cramped, touching text.

Why unitless is the value CSS developers actually recommend

Unitless is the usual CSS choice so nested text inherits proportionally. A unitless line-height value (1.5, with no px or % attached) is inherited by nested child elements as that same ratio, recalculated against each child's own font-size -- a nested element with a smaller font-size correctly gets proportionally less line-height, rather than inheriting a fixed pixel value that might create cramped or excessive spacing relative to its own smaller text.

By contrast, a pixel-based line-height (24px) is inherited as that literal fixed pixel value -- a nested element with a much smaller font-size would inherit that same 24px, which might create excessive, disproportionate spacing relative to its own smaller text size, since the fixed value doesn't rescale with the child's font-size the way the unitless ratio does.

This inheritance difference is a well-known, easily-missed CSS gotcha -- setting line-height in pixels on a parent element and then wondering why deeply nested small text has oddly large line spacing is a common debugging scenario that traces directly back to this inheritance behavior.

Related typography tools

For the font-size values this line-height ratio would actually apply to across a full type scale, the Typography Scale Calculator is the related tool.

For converting a specific font size into rem/em units alongside a fluid sizing suggestion, the Responsive Font Size Calculator covers that related conversion.

Frequently Asked Questions (FAQ)