Boneyard Tools

Why unitless line-height wins in CSS

How CSS line-height inheritance works, why a unitless ratio beats px and em, and practical ratios for body text, headings and UI.

Open the Line Height Calculator →

How line-height inheritance works

Line-height is one of the few CSS properties whose inherited value depends on the unit you choose. Give an element a unitless number and children inherit that same multiplier, recomputing their spacing against their own font-size. Give it a length such as 24px or an em value and children inherit the already-computed pixel length instead. That single difference is why the same ratio can look perfect on one element and cramped on another when set with a fixed unit.

The trouble with px and em

Suppose a container sets line-height to 1.2em on a 16px font, computing to 19.2px, and it holds a heading at 32px. The heading inherits the frozen 19.2px, far too tight for text twice the size, so descenders and ascenders start to collide. A unitless 1.2 instead recomputes to 38.4px for that heading, keeping the proportion intact. This is the core reason the CSS specification and most style guides recommend unitless values on body and root elements.

Choosing a ratio that reads well

Comfortable body text usually lands between 1.4 and 1.6, giving the eye enough room to track from the end of one line to the start of the next. Longer measure, meaning wider columns, benefits from the higher end of that range, while short measure can tolerate less. Headings work better tighter, often 1.1 to 1.3, because large short lines need little leading. Dense interface text such as table cells or buttons frequently sits near 1.2 to stay compact.

Converting between px comps and CSS

Designers often hand over a mockup with line-height expressed in pixels, like 28px on an 18px font. Dividing gives a ratio of about 1.556, which you can round to a clean 1.55 or 1.5 depending on how strict the spec is. Working back the other way, a 1.5 ratio on a 16px font resolves to a 24px line box, letting you check a build against the design. Keeping the unitless number in your stylesheet means the spacing keeps scaling if the font size later changes.

Frequently asked questions

Should I set line-height on the body or on each element?

Setting a unitless line-height on the body or root gives every element a sensible default that scales with its font size. You can still override specific elements, such as tightening headings, without breaking the inheritance for everything else.

Does the CSS normal keyword equal a fixed ratio?

No. The default value normal lets the browser and font pick the spacing, often around 1.2 but varying by typeface. Setting an explicit unitless number gives you consistent, predictable line boxes across fonts and browsers.