Skip to content
Menu

Line Height Calculator

Font size and ratio in, line height in every CSS form out.

px

1.4–1.6 suits body text; 1.1–1.3 suits headings.

px

Line height

24px

Scale

Not to scale

All results
CSS (unitless)line-height: 1.5
In rem (16 px root)1.5rem
Snapped to 4 px grid24 px (1.5)
Space between lines8px
WCAG 1.4.12 (≥ 1.5)Meets the guideline

Line height = font size × ratio. A 16 px font at 1.5 gives 24 px lines. In CSS, write it without a unit (line-height: 1.5) so it scales with the text, and snap to a 4 px grid when you want tidy vertical rhythm.

How it works

line height (px) = font size × ratio

rounded = nearest multiple of the baseline grid

Worked example

With font size 16 px, line-height ratio 1.5, baseline grid 4 px:

  1. Multiply the font size by the ratio: 16 × 1.5 = 24 px.
  2. Round to the nearest 4 px: 24 px, a ratio of 1.5.
  3. The extra space shared above and below each line is 24 − 16 = 8 px.

When you need this tool

Turning a design’s line spacing into CSS, setting up a type scale, or checking that text meets accessibility guidelines. Designers often specify line height in pixels (24 px on 16 px text); developers need the ratio (1.5).

Picking a ratio

  • Body text: 1.5 is a safe default. Very long lines (over 75 characters) read better at 1.6.
  • Headings: 1.1 to 1.3. Large text with loose leading looks disconnected.
  • UI labels and buttons: 1.2 to 1.4, where space is tight.

Baseline grid rounding

Line heights like 22.4 px (14 × 1.6) cause uneven spacing in some browsers and break vertical rhythm. Rounding to the nearest multiple of 4 px (24 px here) keeps everything aligned. The calculator shows the rounded value and the ratio it implies.

Common mistakes

Using px for line-height on components. When a user enlarges text, fixed line heights don’t grow and lines overlap.

Forgetting leading is split. The extra space (line height minus font size) is divided evenly above and below the text, which matters when aligning text to icons.

Related: font size converter and pixels to rem.

Questions

What line height should body text use?

1.4 to 1.6 for most body text. Longer lines and smaller text need more; headings usually look best at 1.1 to 1.3.

Why use a unitless line-height?

A unitless value is inherited as a ratio, so children with different font sizes get proportional spacing. A px or em value is inherited as a fixed length and can squash larger text.

What does WCAG say about line height?

Success criterion 1.4.12 requires content to still work when users set line height to at least 1.5 times the font size. Designing at 1.5 for body text makes that easy.

What is a baseline grid?

A consistent vertical step (often 4 or 8 px) that all line heights and spacing snap to, so text across columns lines up.

Sources

Last reviewed 2026-09-24. How we check values · Report a problem with this page

Further reading

  • px, rem and em in CSS: when to use each

    Three length units, three different reference points. What each one is measured against, how they behave when a reader changes their font size, and a simple rule for choosing.