Calculate CSS line height, font size, or a unitless line-height ratio, with px, pt, em, rem, percentage, leading, and accessibility guidance.
Line Height Formula
The following formula is used to calculate the line height.
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 table below gives illustrative starting ranges for visual testing, rather than universal standards. Appropriate spacing depends on the font, size, line length, content, and reader needs. Test the actual text and layout.
| 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 Success Criterion 1.4.12 (Text Spacing, Level AA) tests whether content and functionality survive user overrides: line height of at least 1.5 times font size, paragraph spacing of at least 2 times font size, letter spacing of at least 0.12em, and word spacing of at least 0.16em, with other style properties unchanged. It does not require those values in the authored design, and a 1.5 line-height ratio alone does not establish conformance. Test the actual page with these overrides. W3C explains the text-spacing requirement.
Unitless vs. Length Values in CSS
Unitless line height lets descendants inherit a ratio and calculate spacing using their own font size. Lengths and percentages inherit their computed length, which can be unsuitable when descendants use a different font size. This calculator uses a shared reference for both em lengths; native CSS instead resolves font-size em against the inherited font size and line-height em against the element’s own font size. rem uses the root font size. Use the unitless CSS ratio supplied by the calculator. W3C defines the relative units and unitless line height.
| 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 × 1.5 = 24px. At 14px font size the same ratio yields 21px; at 12px it yields 18px. These are arithmetic examples, not accessibility conformance results. Confirm readability with the actual font, content, and layout, and separately test user text-spacing overrides.
