Vertical Rhythm: Aligning Text to a Baseline Grid

Open a well-designed print book and notice how the text on the left page aligns perfectly with the text on the right page, even though they are separate columns. Hold the page up to a light source and the text rows line up through the paper. This is vertical rhythm — the consistent, repeating interval between text baselines that makes a page feel orderly and settled.

On the web, vertical rhythm is harder to achieve but still worth understanding. When done thoughtfully, it creates a visual consistency in layouts that designers notice (even if they cannot immediately name what feels right about it) and readers experience as comfort and ease of navigation.

What Is Vertical Rhythm?

Vertical rhythm is the practice of aligning all text in a layout to a common grid based on the baseline of the type. The baseline is the invisible line that letters sit on — the bottom of capital letters, lowercase letters without descenders, and numbers.

When a layout has vertical rhythm, every line of text across the entire page falls on one of the grid lines. A paragraph of body text, a heading, a caption, a pull quote — all of their baselines are multiples of the grid unit apart. The visual effect is a sense of order and intentionality.

The rhythm is defined by the line-height of the body text. If body text is set at 16px with a line-height of 1.5, each line occupies 24px of vertical space. The grid unit is 24px. Every other vertical measurement in the layout — heading sizes, margins, padding, image heights — is ideally a multiple of 24px.

Vertical rhythm connects to two related concepts:

Baseline grid: The visual grid (often shown as horizontal lines at regular intervals in design tools) that serves as the reference for text alignment.

Leading: In traditional typography, leading is the distance from the baseline of one line to the baseline of the next — the same as line-height in CSS. The term comes from strips of lead alloy that typesetters inserted between rows of type to control spacing.

Choosing a Baseline Unit

The baseline unit flows from the body text line-height. There are two common approaches to selecting it.

Derive from body text: Set your body font size and a target line-height, and the resulting line height in pixels becomes your baseline unit.

Body: 16px, line-height: 1.5
Baseline unit: 16px × 1.5 = 24px

Everything else is then expressed as multiples of 24px: headings get margin-top of 48px or 72px, images have heights of 144px or 192px, sections are separated by 96px.

Choose a grid unit first, then derive line-height: Some design systems start with a spatial grid unit (4px, 8px) and make all sizing multiples of that unit. Carbon Design System uses an 8px base grid. In this approach, the baseline unit is chosen to be a multiple of the spatial grid: 8px × 3 = 24px, or 8px × 4 = 32px. This keeps text rhythm and spatial grid in harmony.

/* 8px spatial grid, 24px baseline unit */
:root {
  --grid-unit: 8px;
  --baseline: 24px;
}

body {
  font-size: 1rem;    /* 16px */
  line-height: 1.5;   /* 24px */
}

For most design systems, a 24px or 32px baseline unit works well for body text at 16px. A 24px baseline (line-height 1.5) produces comfortable reading for most typefaces. A 32px baseline (line-height 2.0) is more generous and is sometimes used in editorial or long-form reading contexts.

CSS Implementation

Achieving vertical rhythm in CSS requires consistent application of the baseline unit to all spacing properties.

Body text: The foundation. Set once and rarely changed.

body {
  font-size: 1rem;
  line-height: 1.5; /* 24px at 16px base */
}

Headings: The challenge with headings is that their font size changes the number of baseline units they occupy, and their margin must compensate to keep subsequent text on-grid.

h1 {
  font-size: 2.441rem;  /* ~39px */
  line-height: 1.2;     /* ~47px — does not align to 24px grid */
  margin-top: 3rem;     /* 48px = 2 × 24px */
  margin-bottom: 1.5rem; /* 24px = 1 × 24px */
}

h2 {
  font-size: 1.953rem;  /* ~31px */
  line-height: 1.3;     /* ~40px */
  margin-top: 3rem;     /* 48px */
  margin-bottom: 1rem;  /* adjusted for total rhythm */
}

h3 {
  font-size: 1.5625rem; /* 25px */
  line-height: 1.4;     /* 35px */
  margin-top: 2.25rem;  /* 36px */
  margin-bottom: 0.75rem;
}

Paragraphs: Paragraph spacing should be multiples of the baseline unit.

p {
  margin-top: 0;
  margin-bottom: 1.5rem; /* 24px — one baseline unit */
}

/* Larger paragraph spacing for article-style content */
.article p {
  margin-bottom: 2rem; /* 32px — from larger 32px baseline */
}

Images and media: Images break vertical rhythm unless their heights are constrained to baseline multiples. This is impractical for arbitrary content images, but possible for icons, decorative images, and UI illustrations.

/* Icon heights as baseline multiples */
.icon-sm { height: 24px; }  /* 1 × baseline */
.icon-md { height: 48px; }  /* 2 × baseline */
.icon-lg { height: 72px; }  /* 3 × baseline */

Maintaining rhythm after headings: The trickiest part of CSS vertical rhythm is managing the transition between a heading (which has a line-height that may not align to the grid) and the subsequent paragraph. One technique is to use padding-bottom instead of margin-bottom on headings, allowing the background color to show through, while keeping spacing as baseline multiples. Another technique is to use a calc() to compute the exact padding needed to return to the grid after a non-grid-aligned heading.

The Web's Baseline Grid Problem

Here is the uncomfortable truth: perfect baseline grid alignment is significantly harder on the web than in print, for several structural reasons.

Line-height distributes above and below the baseline. In CSS, line-height adds equal space above and below the text within the line box. The first line of a paragraph therefore sits half a line-height below the top of the element. This half-leading above the first line means that even if margins are perfect multiples of the baseline unit, the actual rendered text baseline may be offset from the grid by half the leading amount.

CSS has no direct equivalent of the InDesign "First Baseline" control that allows precise alignment of the first text baseline to a specific position.

Variable font sizes across elements. A page with body text, headings, captions, and labels has different font sizes on different elements. Each font size paired with a line-height produces a different number of pixels per line. Getting all these to align to a single grid requires precise arithmetic that is fragile in practice — changing any element's font size or line-height breaks the alignment for subsequent elements.

Images and embedded content. An arbitrary-height image in a content flow immediately breaks vertical rhythm. Content management systems that allow authors to upload and insert images of any dimension make baseline grid alignment essentially impossible to maintain automatically.

User-adjustable text size. If users can change browser font size (as they should be able to for accessibility), the baseline unit changes proportionally — but only if all measurements are in rem or em. Any pixel-based spacing values will be out of rhythm after a font size adjustment.

These are not new problems. They have been discussed by web typographers for over fifteen years. The honest conclusion: perfect baseline grid alignment on the web, across all content, for all users, is not achievable with current CSS. But that does not mean vertical rhythm is useless — it means we work with practical compromises.

Practical Compromises for Real Projects

Rather than abandoning vertical rhythm entirely when faced with its web-specific challenges, experienced design system practitioners work with the following practical approaches.

Aim for rhythm, not perfection. Set your baseline unit, define all margin and padding in multiples of it, and accept that heading line-heights and embedded content will occasionally fall off-grid. The overall effect — consistent spacing, predictable intervals between content sections — is valuable even if individual elements are not pixel-perfectly aligned to the baseline.

Use rem for everything. Define the baseline unit in rem so it scales with user font size preferences. All margins, paddings, and line-heights in rem ensures that when a user adjusts their browser's base font size, all spacing adjusts proportionally.

:root {
  --baseline: 1.5rem; /* 24px at 16px base, 30px at 20px base */
}

h2 {
  margin-top: calc(var(--baseline) * 2);    /* 48px, or 2 × user's baseline */
  margin-bottom: var(--baseline);
}

Use a 4px or 8px micro-grid. Instead of aligning to the full baseline unit, align to a spatial micro-grid (4px or 8px) that is a factor of the baseline unit. With a 24px baseline, an 8px micro-grid (a divisor of 24) gives you sub-baseline alignment options without destroying the larger rhythm. IBM Carbon's 4px grid and 8px spatial system works this way.

Cap-height correction for headings. The perceived "top" of text in a layout is the cap-height (the height of capital letters), not the ascender. CSS's line-height distributes space symmetrically around the full ascender/descender range, creating apparent extra space above capital letters. Tools like Capsize generate CSS that trims this excess space, allowing precise cap-height-to-baseline alignment that is otherwise impossible with standard CSS.

/* Capsize-style cap-height correction (tool-generated values) */
.heading::before {
  content: '';
  display: block;
  margin-bottom: -0.1792em; /* font-specific value from Capsize */
}
.heading::after {
  content: '';
  display: block;
  margin-top: -0.2208em; /* font-specific value from Capsize */
}

Use Baseline Grid overlays during development. Browser extensions and design tool overlays that render the baseline grid make it practical to spot-check alignment during development. These are particularly useful in Storybook — a baseline grid story for your typography component lets developers verify alignment visually as the system evolves.

Prioritize rhythm in text-heavy components. Focus baseline alignment effort where it matters most: editorial content, documentation, blog posts, long-form product descriptions. In complex UI components with mixed content — cards with images, form fields, data tables — perfect baseline alignment is less achievable and less visually important than overall spacing consistency.

Vertical rhythm is ultimately a heuristic, not a specification. A layout where the eye flows smoothly down the page with comfortable, consistent spacing intervals is exhibiting good vertical rhythm even if a pixel-level measurement reveals imperfect baseline alignment. Design for the reader's experience, use the math as a guide, and accept that the web's rendering model will occasionally require pragmatic compromises.