What is the recommended line-height ratio for body text?

WCAG 1.4.8 recommends a minimum of 1.5 for body copy. Most designers use 1.4–1.6 for comfortable paragraph reading, with tighter values (1.1–1.3) reserved for headings.

Should I use unitless, px, or rem for line-height in CSS?

Unitless (e.g. line-height: 1.5) is the preferred CSS approach. It scales proportionally when font-size changes or is inherited, avoiding the inheritance bug that affects px and em values.

What root font size should I use for rem calculation?

Browser default is 16px, which is also the most common base. If your :root or html element sets a different font-size (e.g. 62.5% = 10px), enter that value in the Root Font Size field.

How is the pixel line-height calculated?

Pixel line-height = font size in px × ratio. For example, 16px × 1.5 = 24px. The rem value divides that by the root font size (24 ÷ 16 = 1.5rem).

Why does line-height affect accessibility?

Insufficient line spacing makes lines of text hard to track visually, especially for users with dyslexia or low vision. WCAG 1.4.12 (Text Spacing) requires that pages remain functional when line height is set to at least 1.5 times the font size.

Line Height Calculator

Name: Line Height Calculator
Availability: InStock
Author: Nham Vu

Enter a font size and ratio to get the exact CSS line-height value in px, rem, and unitless formats.

Typography Settings

Font Size (px)

Line Height Ratio 1.50

1.0 Headings: 1.1–1.3 Body: 1.4–1.6 3.0

Or Type Ratio Directly

Root Font Size (px) for rem calc

CSS Values

Unitless

1.5

Pixels

24px

rem

1.5rem

CSS Snippet

font-size: 16px;
line-height: 1.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. Good line height is essential for comfortable reading across devices and screen sizes.

Preview reflects current font size and line height.

Common Presets

Copied!

Summary

Enter a font size and ratio to get the exact CSS line-height value in px, rem, and unitless formats.

How it works

Enter the font size in pixels (e.g. 16).
Choose or type a line-height ratio (1.0–3.0). Common best-practice ranges: 1.4–1.6 for body copy, 1.1–1.3 for headings.
The calculator multiplies font size × ratio to produce the pixel value.
Pixel value is divided by the root font size (default 16px) to get the rem value.
The unitless value is displayed as the ratio itself — the recommended CSS approach.
Copy the value you need in any unit from the result panel.

Use cases

Determine the right line-height for body text to meet WCAG readability guidelines.
Convert a designer's pixel spec to rem or unitless for a CSS design system.
Compare how multiple font sizes look at the same ratio in the live preview.
Pick a heading line-height that tightens spacing without clashing descenders.
Validate that a line-height in your stylesheet matches the intended ratio.
Calculate values for responsive typography scales quickly without manual math.

Frequently Asked Questions

Last updated: 2026-06-09 · Reviewed by Nham Vu