Line-Height Calculator

Calculate the optimal CSS line-height for a given font size and reading context. The tool returns the recommended unitless ratio, the resulting pixel line height (leading), and a live text preview — so you can see the effect before copying the value. Supports body text, headings, and captions with context-appropriate recommendations.

How to use the Line-Height Calculator

1. Enter the font size in pixels. 2. Optionally enter the line length in characters (the number of characters per line at your layout width). A longer measure needs more line-height to help the eye find the next line; a narrow column (40–50 chars) can use a tighter ratio. 3. Choose the purpose: body text, headings, captions, or code. 4. The tool returns a recommended unitless line-height ratio, the absolute pixel leading (line-height × font-size), and a live preview paragraph. Click Copy line-height to copy the unitless value for your CSS.

Why line-height matters and why unitless is the right unit

Line-height (leading in print terminology) is the vertical distance from one text baseline to the next. Too tight and lines run together; too loose and the text feels disconnected. The typographic rule of thumb is 1.4–1.6 for body text at typical sizes (14–18 px) and tighter (1.0–1.25) for large headings where the eye does not need as much vertical guidance because each line is prominent enough on its own.

CSS has three syntaxes: line-height: 1.5 (unitless — the multiplier is inherited and re-multiplied by the child element's font-size), line-height: 24px (absolute — inherited as a fixed number), and line-height: 150% (percentage — computed once and inherited as a fixed value, same as px). Unitless is almost always the correct choice: if a child element has a larger font-size, its computed line-height scales up automatically. The px and % forms can cause headings nested inside body text to have the wrong leading if the parent's computed value is inherited.

Line length (measure) also influences the optimal ratio. The Bringhurst rule suggests 45–75 characters per line for body text. At the high end of that range (or beyond), slightly more line-height helps the eye track across and back. For narrow columns (e.g., a sidebar), a ratio below 1.4 often reads well. This tool incorporates the measure adjustment when you provide it.

Common use cases

  • Body text tokens — establish a line-height token for your design system that scales correctly with any font-size token, using the unitless form.
  • Heading scale — verify that your display heading (48–72 px) uses a tight enough line-height (1.0–1.15) so it does not look airy or disconnected.
  • Code blocks — monospace code needs more line-height than proportional text (1.6–1.75) because all characters are the same width and the eye needs more vertical separation.
  • Responsive typography — compare the recommended ratio for your smallest (mobile) font-size and largest (desktop) font-size to see whether you need different values or a single unitless value that scales acceptably across the range.
  • Accessibility audit — WCAG 1.4.12 (Text Spacing) requires that line-height can be set to at least 1.5 × font-size without loss of content or functionality.

Frequently asked questions

Why is unitless line-height preferred over px or %?
When a child element has a different font-size than its parent, a unitless value re-multiplies with the child's font-size to produce the correct leading. A px or % value is resolved once and inherited as a fixed number, which causes headings or small print nested inside body text to have incorrect leading.

What line-height does WCAG require?
WCAG 2.1 Success Criterion 1.4.12 (Text Spacing, Level AA) requires that line-height can be set to at least 1.5 times the font-size without loss of content or functionality. The recommendation is a minimum, not a target — body text at 1.5 may still be tight for longer lines.

What is the ideal line-height for headings?
Large display headings (36 px+) typically need a ratio of 1.0–1.2. The bigger the type, the less line-height is needed because each line is visually distinct. At 72 px, a ratio of 1.0 (line-height equals font-size) is common in hero sections.

How does line length affect line-height?
Longer lines require more line-height to help the eye return to the correct next line. For a measure of 45–55 chars, 1.4 is often sufficient. For 70–80 chars, 1.6–1.7 reads better. Very short lines (under 40 chars) can use 1.3 without feeling cramped.

Should I use line-height or gap for spacing between paragraphs?
Line-height sets the leading within a paragraph. Spacing between paragraphs is a separate concern — use margin-bottom on p elements (typically 0.75rem–1rem) or a gap in a Flexbox column. Do not inflate line-height just to add inter-paragraph space.