What Is the Line Height Calculator?
Calculate optimal line-height values for any font size. Preview text readability with adjustable font, size, and line-height combinations.
Why Use This Tool?
Line height (leading) is one of the most impactful typography settings for readability. Too tight and lines blur together; too loose and the eye loses track between lines. This tool helps you find the sweet spot.
How to Use This Line Height Calculator
- Enter your font size — Type the font size you're working with in pixels. Common values: 14–16px for body text, 24–48px for headings.
- Choose a ratio — Select a line-height multiplier. The tool suggests optimal ratios based on your font size and content type (body text, headings, captions).
- Preview the result — See your text rendered live with the calculated line-height applied. Compare different ratios side by side.
- Copy the CSS — Grab the line-height value as a unitless ratio (recommended) or in pixels, rem, or em — ready for your stylesheet.
Worked example: why unitless line-height inherits correctly
The calculator gives the same spacing as a unitless number, px, rem and em. They look interchangeable for one element, but they behave differently once the value is inherited, which is where most line-height bugs come from. This markup was rendered in Chromium on October 12, 2026 with four spellings of the same 24 px line-height on the parent, in a 300 px column where the heading wraps to three lines:
<div style="font-size: 16px; line-height: VALUE"> <p>Body text</p> <h1 style="font-size: 48px">A heading long enough to wrap</h1> </div>
| Parent value | Heading line-height | Heading height | Why |
|---|---|---|---|
| 24px | 24 px | 72 px | lines overlap: each line gets half the font size |
| 1.5em | 24 px | 72 px | same as 24px: em is resolved on the parent, then inherited as a fixed length |
| 150% | 24 px | 72 px | same again: percentages are resolved on the parent too |
| 1.5 (unitless) | 72 px | 216 px | the factor is inherited and applied to 48 px |
Only the unitless value carries over as a ratio; every length unit, including em and percent, is turned into pixels on the element where you set it, and the child inherits those pixels. That is why the unitless output is the one to put on body or any container; use the px, rem or em outputs only on the exact element you measured them for.
Leave room for readers who change the spacing. WCAG 2.2 success criterion 1.4.12 (Text Spacing) asks that no content or function is lost when a user sets line height to at least 1.5 times the font size, so avoid fixed heights and overflow: hidden on text boxes; a container sized for your own line-height will clip the text when theirs is larger.
Related tools
- Line height locks the vertical rhythm; the Optical Size Adjuster uses font-size-adjust to keep the rhythm intact during the fallback-to-web-font swap.
- For locking every element (headings, paragraphs, lists, margins) onto a single baseline grid rather than tuning each line-height individually, the Vertical Rhythm Calculator derives everything from one base unit.
- Once the rhythm is set, the Hyphenation Tester previews text-wrap pretty alongside hyphens auto to refine how lines break inside that rhythm.
Frequently Asked Questions
Built by Derek Giordano · Part of Ultimate Design Tools