TextFont size (px)

What kind of text

Paragraphs someone actually reads line to line. The WCAG floor applies here.

Line length (optional)Characters per linenot set

Leave at 0 to skip this. Lines between 45 and 75 characters (66 is the classic ideal) need no adjustment — that range is how far the eye can travel before losing its place on the way back to the next line. A longer line gets a little extra leading to compensate; a short one can take a little less.

1.5(24px at 16px)

From the base curve, no adjustment needed.

The quick brown fox jumps over the lazy dog near the riverbank at dusk. The quick brown fox jumps over the lazy dog near the riverbank at dusk.

Body text carries a floor at 1.5, the exact figure WCAG 2.1's Text Spacing criterion requires pages to tolerate — defaulting there avoids ever needing that override. Headings and display type are not held to that floor: it would look wrong on a headline, and the criterion is about paragraphs, not titles. The rest of the curve tracks how real type systems (Material Design 3's published scale, Butterick's Practical Typography) taper line-height down as text gets larger.

How it works

1Enter the font size and pick what kind of text it is — body copy is held to a stricter accessibility floor than a heading.

2Optionally set how many characters fit on a line; very short or very long lines get a small nudge either way.

3Read the answer as both a unitless ratio and a pixel value, with the reasoning underneath it.

4Copy the CSS line straight into your stylesheet.

Line Height Calculator

How it works

Related tools in Typography & Text