Line Height Calculator

Calculate the optimal CSS line-height for any font size. Live preview and copy-ready CSS values.

Pixels24px
EM1.5em
Unitless1.5
Live preview

The quick brown fox jumps over the lazy dog. Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

How to use

  1. Enter your font size in pixels.
  2. Adjust the ratio slider to find the right line-height.
  3. Copy the computed value in px, em, or unitless format.

Frequently asked questions

What is a good line-height for body text?

For body text at 16px, a line-height between 1.4 and 1.6 (unitless) works well. The golden ratio (1.618) is a popular choice.

Should I use px, em, or unitless line-height?

Use unitless values (like 1.5) whenever possible. Unitless line-height scales proportionally with font size, preventing text overlap in child elements.

Does line-height affect accessibility?

Yes. WCAG 2.1 recommends line-height of at least 1.5 times the font size for body text. Tight line-height makes text harder to read for people with dyslexia or low vision.

Should headings have a different line-height than body text?

Yes. Headings typically use a tighter line-height (1.1 to 1.3) because larger text needs less relative spacing. Body text reads better with 1.4 to 1.6.

Last updated

Powered by maratool