Vertical Rhythm and Baseline Grids: Worth It on the Web?

A page can have attractive type and still feel unsettled. Paragraph gaps drift, headings appear disconnected from their sections, and adjacent columns seem to follow different beats. Vertical rhythm addresses those relationships. A baseline grid is one possible technique, not the definition of good rhythm and certainly not a requirement for readable web text.

Separate rhythm from exact baseline alignment

Vertical rhythm is the repeated relationship between line spacing and the spaces surrounding blocks. A baseline grid is a set of horizontal reference lines to which text baselines align. You can establish consistent paragraph spacing without forcing every caption, heading, and button onto those lines.

Start with a representative paragraph at your intended reading size. If that is 18px with a 28px line box, use the px-to-rem converter to translate those measurements against your actual root size. At a 16px root, they become 1.125rem and 1.75rem. The converter helps document proportions; it does not prove baseline alignment.

This distinction matters because browsers distribute leading around font metrics. Two fonts with identical CSS sizes and line heights can place their visible letters differently within their boxes. Equal box heights therefore do not guarantee equal first baselines. Treat the grid as an inspection aid rather than a promise made by a spacing token.

Choose the amount of structure the page needs

Strict alignment is most useful when readers compare neighboring streams of text: an editorial spread, a multi-column index, or repeated summaries with similar content. Even there, ask whether the baselines themselves improve comparison or whether aligned block starts provide enough structure.

For an article with one reading column, a spacing cadence usually delivers more value. Readers need clear transitions between paragraphs, headings, figures, and quotations. They rarely benefit from a figure caption forcing the following paragraph downward just to recover an invisible grid.

Try a small increment such as 4px at the default root size. A 28px body line, 16px paragraph gap, and 32px section gap all relate to that increment without pretending that every line shares one baseline. These are starting values, not universal proportions. A compact interface may need a different cadence from a literary essay.

Use the responsive container guide alongside this decision. Narrower measures create more line breaks, changing block heights even when every spacing value stays constant. Judge rhythm with actual text at realistic widths, not empty rectangles in a design file.

Build a forgiving CSS starting point

Keep unitless line height for running text so descendants calculate leading from their own font size. MDN explains the inheritance behavior in its line-height reference. Use explicit component rules where headings need different proportions.

The following recipe establishes related intervals without claiming perfect baseline locking. It assumes the reading container has the class shown and its headings and paragraphs are direct children.

.reading {
--step: 0.25rem;
font-size: 1.125rem;
line-height: 1.5556;
}

.reading > * {
margin-block: 0;
}

.reading > * + * {
margin-block-start: calc(var(--step) * 4);
}

.reading > h2 {
margin-block-start: calc(var(--step) * 8);
font-size: 1.75rem;
line-height: 1.25;
}

.reading > h2 + * {
margin-block-start: calc(var(--step) * 3);
}

The body line box is approximately 28px at a 16px root. The heading line box is 35px, intentionally outside the four-pixel cadence. That is acceptable: the rule organizes relationships rather than quantizing every height. If exact increments materially improve a specific layout, choose a heading line height of 2.25rem and inspect the result instead of automatically tightening it.

Keep the heading-to-content gap smaller than the space above the heading. That visual association often contributes more to comprehension than a mathematically perfect baseline interval. The relative units guide provides more context for choosing rem and em values without confusing their reference sizes.

Account for the things that break grids

Mixed fonts introduce different ascenders, descenders, and internal leading. Inline code may appear unusually tall or low. Superscripts, mathematical notation, and replaced elements can influence line boxes. A heading that wraps into three lines also changes the rhythm below it, even if its single-line version looked perfect.

Images and embeds bring arbitrary heights. Rounding an image container up to the next grid line can create unexplained whitespace, while cropping it to fit can damage the content. Prefer content integrity over invisible geometric neatness. Give figures predictable exterior spacing and let their internal height remain natural.

At narrow widths, inspect how many heading lines appear and whether the spacing still signals a new section. If heading sizes vary continuously, use the fluid typography guide to understand the resulting size range before choosing leading. Fluid sizes and a fixed baseline interval will not remain exact partners across every width.

User preferences are another deliberate source of variation. The W3C text spacing guidance describes spacing overrides that content must accommodate without loss. A design that collapses when line height or paragraph spacing increases is too fragile, regardless of how precisely its default grid aligns.

Decide with a repeatable visual test

Create a test article containing a short introduction, a long paragraph, a two-line heading, a list, a figure caption, and inline code. Compare a loose spacing system with a strict grid using the same content. Hide any grid overlay before deciding which version reads better.

For multi-column work, inspect the first baseline separately from later baselines. Flex or grid baseline alignment can align text within a shared row, but it does not establish a document-wide baseline lattice. MDN's box alignment overview helps distinguish those capabilities.

Test at a narrow phone width, a medium window, and your maximum reading measure. Increase browser zoom, enlarge the default text size, and substitute a fallback font. Look for clipped descenders, awkward gaps after wrapped headings, and captions that seem attached to the wrong image.

Record exceptions as intentional rules: captions use tighter leading, code blocks keep their own rhythm, and section headings get more space above than below. Optical consistency should be the acceptance criterion. If maintaining exact alignment requires repeated offsets or content-specific heights, retire that constraint and preserve the simpler spacing relationships instead.

Key takeaways

• Use rhythm to organize reading; reserve exact grids for layouts that visibly benefit.
• Choose body leading before deriving paragraph and section intervals.
• Do not confuse equal line boxes with matching font baselines.
• Let images, wrapped headings, and user spacing preferences break rigid alignment.
• Validate the finished page without the grid overlay, using real content and multiple widths.