Fix the leading

There is a single line in most stylesheets that quietly decides whether your typography looks considered or accidental:

body { line-height: 1.5; }

Set once, inherited everywhere, never thought about again. It is close to right for body text and wrong for everything else, and the reason is mechanical rather than aesthetic.

What actually inherits

CSS specifies two different behaviours depending on whether you write a unit.

A unitless number is inherited as a number, and each element multiplies it by its own font size. So line-height: 1.5 on body reaches your 48px page heading and gives it a 72px line box. That is enormous. Your heading now has more air inside it than the paragraph below it has around it.

A length is inherited as the computed value. So line-height: 24px on body reaches that same 48px heading and gives it a 24px line box, and the heading overlaps itself.

Both are wrong, in opposite directions, from the same well-meaning line. Which is why every published type system sets leading per size rather than globally.

The move

Set line-height per size, tight for headings and loose for body, and never inherit one value for both.

The numbers, and which of them survive checking

Headings: 1.1 to 1.2, tightening as the size grows. This is well corroborated. Tailwind ships 1.2 at 30px, 1.11 at 36px, and 1.0 from 48px upward. GOV.UK ships 1.04 at 48px and 1.11 at 36px. Large text needs proportionally less leading, and above about 48px it needs essentially none.

Body: call it 1.4 to 1.6. I want to correct the usual advice here slightly. Most published systems sit lower than the commonly repeated 1.5 to 1.6: Butterick recommends “between 120% and 145% of the point size”, GOV.UK ships 1.32, IBM Carbon 1.43, Tailwind 1.5 to 1.56.

So 1.5 is a safe default rather than an optimum, and there is a specific reason to prefer it. WCAG 1.4.12 Text Spacing, Level AA, requires that your layout survive a user setting line height to 1.5 times the font size. If you ship 1.5, you have already tested the case the standard cares about. Ship 1.3 and you have not.

Line length: 45 to 75 characters. This one is Bringhurst, verbatim: “Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face.” Butterick’s version is compatible. WCAG’s own requirement is looser and sits at Level AAA: 1.4.8 asks that a mechanism be available for width “no more than 80 characters.”

The 65ch shorthand works because CSS defines 1ch as the advance measure of the digit zero, so max-width: 65ch scales with your actual font rather than guessing in pixels. It is an approximation: 1ch is the width of a zero, not of an average character.

There is a caveat worth knowing before you defend this one in a review. Bringhurst is describing a print convention, and his own words are “widely regarded”, which honestly labels a craft consensus rather than a result. The measured screen research runs the other way on speed: lines of 95 and 100 characters were read faster than 55, while 55 was rated easiest to read. So a narrow measure is a choice for comfort and preference, not for reading speed, and it is worth saying that rather than implying the research is behind you.

/* BEFORE                        AFTER */

body {                           body {
  line-height: 1.5;                line-height: 1.5;   /* body only */
}                                  max-width: 65ch;
                                 }

/* 48px heading inherits 1.5    h1 { font-size: 48px; line-height: 1.05; }
   -> 72px line box, adrift */  h2 { font-size: 36px; line-height: 1.15; }
                                h3 { font-size: 24px; line-height: 1.25; }
/* or, with a unit,
   line-height: 24px            /* tighter as they get bigger.
   -> the heading overlaps         nothing inherits a heading's
      itself */                    leading by accident */

What it costs

Per-size leading is more tokens to maintain, and it is genuinely easier to ship one value and move on. The mitigation is to bind line-height to font-size in the same token, so a size and its leading are one decision rather than two that can drift apart.

And 65ch fights real content. Tables, code blocks and images do not want a 65-character measure, so the constraint belongs on your prose container rather than on body, or you will spend a month adding overrides.

A caution on the research, too. WCAG says its 1.4.12 metrics are “based on research” and names its sources, but line-length and leading recommendations in typography are largely craft consensus rather than controlled experiment. Bringhurst says 45 to 75 is “widely regarded” as satisfactory, which is an honest description of what kind of claim it is.

Try this week

Search your stylesheet for line-height and count how many distinct values you have. If the answer is one, this is a ten-minute fix with a disproportionate result.

Set your headings explicitly, tightening as they grow: about 1.25 at 24px, 1.15 at 36px, 1.05 at 48px. Leave body at 1.5.

Then put max-width: 65ch on your longest block of prose and reload it. That single line is usually the largest readability improvement available in any codebase that has never had a designer, and it costs you nothing but the decision.