Line Height Calculator

// How line-height actually works in CSS

Line height is the distance from one baseline to the next. In CSS it is set four ways — as a plain number, in pixels, in em, or as a percentage — and at a single font size they all produce the same result: at 16px, line-height 1.5, 24px, 1.5em and 150% are one and the same. They stop being the same the moment anything inherits them.

A unitless line-height is inherited as the number, so every descendant multiplies it by its own font size. Every other form is inherited as the computed length. Give a container line-height: 24px and a heading inside it at 32px still gets 24px of leading, which sets its lines overlapping. That single difference is why unitless is the recommended form, and it is the only real decision on this page.

The exception is deliberate tightening. A specific heading that wants 1.15 should say 1.15 on the heading, not inherit a number meant for body copy. Set the readable ratio on the body element, override it where the type gets big, and leave the units out of both.

// Picking a ratio by context

Body copy sits between about 1.5 and 1.7. Headings want 1.1 to 1.3, because leading is a proportion: the gap between lines grows with the font size, so a ratio that reads comfortably at 16px opens a visible gulf at 48px. This calculator tightens its recommendation as the font size passes 24px for exactly that reason, and it never goes below 1.1.

The other half of the decision is measure — the number of characters on a line. The comfortable band is roughly 45 to 75 characters. A long line needs looser leading, because the eye has further to travel to find the start of the next one, and tight leading makes it easy to land on the wrong line. Fill in the optional line-length field and the recommendation loosens past 75 characters, capped at 1.65 so it never becomes a page of double-spaced soup.

These are starting points, not laws. Line height interacts with the typeface's x-height and with how dense the page already feels. The comparison strip below the preview exists so you can see 1.25, 1.5 and 2 against your own text and disagree with the recommendation on the evidence.

// Where the 1.5 figure comes from

WCAG 2.1 arrives at 1.5 twice, and the two are different requirements that get flattened into one claim on most calculator pages.

Success Criterion 1.4.8 Visual Presentation, at level AAA, asks that a mechanism be available to get line spacing within paragraphs to at least space-and-a-half — in practice, authoring it in CSS. That one is about the value on the page, and it is where "WCAG says 1.5" is fair.

Success Criterion 1.4.12 Text Spacing, at level AA, is not about your chosen value at all. It requires that no content or functionality is lost when a reader themselves sets line-height to at least 1.5 times the font size — a resilience requirement on the layout. You can pass 1.4.12 with body text at 1.4, provided nothing breaks when someone forces 1.5 through a stylesheet or an extension. Both point at the same number for different reasons, which is why 1.5 is a sound default and a poor thing to be dogmatic about.

// The golden ratio, honestly

φ is 1.618, and a line height of 1.618 is a perfectly reasonable value for long-form body copy — it sits between the Relaxed and Normal ends of the usual range. It appears in the table for that reason.

What it is not is a derivation. There is no evidence that leading at φ reads better than leading at 1.6 or 1.65, and the differences between them are smaller than the differences between two typefaces at the same ratio. Sites built entirely around golden-ratio typography are selling a story about proportion; the number itself is fine, the mysticism is decoration. Pick it if it looks right against your text in the preview, not because of the ratio it is named after.

// Units, and reading the output

The output format toggle emits whichever form you need. Unitless is the default because of the inheritance behaviour above; px is there for handing a value to a designer or a design tool, which measure in absolute units; em and percent are there because plenty of existing stylesheets use them and matching the house style beats being right in isolation.

The font size field accepts px, pt or rem. A point is exactly 4/3 of a pixel, because CSS defines one inch as 96px and 72pt, so 12pt is 16px — which is where the old print default and the browser default line up. The rem option assumes an untouched 16px root, and says so beside the field.

The line-length field takes characters or pixels. Characters is the honest unit, because that is what the research measures. A pixel width has to be divided by an average character width to get there, and this page assumes half the font size — a rough figure for proportional text, stated rather than hidden. It only ever moves the recommendation by a bounded nudge; if you want precision, count the characters.

// fair questions

What is the best line height for 16px text?

24px, which is a ratio of 1.5 — the usual starting point for body copy and the figure WCAG's Visual Presentation criterion asks for. Go looser, up to about 1.7, if your lines run long or your typeface has a large x-height. Go tighter only for headings.

Should line-height be unitless in CSS?

Yes, for anything that will be inherited. A unitless value is inherited as the number, so each descendant multiplies it by its own font size; px, em and percent are inherited as the computed length, so a 32px heading inside a container set to line-height: 24px gets 24px of leading and its lines overlap. Set a number on the body and override it where the type gets big.

What line height does WCAG require?

It depends which criterion you mean. SC 1.4.8 Visual Presentation (level AAA) asks that a mechanism be available to get line spacing to at least space-and-a-half within paragraphs — authoring it in CSS is the usual one. SC 1.4.12 Text Spacing (level AA) is different: it requires that nothing breaks when a reader forces line-height to 1.5 themselves, which is a requirement on your layout rather than on your chosen value. 1.5 is the safe default: it meets 1.4.8's figure outright and makes the line-height half of 1.4.12 a no-op — though 1.4.12 also asks your layout to survive changes to letter, word and paragraph spacing, so meeting it takes more than picking a line height.

What line height should headings use?

Between about 1.1 and 1.3. Leading is proportional, so the same ratio that reads well at 16px leaves a visible gap at 48px. This calculator tightens its recommendation automatically past 24px, and the Tight row (1.25) is the usual starting point for large headings.

Is the golden ratio line height better?

It is a fine value and not a special one. 1.618 sits comfortably in the range for long-form body text, but there is no evidence it reads better than 1.6 or 1.65, and the difference between them is smaller than the difference between two typefaces at the same ratio. Judge it in the preview against your own text.

Does the line length really change the answer?

Yes, and it is the part most calculators ignore. The comfortable measure is roughly 45 to 75 characters; past that, the eye has further to travel back to the start of the next line and tighter leading makes it easier to land on the wrong one. Fill in the optional line-length field and the recommendation loosens past 75 characters, capped at 1.65.