Spacing & Rhythm

If sizing and measure set the stage, spacing and rhythm are the choreography. How paragraphs separate, how letters breathe, and how subheads relate to the text below them — these decisions determine whether a page reads as a composed whole or a stack of disconnected blocks.

Paragraph separation

A new paragraph needs either a blank line above it or a first-line indent — never both. Choosing one is a design decision; using both is double punctuation.

Books almost always use indents. Websites almost always use line breaks. The split is partly historical — CSS made indents annoying for years — and partly behavioural: web readers skim, and line breaks aid skimming; book readers read sequentially, and indents flow better.

Line breaks (web default)

Cleaner for scanning, lists, and short articles. Set a margin between paragraphs and zero text-indent:

p { margin-bottom: 1em; text-indent: 0; }

The margin should feel modest — about one full line of space — not enough that paragraphs float as separate islands.

Indents (longform / editorial)

Feels more classical. Better for longform essays and editorial designs that want a book-like rhythm:

p { margin-bottom: 0; }
p + p { text-indent: 1.5em; }

The first paragraph never gets an indent — there is nothing for it to separate from. Use the p + p selector. Size the indent to roughly 1–1.5 em; beyond 3 em it stops looking like an indent and starts looking like a typo.

Letterspacing: the default rule

Letterspacing — also called tracking — is uniform extra space added between every pair of characters. The default rule for body text: leave it alone. The font designer set the spacing; positive or negative letter-spacing on running text degrades it.

When to add letterspacing

• Uppercase text. All-caps and small caps are designed for a lowercase rhythm; capitals need extra air or they crash into each other. Add 0.05–0.15 em to caps and small caps.
• Tiny text (10px and below). Letters get crowded at small sizes; a hint of tracking helps them breathe. But if letterspacing still looks off, the right answer is usually to size up.
• Large display headlines. The font's built-in spacing was tuned for body sizes; at 72px it can feel airy. Tighten with a touch of negative letter-spacing (letter-spacing: -0.02em).

When not to add letterspacing

• Body text in mixed case. Do not.
• Monospaced fonts. They are designed at exact widths; tracking breaks the grid.
• Connected scripts (handwriting fonts, Arabic, Devanagari). The letters are designed to touch; tracking breaks the joins.
• Justified text to fill a line. Letter-spaced justification is grotesque.

Subhead proximity

Place subheaders closer to the paragraph they introduce than to the preceding text. This is the law of proximity in action — readers should see the subhead as belonging to the content below, not floating equidistant between two sections.

h2 {
  margin-top: 2.5em;  /* generous space above */
  margin-bottom: 0.5em; /* tight space below */
}

The ratio matters more than the absolute values. If the space above and below a subhead are equal, the subhead looks orphaned — belonging to neither paragraph. If the space below is noticeably smaller, the subhead visually connects to its content.

For large subheaders, use extra spacing above. Avoid default center alignment for subheads — left-aligned is almost always better for reading flow. Reserve center alignment for intentional formal or display contexts.

Vertical rhythm

Set line-height first, then derive paragraph spacing from it. A paragraph margin of roughly one line-height (the same as the leading) produces even vertical rhythm — the space between paragraphs equals the space between lines within a paragraph.

If you use a spacing scale (4px, 8px, 12px, 16px, 24px, 32px), choose the step closest to one line-height. Perfect alignment to a baseline grid is impractical on the web — responsive layouts, mixed font sizes, and inline images all break it. Prioritize consistent feel over mathematical purity.

Padding and margins

Text needs breathing room. Ensure adequate padding around text blocks — both between columns of text and between text and the edges of the viewport:

• Column padding. Multi-column layouts need gutters wide enough that the eye does not accidentally jump to the adjacent column.
• Outer margins. On mobile, text that touches the screen edge feels cramped. Add at least 16px of horizontal padding.
• Thumb space in mobile. Interactive text elements need enough padding to be tappable without precision.

Break long copy into readable paragraphs. Avoid walls of text. Use subheads and lists where they help the reader scan. But do not over-fragment — a page of twenty two-sentence paragraphs reads as choppy as a page of one forty-sentence paragraph reads as impenetrable.