Line height calculator
Convert line height between pixels, percent and a unitless CSS ratio, snap it to a baseline grid, and preview the result on real text.
Line height is the distance from one baseline to the next. Too tight and lines collide. Too loose and the paragraph falls apart into separate strips. Set it as a unitless number so it scales with the text.
font-size: 1.125rem; /* 18px */ line-height: 1.556; /* 28px */ /* Snapped to a 4px grid: 28px */ line-height: 1.556; /* Tailwind */ leading-[1.556]
How do you calculate line height?
Divide the line height in pixels by the font size in pixels. 28px over 18px is 1.556, and that unitless number is what belongs in your CSS. A unitless line-height is multiplied by each element’s own font size, so nested elements with different sizes keep sensible spacing. A pixel or em value is computed once and inherited as a fixed length, which is how large headings end up with overlapping lines.
Design tools show line height in pixels or percent, and browser DevTools show the computed pixel value. This calculator converts between all three and can round to a baseline grid, commonly 4px, so vertical rhythm stays consistent.
Typical starting points are roughly 1.4 to 1.7 for body text and 1.0 to 1.25 for large headings. Longer lines need more line height. Read more in line height and letter spacing.
Why should line-height be unitless?+
A unitless value is inherited as a ratio and recalculated for each element’s font size. Values with units are inherited as a fixed length, which breaks when a child has a different font size.
What line height does WCAG require?+
WCAG 1.4.12 does not set a design requirement. It requires that content still works when a reader overrides line height to at least 1.5 times the font size, so avoid fixed-height text containers.
Find the line height of any text on the web.
Font Inspector shows line height both in pixels and as a ratio for any text you click, together with the font, size and weight.