What line-height should I use for body text?

A unitless value between 1.4 and 1.65 works well for most paragraph text — this tool's Normal (1.5) and Relaxed (1.65) presets cover that range. Headings can go tighter (1.1–1.3) since large text needs less vertical breathing room per line.

Why does the tool show a WCAG check?

WCAG Success Criterion 1.4.12 (Text Spacing) says users must be able to set line-height to at least 1.5 times the font size without content breaking or clipping. Designing body copy at or above 1.5 by default avoids relying on that override ever being needed.

Why is line-height usually written without a unit?

A unitless number (like 1.5) is a multiplier of that element's own font-size, so it stays proportional if the font-size changes — including in a nested element that inherits a different size. A fixed px or em value computed on the parent would carry over unchanged into children, which often produces cramped or too-loose text.

Does line-height affect single lines of text, like buttons?

Yes — line-height sets the height of the line box even for a single line, which is why buttons and form inputs often use a smaller line-height (around 1–1.2) to avoid unwanted extra vertical space above and below the visible text.

Does this tool store my settings?

No — everything is calculated live in your browser from the font size and ratio you choose. Nothing is uploaded or saved; reloading resets it to the defaults.

LINE HEIGHT CALCULATOR

Preview line-height on real paragraph text and check it against WCAG.

In short

Preview CSS line-height live against a real paragraph, pick from Tight/Normal/Relaxed/Loose presets, and check it against the WCAG 1.4.12 minimum, then copy the CSS. Runs entirely in your browser.

Good line-height gives the eye room to travel from the end of one line to the start of the next without losing its place. Too tight and lines blur together; too loose and paragraphs feel disconnected.

Font size: 18px

Line height: 1.5 (27px)

✓ Meets WCAG 1.4.12 (≥1.5 for body text)

.body-text {
  font-size: 18px;
  line-height: 1.5; /* 27px */
}

How to set line-height

1
Set your font size.
2
Pick a preset — Tight, Normal, Relaxed, or Loose — or drag the line-height slider.
3
Watch the paragraph preview update with real body-text-length copy.
4
Check the WCAG note to see if your value meets the 1.5 minimum for body text.
5
Copy the generated CSS.

Questions

What line-height should I use for body text?: A unitless value between 1.4 and 1.65 works well for most paragraph text — this tool's Normal (1.5) and Relaxed (1.65) presets cover that range. Headings can go tighter (1.1–1.3) since large text needs less vertical breathing room per line.
Why does the tool show a WCAG check?: WCAG Success Criterion 1.4.12 (Text Spacing) says users must be able to set line-height to at least 1.5 times the font size without content breaking or clipping. Designing body copy at or above 1.5 by default avoids relying on that override ever being needed.
Why is line-height usually written without a unit?: A unitless number (like 1.5) is a multiplier of that element's own font-size, so it stays proportional if the font-size changes — including in a nested element that inherits a different size. A fixed px or em value computed on the parent would carry over unchanged into children, which often produces cramped or too-loose text.
Does line-height affect single lines of text, like buttons?: Yes — line-height sets the height of the line box even for a single line, which is why buttons and form inputs often use a smaller line-height (around 1–1.2) to avoid unwanted extra vertical space above and below the visible text.
Does this tool store my settings?: No — everything is calculated live in your browser from the font size and ratio you choose. Nothing is uploaded or saved; reloading resets it to the defaults.

Related tools

All Color & CSS Tools →

Updated September 10, 2026