Micro Tools
Advertisement

Line Height Calculator

Find the ideal line-height for any font size. Compare proven ratios, see pixel values, preview the result and copy the CSS.

Font size

Results update live.

Recommended line-heights

RatioUse casePixelsCSS

Preview

Advertisement

Why line-height matters

Line-height (leading) is the vertical space between lines of text. Too tight and lines collide into an unreadable wall; too loose and the eye loses its place jumping between lines. For body text, ratios between 1.4 and 1.75 hit the comfort zone, with 1.5 the classic default.

Unitless vs pixel values

CSS best practice is a unitless ratio like line-height: 1.5, which scales with the font size automatically, even for nested elements. Pixel values lock the height and break when text is resized. The table shows both so you can see the math, but copy the unitless version.

Related tools

JSON formatterFormat and validate JSON, privately. Regex testerTest regex live with highlighting. Base64 encoderBase64 encode and decode, plus URL encoder and JWT decoder.

Line Height Calc FAQs

What is a good line-height for body text?
Between 1.5 and 1.75 times the font size. 1.5 is the safe default; longer articles often feel better near 1.7.
Should headings use the same line-height?
No. Headings look better tighter, around 1.1 to 1.3, because they are short and large. Body text needs the extra air.
What is the golden ratio doing here?
1.618 is a classical proportion some designers use for vertical rhythm. It is a fine choice, but comfort testing beats numerology.
Why unitless instead of px?
A unitless value multiplies whatever font size is in effect, so nested or resized text keeps proportional spacing. Pixel values do not adapt.
Does line-height affect accessibility?
Yes. WCAG recommends enough spacing that text remains readable, and users who enlarge text depend on proportional line-height to keep it legible.
Advertisement