Spacing & Rhythm

Typography is not only about choosing the right typeface and size — it is about how text occupies space. The vertical distance between lines, the gap between paragraphs, and the margins that frame a block of text determine whether reading feels effortless or exhausting. Spacing and rhythm are the invisible architecture that holds a typographic system together.

Vertical rhythm — the consistent spacing pattern that runs through a layout — creates a sense of order that readers feel even when they cannot name it. When rhythm breaks, pages feel chaotic. When it holds, content feels trustworthy and professionally crafted.

Line Height and Leading

Line height (called leading in print, from the strips of lead inserted between lines of metal type) controls the vertical space from one baseline to the next. It is expressed as a unitless multiplier of the font size: line-height: 1.5 on 16px text produces 24px between baselines.

The optimal line height depends on line length, font size, and typeface design. Wider measures need more leading so the eye can travel back to the next line without getting lost. Narrower measures can tolerate tighter leading. Display type at large sizes needs less leading proportionally — a 48px headline at 1.5 line height (72px) would feel absurdly spaced.

Recommended Line Heights by Context

| Context | Line Height | Rationale | |---------|-------------|-----------| | Body text (16–18px) | 1.5–1.65 | Comfortable reading rhythm | | Small text (12–14px) | 1.4–1.5 | Compensates for reduced size | | Headings (24px+) | 1.15–1.3 | Tight, impactful grouping | | UI labels (12–14px) | 1.25–1.35 | Compact but legible | | Captions and metadata | 1.4 | Slightly tighter than body |

Paragraph Spacing

The space between paragraphs is as important as the space within them. Two common approaches dominate:

Block spacing adds margin below each paragraph (typically 0.75em to 1em). This is the standard for web content and most UI copy. It creates clear visual separation without disrupting the flow of individual paragraphs.

Indent spacing (first-line indent with no margin between paragraphs) is traditional in book typography and some editorial contexts. On the web, it performs poorly — indents are easily missed on screens, and the lack of margin makes dense text blocks feel impenetrable.

When paragraphs contain multiple sentences, aim for enough space that the gap between paragraphs is visibly larger than the gap between lines within a paragraph. If line height is 1.6, paragraph margin should be at least 1em — ideally 1.25em to 1.5em for long-form content.

Spacing After Headings

Headings need space above and below, but not equally. The space below a heading should be less than the space above it — this visually binds the heading to the content it introduces rather than pushing it toward the previous section.

A reliable pattern:

• Space above heading: 2–3× the paragraph spacing
• Space below heading: 0.5–0.75× the paragraph spacing

For an h2 followed by body paragraphs with 1.5em spacing, apply roughly 3em above the h2 and 0.75em below it.

White Space as a Design Element

White space (negative space) is not empty space — it is an active design element that controls pacing, emphasis, and cognitive load. Generous margins and padding around text blocks signal that content deserves attention. Cramped spacing signals urgency or information density.

Three levels of white space operate in typographic layouts:

1. Micro space — letter-spacing, word-spacing, and line height within a text block
2. Meso space — paragraph spacing, list item spacing, and gaps between related elements
3. Macro space — section margins, column gutters, and page-level padding

Effective layouts coordinate all three levels. A page with generous macro space but cramped micro space feels inconsistent — like a spacious lobby leading to cramped hallways.

Establishing Vertical Rhythm

Vertical rhythm aligns all spacing to a common baseline grid. If your body text is 16px with 1.5 line height, your baseline unit is 24px. Every vertical measurement — margins, padding, heading sizes — should be a multiple of 24px (or a clean fraction like 12px).

This alignment creates a subtle regularity that makes layouts feel cohesive. Elements that sit on the same horizontal plane appear related. Sections that break the grid appear intentionally distinct.

The Baseline Grid in CSS

Implement rhythm with consistent spacing tokens:

:root {
  --space-unit: 0.25rem;   /* 4px at 16px base */
  --space-1: calc(var(--space-unit) * 1);  /* 4px */
  --space-2: calc(var(--space-unit) * 2);  /* 8px */
  --space-3: calc(var(--space-unit) * 3);  /* 12px */
  --space-4: calc(var(--space-unit) * 4);  /* 16px */
  --space-6: calc(var(--space-unit) * 6);  /* 24px */
  --space-8: calc(var(--space-unit) * 8);  /* 32px */
  --space-12: calc(var(--space-unit) * 12); /* 48px */
}

Map paragraph spacing to --space-6 (24px), section gaps to --space-12 (48px), and heading margins to multiples that align with your line-height grid.

Good vs. Poor Spacing

The examples below illustrate how spacing decisions affect readability and perceived quality.

Common Spacing Mistakes

Inconsistent spacing units. Mixing px, rem, and em values without a system produces layouts that look almost right but feel subtly off. Commit to one spacing scale.

Ignoring heading-to-content binding. Equal margins above and below headings cause them to feel orphaned — visually closer to the previous section than to the content they introduce.

Over-spacing short content. A three-line paragraph with 2em bottom margin and a two-line paragraph below creates a gap larger than either paragraph, making the content feel fragmented.

Under-spacing lists. List items at default browser spacing (often tight) with generous paragraph spacing make lists feel like afterthoughts rather than integral content.

Spacing in Component Contexts

Different UI contexts demand different spacing approaches:

• Cards: Internal padding of 16–24px; title-to-body gap of 8–12px; body-to-action gap of 16px
• Forms: Label-to-input gap of 4–8px; field-to-field gap of 16–24px; section-to-section gap of 32–48px
• Navigation: Item padding of 8–12px vertical; group separation of 16–24px
• Modals: Title-to-body gap of 12–16px; body-to-actions gap of 24px; internal padding of 24–32px

These are starting points — your type scale and baseline grid should refine them into precise values.

Pulling It Together

Spacing and rhythm transform a collection of font sizes into a readable experience. Start with comfortable line height for your body text, establish paragraph spacing that clearly exceeds intra-line distance, and build a spacing token system that aligns to your baseline grid. Test by reading — not glancing — at your content. If you lose your place between lines or between paragraphs, the spacing needs adjustment.

The best spacing is the spacing you do not notice. When rhythm works, readers absorb content without conscious awareness of the layout system supporting it.