Line Height Calculator

How to Choose Line Height

CSS line-height takes a number, a length, a percentage, or a unitless value. The unitless form is the only one that inherits cleanly. When you write line-height: 1.5 on a parent, every child multiplies its own font size by 1.5. When you write line-height: 1.5em or 24px, the value is computed once and inherited as a fixed length, which breaks the moment a child uses a smaller font size. The MDN reference on line-height recommends the unitless form for almost every case.

Body text reads best at 1.4 to 1.6. Robert Bringhurst, in The Elements of Typographic Style, sets the working range for book text at roughly 1.4 to 1.5 times the font size. Web measure runs longer than book measure, and longer lines need more leading, so the upper end of the body range moves to 1.6 on the web. The calculator returns 1.5 for a 16px body and 1.55 for a 14px body, with a recommended range of 1.4 to 1.7.

Headings sit tighter at 1.1 to 1.3 because they are short and large, and loose leading there scatters the words. Captions, footnotes, and small UI text use 1.3 to 1.5 because the small size needs more vertical room to stay legible. The calculator picks the type for you and gives a safe range so you can lean toward the tight or loose end based on your measure.

Recommendations are contextual. Long lines (wide measure) need more leading. Short lines need less. A 1.5 leading that reads well on a 75-character line will feel loose on a 30-character sidebar. Set the leading to the line length, not the other way around.

Related Tools

Pair the line height with a modular scale, scale it fluidly across viewports, or see it on real text in the playground.