About the Line Height Calculator
This line height calculator turns a font size and a column width into a readable line height (leading), shown in pixels, rem and as the unitless number you paste into CSS. It also estimates how many characters fit on each line and the column width that would give the comfortable 45–75 character measure typographers recommend.
It is meant for web and UI designers setting body text, developers translating a design into CSS, and anyone tuning a blog or documentation theme. Choose a fixed ratio (1.5 is the WCAG text-spacing benchmark for body copy) or the golden-ratio method, which raises line height for wide columns and lowers it for narrow ones.
Characters per line are estimated from an average character width of about half the font size, which is typical for Latin text in common sans-serif and serif faces. Condensed fonts fit more characters and wide fonts fewer, so adjust the average-width setting if your typeface is unusual.
With the default inputs, the line height is 24 px. Change any value above to recalculate instantly.
How to use the line height calculator
- 1Enter the body font size in pixels.
- 2Enter the width of your text column or content container.
- 3Choose a fixed ratio (1.5 is a safe default) or the golden-ratio method.
- 4Set a baseline grid (4px or 8px) if your design system uses one.
- 5Copy the unitless line-height into your CSS and check the characters-per-line estimate.
Formula and method
With the fixed-ratio method the line height is simply the font size multiplied by the ratio, so 16px text at 1.5 gives 24px leading. The unitless value is what CSS line-height should usually be set to, because it scales with the element’s font size and is inherited cleanly by children.
The golden-ratio method follows the Golden Ratio Typography heuristic: the ideal width for a font size is (f × φ)², and the line height starts at f × φ (about 1.618) for that width, shrinking for narrower columns and growing for wider ones. Results are kept between 1.2 and 2.0 times the font size. Snapping rounds the result to the nearest multiple of your baseline grid so vertical rhythm stays consistent.
- f
- Font size in px
- w
- Text column width in px
- φ
- Golden ratio, ≈ 1.618
- LH
- Line height in px
Worked examples
16px body text at 1.5 in a 680px column
16 × 1.5 = 24px, which is 1.5rem at a 16px root and already sits on a 4px grid. Each character averages about 8px, so a 680px column holds roughly 85 characters — a little long; 360–600px would give 45–75 characters.
18px text, golden-ratio method, 700px wide
The golden-ratio ideal width for 18px is (18 × 1.618)² ≈ 848px. At 700px the column is narrower, so the ratio drops from 1.618 to about 1.564, giving 28.15px of leading, which snaps to 28px on a 4px grid. 700 ÷ 9px ≈ 78 characters per line.
15px text at 1.45 in a 520px card
15 × 1.45 = 21.75px. The nearest multiple of 4 is 20px (5 grid units). With characters about 7.5px wide, 520px holds about 69 characters, comfortably inside the 337.5–562.5px window for 45–75 characters.
Frequently asked questions
What is a good line height for body text?+
Most body text reads well with a line height of 1.4 to 1.6 times the font size. WCAG’s text-spacing guidance uses 1.5 as the benchmark, so 16px text with 24px line height is a dependable starting point.
Should CSS line-height be unitless?+
Usually yes. A unitless value such as 1.5 is multiplied by each element’s own font size, so headings and small text inherit sensible spacing. A fixed px value is inherited as-is and can cause overlapping lines on larger text.
What is the ideal line length?+
Typographers commonly recommend 45–75 characters per line for single-column text, with about 66 characters often cited as ideal. WCAG’s AAA visual-presentation criterion asks for no more than 80 characters per line.
Should headings have a smaller line height?+
Yes. Large headings look loose at 1.5, so 1.1–1.3 is typical. Because the font is bigger, the absolute gap between lines is still large enough to read comfortably.
What does snapping to a baseline grid do?+
It rounds the line height to a multiple of a base unit such as 4px or 8px, so text blocks, spacing and components line up on a consistent vertical rhythm across the page.
How does the golden ratio line height method work?+
It treats (font size × 1.618)² as the ideal column width and sets line height to 1.618 × font size at that width, adding leading for wider columns and removing it for narrower ones.