Line Height Calculator — Free Tool With Accessibility Compliance
- Convert line-height between px, em, rem, percentage, and unitless values
- Flags values below WCAG 1.4.12 minimum (1.5x font size)
- Free, browser-based, no login
Table of Contents
Line-height is trickier than it looks — five different units, two defaults, and a WCAG minimum most sites miss. A 16px body font needs line-height at least 24px (1.5x) to pass WCAG 1.4.12. In em units that is 1.5em; in unitless, just 1.5. Here is the complete calculator, every unit explained, and the accessibility threshold you should never fall below.
Every line-height unit, explained
| Unit | Example | What it means |
|---|---|---|
| Unitless (recommended) | 1.5 | Multiplier of element font-size. Inherits as multiplier, not calculated value. |
| em | 1.5em | Multiplier of parent font-size. Inherits as calculated pixel value. |
| Pixel | 24px | Fixed pixel value. Does not scale with font-size changes. |
| Percentage | 150% | Same as em — calculated once, then inherited as pixels. |
| rem | 1.5rem | Multiplier of root font-size (usually 16px). |
| normal (keyword) | normal | Browser default. Usually 1.15-1.2x. Fails WCAG 1.4.12. |
Unitless wins for most cases because child elements inherit the multiplier, not the absolute value. A parent at 16px/1.5 passing to a child at 24px results in 36px line-height automatically — which is what you want.
The WCAG 1.4.12 minimum (and what browsers give you)
WCAG 1.4.12 requires line-height at least 1.5x the font size. Browser defaults are usually 1.15-1.2x — below the minimum.
Translation by font size:
- 14px body: needs line-height at least 21px (1.5)
- 16px body (most common): needs at least 24px (1.5)
- 18px body: needs at least 27px (1.5)
- 24px heading: needs at least 36px (1.5)
Setting line-height: 1.5 on your root element covers the whole site with one rule. Unitless is the recommended approach per MDN and W3C.
How to convert between line-height units
Pixel to unitless: divide pixel value by font-size. 24px line-height on 16px font = 1.5 unitless.
Unitless to pixel: multiply by font-size. 1.5 on 16px font = 24px.
Percentage to unitless: divide by 100. 150% = 1.5 unitless.
em to unitless: drop the unit. 1.5em = 1.5 unitless. The inheritance behavior differs but the value is the same.
The spacing checker handles all conversions and flags any value below the 1.5 WCAG minimum.
Readability thresholds beyond WCAG minimum
- 1.5 — WCAG 1.4.12 minimum. Passes accessibility but still feels cramped for long reads.
- 1.6-1.7 — the "comfortable" zone for body text. Most modern sites use this.
- 1.8-2.0 — luxurious. Used on long-form reading sites (Medium, Substack).
- 1.2-1.3 — tight, used for headlines and UI labels. Never for body text.
Pairing: body text at 1.6-1.7, headings at 1.2-1.3. Mix for visual hierarchy.
Common line-height bugs and fixes
Line-height not working on button or input. Some form elements ignore line-height. Use padding instead: padding: 8px 12px gives consistent vertical spacing.
Line-height: normal gives different results on different fonts. Correct — each font file can define its own default line-height. Explicit values (1.5) eliminate the variation.
Line-height not inheriting correctly. If you used pixel or em units, the calculated value inherits — not the multiplier. Switch to unitless for predictable inheritance.
Line-height too large in Outlook email. Outlook has known rendering bugs with line-height values over ~1.5. Use mso-line-height-rule: exactly conditional CSS for email.
Calculate Line-Height With WCAG Check
Enter any line-height value. Get pass/fail against WCAG 1.4.12 and conversion to every unit.
Open Free Spacing CheckerFrequently Asked Questions
What line-height does Google recommend?
Google's PageSpeed Insights and Material Design both recommend 1.5 or higher for body text. Material Design spec is 1.5 for dense UI and 1.75 for reading surfaces.
Should I use pixel or unitless line-height?
Unitless for almost every case. It inherits as a multiplier, so child elements scale correctly. Pixel line-height inherits the calculated value and can cause cramped text when font-size changes.
Is 1.15 line-height (Word default) enough for accessibility?
No. 1.15 fails WCAG 1.4.12, which requires 1.5x minimum. Microsoft Word defaults are for printed documents, not accessible web content. Set explicit 1.5 or higher on web.
Does line-height affect SEO?
Indirectly, through Core Web Vitals. Cramped text hurts readability which affects dwell time. Google also uses page experience signals that include readability proxies. Line-height 1.5+ is a safe baseline.
