CSS Line Height Calculator

How to use

1. 1Choose a mode. Convert line height turns a value you already have into every other form; Recommend a value suggests a comfortable line height by use case.
2. 2In Convert mode, pick how your line-height is written (unitless, pixels, em or rem, or percent), type the value, and set the font size it applies to. Use the preset chips for common sizes.
3. 3Read the equivalent values: the unitless ratio (recommended), pixels, em, and percent, plus the line box height, total leading, and half-leading.
4. 4In Recommend mode, pick a use case (body text, long-form reading, headings, UI labels, or code) and a font size to get a recommended ratio, a comfortable range, and the golden-ratio option.
5. 5Check the live preview to see the spacing on real text, then use the Copy buttons to grab a single value or the full CSS snippet. Everything runs in your browser.

About this tool

CSS Line Height Calculator converts a line-height between every form CSS lets you write it in, all anchored to a font size, and helps you choose a comfortable value when you are starting from scratch. Line height is the vertical space allotted to each line of text, and in CSS it can be expressed four ways that are not interchangeable: a unitless multiplier (line-height: 1.5), a length in pixels (24px), an em or rem value (1.5em), or a percentage (150%). For a single element at a single font size these can describe the exact same line box, and the Convert mode shows that equivalence directly: enter a value in any one form together with the font size it applies to, and the tool reports the matching unitless ratio, pixel height, em value, and percentage at once, along with the resulting line box height, the total leading (the extra space beyond the glyph size), and the half-leading that sits above and below the text inside each line. The difference between the four forms appears the moment text is nested, and the tool is explicit about it. A unitless line-height inherits as the ratio itself, so a child element with a larger font size computes its own taller line box and stays proportional. A length, an em value, or a percentage is computed once on the element where you set it and then inherits as that fixed computed length, which is the classic reason a heading inside a container with line-height: 24px ends up with cramped, overlapping lines. Because of this, the unitless form is the safe default for inherited text, and the calculator flags it as recommended in every result. Recommend mode goes the other direction. Instead of converting a value you already have, you pick what the text is for, body copy, long-form reading, headings, UI labels, or code, and a font size, and the tool suggests a comfortable unitless ratio with a sensible range, the pixel line height it produces, and the golden-ratio line height (1.618) for reference. The suggested band for body text starts at 1.5, which is also the minimum WCAG 1.4.12 recommends for blocks of text, while headings and other large type tighten toward 1.1 to 1.3 because wide lines of big type drift apart at looser spacing. A live preview renders sample text at your chosen font size and line height so you can judge the spacing with your own eyes rather than from a number, and a ready-to-paste CSS snippet pairs the font size with the line-height in whichever form you chose. Every value can be copied as a single CSS declaration. All of the arithmetic is deterministic and runs entirely in your browser, so nothing you type is uploaded, logged, or stored.

Free to use. Works in your browser. No signup, no login.