Sizing & Measure

Body size, line length, and line height are the three foundational decisions of running text. Get any one of them wrong and the paragraph feels effortful — even if the reader cannot articulate why. Get all three right and the text disappears, leaving only the content.

Body size: the anchor

Body size is the font size of running paragraph text — the anchor for everything else in a typographic system. Set it first, then derive heading sizes upward and caption sizes downward.

Comfortable body sizes have moved up over the years as screens have grown sharper:

• Desktop: 16–24px. The lower bound is a hard minimum; many sites read better at 18–20px.
• Mobile: 14–19px. Phones are held closer to the eye, so smaller looks the same.
• Print: 10–12pt.

The right number for a given face depends on its x-height — the height of the lowercase letter x. Two typefaces both set at 18px can look one or two sizes apart because of how much vertical space their lowercase letters occupy. Verdana has a famously tall x-height; Garamond a famously short one. Set them both at 16px and Verdana looks roughly two sizes bigger.

Type designers tend to draw their faces to read best at one or two specific sizes. If 19px looks alive but 18px feels thin and 20px feels heavy, use 19px — even if it breaks your modular scale. The scale is a starting point; the eye is the editor.

Common body-size mistakes

• 14px desktop body. Pre-2010 default; reads cramped on modern screens.
• 24+ px desktop body. Reads as a children's book or a slide. Reserve for very narrow columns or accessibility-first sites.
• Same size on mobile and desktop. Treat them as separate problems.

Line length: the measure

Line length — also called the measure — is the horizontal width of a column of text, counted in characters per line including spaces. The traditional ideal is around 66 characters, with 45–75 the workable range.

Below 45 the line ends so often the reader's eye snaps back to the start before settling. Above 75 the eye loses the next line on its return trip and re-reads the wrong one. Both feel like work. Past 100 characters the page becomes uncomfortable; many high-traffic sites regularly run 200+ on wide screens.

In CSS the ch unit equals the width of the typeface's 0 glyph, which approximates a character. max-width: 65ch is a fair default:

.prose {
  max-width: 65ch;
  margin-inline: auto;
}

On narrow viewports the screen edge already constrains the measure, so the max-width is permissive. Add side padding so text does not kiss the screen.

For responsive type, clamp() lets you set a fluid font size that scales between breakpoints:

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

This smoothly transitions from 16px on small screens to 20px on large ones, without the abrupt jumps of media queries.

Common line-length mistakes

• Letting copy fill the viewport. Readers compensate by zooming the window narrower or copy-pasting into a notes app.
• Constraining only by pixels. Pixel widths drift relative to character count as font size or face change. ch units stay roughly stable.

Line height: the vertical space

Line height — historically called leading, after the strips of lead typesetters wedged between metal type slugs — is the vertical distance between baselines of consecutive lines.

For body copy, 1.45–1.5 (unitless multiple of the font size) is the comfortable range. Tight enough to keep paragraphs cohesive, loose enough that the eye can find the next line. Faces with a tall x-height or large counters need slightly more leading; condensed or small-x-height faces can run tighter.

For large display type — headlines, hero text — line height should drop to around 1.0–1.2. The same 1.5 that works at 18px leaves a canyon between two 60px headline lines. As size goes up, line height should come down.

Always unitless

Use line-height: 1.5, not line-height: 24px or line-height: 150%. Unitless values inherit as a multiplier; pixel and percent values inherit as the computed pixel value, which means a child with a different font size inherits the wrong leading:

body { line-height: 1.5; }      /* good — every child computes its own */
body { line-height: 24px; }     /* bad — h1 inherits 24px and overlaps */

The three decisions together

Body size, line length, and line height form a triangle. Changing one usually requires adjusting the others:

• Larger body size → the measure (in characters) shrinks at the same pixel width, so the column may need to widen.
• Wider column → more characters per line, so line height should increase slightly to help the eye track back.
• Taller x-height → the lines feel more packed, so line height should increase.

There is no formula that replaces looking at the result. Set the three values, read a paragraph of real copy, and adjust until the text feels effortless. That feeling — the absence of friction — is the goal.