Enter any two of three values (font size, line height ratio, or line height) to calculate the third. Supports px, em, rem, and pt units.
Line Height Formula
The following formula is used to calculate the line height.
LH = FS * LHR
Variables:
- LH is the line height (pixels)
- FS is the font size (pixels)
- LHR is the line height ratio (unitless)
What is Line Height?
Line height defines the vertical distance between successive baselines of text. In print typography, this is called leading, named after the thin lead strips that typesetters physically inserted between rows of metal type to control spacing. In CSS, the line-height property sets this value and accepts unitless numbers, pixel lengths, em or rem values, and percentages.
Mathematically, line height equals font size multiplied by the line height ratio. At 16px font size and a 1.5 ratio, line height is 24px. The 8px difference between the font size and line height is split evenly above and below each line of text, creating 4px of half-leading on each side. This half-leading is what produces the visual breathing room between lines.
Recommended Line Height Ratios by Content Type
The optimal ratio depends on font size, line length, and content type. Larger type tolerates tighter spacing; narrow columns require more generous leading to guide the eye to the start of the next line.
| Content Type | Recommended Ratio | Notes |
|---|---|---|
| Web body text | 1.4 to 1.6 | Standard for sustained reading |
| Print body text | 1.2 to 1.45 | Denser setting acceptable in print |
| Headings (H1, H2) | 1.1 to 1.3 | Large glyphs require less air |
| Small text / captions | 1.5 to 1.7 | Smaller type needs more leading |
| Code blocks | 1.4 to 1.6 | Monospace fonts; line count critical |
| Narrow columns (<45 chars/line) | 1.6 to 1.8 | Short line breaks require extra leading |
WCAG Accessibility Requirement
WCAG 2.1 Success Criterion 1.4.12 (Text Spacing, Level AA) requires that no loss of content or functionality occurs when line height is set to at least 1.5 times the font size. This is a compliance floor, not a design target. The same criterion specifies letter spacing of at least 0.12em and word spacing of at least 0.16em. Failing this threshold is an accessibility violation that disproportionately affects users with dyslexia, low vision, and cognitive disabilities. Most browser defaults set line height at approximately 1.2, which falls below the WCAG minimum for body text.
Unitless vs. Length Values in CSS
Unitless line height is the strongly preferred CSS value type. When a unitless number is used (e.g., line-height: 1.5), child elements inherit the ratio and compute their own line height against their own font size. When a length value is used (e.g., line-height: 24px or 1.5em), child elements inherit the computed pixel value, not the ratio. This causes inherited spacing to be incorrect when the child element has a different font size, a common source of cramped text in nested UI components.
| Unit Type | Example | What Children Inherit | Best Practice |
|---|---|---|---|
| Unitless | 1.5 | The ratio (scales to child font size) | Preferred |
| em | 1.5em | Computed px (fixed, ignores child font size) | Avoid |
| rem | 1.5rem | Fixed px relative to root font size | Avoid |
| px | 24px | Fixed px value | Avoid |
| % | 150% | Computed px value | Avoid |
Example Problem
Font size: 16px. Line height ratio: 1.5. Line height = 16 x 1.5 = 24px. This matches standard body line height in most stylesheets and meets WCAG 1.4.12 at the 16px base. At 14px body text, a 1.5 ratio yields 21px, still compliant but near the minimum readable threshold. At 12px, a 1.5 ratio produces 18px line height; most designers use 1.6 to 1.7 at that scale.
