F4.13.4paragraph spacing coupled to leadingdesign

Paragraph spacing should track leading, not a fixed pixel value

Aliases: spacing scale · em paragraph gap · pixel-locked spacing

What it is

A paragraph gap written as “sixteen pixels” is only right relative to leading at the artboard’s default size. The user enlarges type, the line box grows, sixteen pixels stay put, and a gap that used to exceed leading falls below it. The break cue collapses on its own. Paragraph spacing coupled to leading means that gap is a function of leading — usually an em or a line-box multiple — not a pixel constant that does not know about the face.

Why it happens

Leading moves with type size. If paragraph spacing does not, their ratio moves. Seeing a break depends on that ratio, not on the gap’s absolute millimetres. A pixel value comes from a visual at the default bucket and knows nothing about later Dynamic Type, browser zoom, or a user’s minimum size. From regular type to the largest accessibility bucket the line box can double, and a fixed gap becomes an intra-line seam; paragraphs glue back into a wall. The opposite error, picking a huge pixel value for the largest bucket, turns short paragraphs into sparse cards at default size. Couple the gap to leading and the ratio holds under scale, so the threshold inequality can be true at every bucket at once. This is not “make the gap bigger.” It is a change of unit.

Where it stops holding

Gaps that must align to neighbouring components (card padding, list-item interval) often have to sit on a spacing scale and cannot swell forever with body leading, or the card system is dragged around by the paragraph. That is component spacing, not paragraph spacing; inside the text block the gap should still follow leading. Some mail clients and native text views refuse leading multiples and only take points; then recompute points from the current size rather than freezing one number. Space between a heading and body is hierarchy, not a paragraph break; the multiplier may differ, but it should still move with each size.

Applying it

  • Write body paragraph spacing as a multiple of leading (or in em), not as pixels decoupled from type size.
  • Drag system type from smallest to largest and measure paragraph gap ÷ line box at each bucket. The ratio should be roughly constant and always greater than one. If it is greater than one only at the default, it is pixel-locked.
  • Keep card and toolbar gaps on the layout scale. Do not bind non-paragraph space to leading just to “use em everywhere.”

Related

  • Same group: F4.13.1 Paragraph spacing must exceed leading or the break cannot be seen · F4.13.2 First-line indent and a blank between paragraphs are mutually exclusive conventions · F4.13.3 A long unsegmented block drops reading completion
  • Nearby: F4.02 Leading · F4.16 Dynamic Type and user font size
  • Search terms: paragraph spacing · em spacing · leading scale

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F4.13.4