Line Height Calculator

A unitless line-height is a plain number like 1.5 with no unit attached. CSS multiplies it by each element's own font-size, so the spacing stays proportional even when child elements use different font sizes.

Divide the line height in pixels by the font size in pixels. A 24px line on a 16px font is 24 divided by 16, giving a ratio of 1.5. The px to ratio tab does this for you as you type.

Multiply the font size by the ratio. On an 18px font a ratio of 1.6 works out to 28.8px, which is the computed line box height. Switch to the ratio to px tab to see this result.

A fixed px or em line-height is calculated once and then inherited as that exact length, which can crowd larger child text. A unitless value is re-multiplied for each element, so nested headings and body text always get spacing in proportion to their own size.

A ratio between roughly 1.4 and 1.6 reads comfortably for paragraphs. Headings can go tighter, around 1.1 to 1.3, because their lines are short and too much leading looks disconnected.

Yes. Line-height is the full height of each line box, not the gap between lines. A 16px font at a 1.5 ratio produces 24px line boxes, so the extra room split above and below the text is 8px in total.

Values are shown to up to six decimal places and trailing zeros are trimmed, so 1.5 stays 1.5 while an awkward division shows its full precision. The maths itself is exact; only the display is shortened.

Yes. Any positive font size works, including decimals like 15.5px, and the line height in pixels can be zero or larger. The font size must be greater than zero or the tool asks you to enter a positive value.

No. The conversion runs entirely in your browser, so the sizes you enter are never uploaded or stored. You can use it offline once the page has loaded.