skip to content

In a design system's text styles, why does body text get looser line height than headlines, and how should paragraphs be separated?

level: juniorimportance: should knowfreq 42%

answer

  1. many lines read in a row
  2. big type, big absolute gaps
  3. set per text style, not globally
  4. paragraph gap bigger than line gap
  5. WCAG asks to survive, not to author

basics

~20 s

Body text is read across many consecutive lines, so it needs looser line height, commonly about 1.4 to 1.6 times the font size; short, large headlines read better tighter. Paragraphs need a gap clearly larger than the line gap.

solid answer

~50 s

**Line height** is the distance from one baseline to the next. Body copy is read line after line, so it needs enough space for the eye to find the next line: commonly about 1.4 to 1.6 times the font size, looser for longer lines. Large headlines are one to three lines of big type, where the same ratio would open visible gaps, so they run tighter, often 1.1 to 1.3. That is why line height is set per text style and paired with its font size, not as one value for everything. Paragraphs need a boundary the reader cannot mistake for a wrapped line: a gap clearly larger than the line gap, or a first-line indent. None of these numbers is a WCAG requirement; what WCAG 2.2 asks at AA (1.4.12) is that layouts survive a reader raising line height to 1.5 and paragraph spacing to twice the font size.

go deeper

for a junior

Recall that body text uses a looser line height than headlines, that it is paired with each text style, and that paragraphs need a gap larger than the line gap.

for a middle

Explain why the ratio changes with size and measure, and why WCAG 1.4.12 asks layouts to survive a 1.5 override rather than telling authors to use 1.5.

for a senior

Show how the system bakes line height into text styles and paragraph spacing into the prose component, and how you would push back on fixed-height containers built around a line count.

for a principal

Weigh information density against reading comfort for a news product whose editors want more above the fold, and decide which spacing values the system locks down and which it leaves adjustable.

## Line height, defined **Line height** (also called leading, after the strips of lead that printers placed between lines of metal type) is the vertical distance from the baseline of one line of text to the baseline of the next. It is usually stated as a ratio of the font size: a 16-point body style with a line height of 1.5 has 24 points from baseline to baseline. Because the space above and below the letters is what the eye uses to tell one line from the next, line height is one of the settings that most affects how tiring a long article is to read. ## Why body text and headlines differ The same ratio does not suit every text size, because the job of the text differs: | Text style | Typical line height (common practice) | Why | |---|---|---| | Body copy in an article | About 1.4 to 1.6 times the font size | Read across many consecutive lines; the eye needs a clear channel to find the next one | | Captions and small labels | About 1.3 to 1.5 | Short runs; small type still needs room so lines do not crowd | | Large headlines and display text | About 1.1 to 1.3 | One to three lines of big type; a body ratio opens gaps so large the headline falls apart | These ranges are conventions with a reason, not rules any standard sets. The reason is proportional: at large sizes a ratio of 1.5 becomes a big absolute gap, and a two-line headline starts to read as two separate statements. ## What else pushes line height up or down - **Measure**: longer lines need more line height, because the return sweep to the next line is longer and more likely to drift. A narrow phone column can run slightly tighter than a wide desktop column. - **Typeface proportions**: a face with a large x-height (tall lowercase letters) fills more of each line and usually needs a little more line height than one with a small x-height. - **Surface density**: a data-dense table or list may run tighter than article prose, because it is scanned rather than read continuously. - **Writing system**: scripts with tall stacked marks need different values; that is a per-script decision made separately from this general rule. ## Paragraph spacing Paragraphs need a boundary the reader cannot mistake for an ordinary line wrap. There are two classic signals: 1. **A vertical gap between paragraphs**, clearly larger than the gap between lines inside a paragraph. This is the usual choice on screens, where news paragraphs are short and readers scan. 2. **A first-line indent** with no extra gap, the traditional book convention. Using both at once is redundant, and a gap equal to the line gap makes paragraph breaks invisible. News writing tends toward one- to three-sentence paragraphs, so paragraph spacing shows on almost every screenful and matters more than it does in a novel. ## What the standards actually say WCAG 2.2 has two criteria that mention these values, and neither tells authors what to set: - **SC 1.4.8 Visual Presentation (Level AAA)** asks that a **mechanism** be available to achieve line spacing of at least space-and-a-half within paragraphs, and paragraph spacing at least 1.5 times the line spacing. The mechanism may be provided by the user agent. - **SC 1.4.12 Text Spacing (Level AA)** asks that no content or functionality is lost when a user overrides line height to at least 1.5 times the font size and spacing after paragraphs to at least 2 times the font size, along with letter and word spacing. Its first note says content is not required to use these values. So a body style authored at 1.45 is not a violation. A body style whose container clips when the reader raises it to 1.5 is. ## How a design system encodes it 1. **Pair line height with each text style**, not as one global value: every size step carries its own line height, so a team picking the body style gets the right spacing automatically. 2. **Put paragraph spacing in the long-form prose component**, so the authors of a news story never set it by hand and every article separates paragraphs the same way. 3. **Never size containers from the line count**: a card that assumes exactly two lines at a given line height will clip as soon as a reader or a longer headline changes it. 4. **Document the reason**, so a product team asking for tighter body text to fit more above the fold can see what it costs.

  • WCAG 1.4.12 mentions a line height of 1.5. Must every body style in the system be authored at 1.5?
    No. The criterion's first note says content is not required to use these values; the requirement is that nothing is lost when a user overrides spacing to them. A body style at 1.45 conforms if its containers grow when a reader raises it to 1.5 or more. The AAA criterion 1.4.8 also asks only for a mechanism, which the user agent may supply.
  • Why does a longer measure call for more line height?
    The return sweep to the start of the next line gets longer and more diagonal as lines lengthen, so readers are likelier to land on the wrong line. More space between lines gives the eye a wider channel to follow back. A narrow phone column can therefore run a little tighter than a wide desktop column without hurting reading.
  • Why do most screen layouts separate paragraphs with a gap rather than a first-line indent?
    Screen text, and news text especially, uses short paragraphs that readers scan, and a gap marks each block boundary at a glance. An indent works well in dense book pages but is harder to spot in short paragraphs. Either signal is fine alone; combining both is redundant.

saying these in an interview costs you the question

  • WCAG requires every body text style to be authored at 1.5 line height.
  • One line height ratio serves captions and display headlines equally well.
  • Tighter body line height is better for news because more text fits on screen.
  • A paragraph gap equal to the line gap is enough to separate paragraphs.
  • More line height always helps, so doubling it makes text easier still.