Line Height Calculator
Calculate optimal line height for any font size. Get values in unitless, px, em, and rem — with live preview and WCAG recommendations for accessible typography.
WCAG recommends at least 1.5 for body text.
Presets
WCAG 1.4.12 requires line height to be at least 1.5× the font size for body text. Your current ratio 1.5 ✓ passes WCAG 1.4.12.
Results
Unitless ratio
1.5
Pixels
24px
Em
1.5em
Rem
1.5rem
CSS property
line-height: 1.5;
Live Preview
The quick brown fox jumps over the lazy dog. Typography matters — good line height makes text easier to read and more accessible for all users.
font-size: 16px; line-height: 1.5;
Table of Contents
What is line height?
Line height (also called leading in print design) is the vertical distance between lines of text, measured from one baseline to the next. It has a major impact on readability: too tight and text feels cramped; too loose and the eye loses its place.
In CSS, the line-height property accepts a unitless number (e.g., 1.5), a pixel value (24px), an em or rem value (1.5em), or a percentage. The unitless value is generally preferred because it scales automatically with the font size of each element.
How to calculate line height
- Choose your font size in pixels (e.g., 16px for body text).
- Pick a ratio — 1.5 is a good starting point for body text, 1.1–1.2 for headings.
- Multiply font size × ratio to get the pixel value (e.g., 16 × 1.5 = 24px).
- Use the unitless ratio directly in CSS for best scalability.
- Copy the result in whichever unit fits your stylesheet.
Best practices
- Use a unitless ratio (e.g., 1.5) rather than a fixed px value so line height scales with font size.
- Body text: aim for 1.4–1.6. WCAG 1.4.12 requires at least 1.5 for accessibility.
- Headings and display text: use a tighter ratio of 1.1–1.3 so large type doesn't feel too airy.
- Small text (under 14px): slightly increase the ratio to maintain readability.
- Test your line height visually — real paragraphs reveal problems more clearly than single lines.
Frequently asked questions
Most typographers recommend 1.4–1.6 for body text. WCAG Success Criterion 1.4.12 requires a minimum of 1.5× the font size for text spacing accessibility.
A unitless ratio (e.g., 1.5) inherits from the element's font size and scales correctly if the font size changes. A fixed px value won't adjust, which can cause text to overlap if the font size is overridden by the user or a parent style.
Leading is a print term for the vertical space between lines, originally the lead strips placed between lines of metal type. In CSS, line-height controls the same measurement but is distributed above and below each line by default.
Yes. Large headings typically look better with a tighter ratio (1.1–1.2) because the letters are already big enough to distinguish. Body text needs more breathing room (1.4–1.6) to guide the eye across lines.