Vertical Rhythm Test Page

First Child Tests

This heading above is the first child of the container. It should have no top margin. This paragraph follows it directly.

Consecutive Headings

An H3 Immediately After H2

The two headings above should have tighter spacing between them (subheading pattern). This paragraph follows normally.

Another Section

H4 After H3

H5 After H4

H6 After H5

That was a cascade of consecutive headings. They should all be tightly spaced.

Section Breaks

When a major heading (H1 or H2) follows content like this paragraph, there should be extra space above it to create a clear section break.

New Major Section

The H2 above should have significant breathing room from the preceding paragraph. This creates visual separation between major sections.

Here is another paragraph of content before an H3.

Minor Section Break

The H3 above should also have extra space, but less than an H2. It signals a subsection rather than a new major topic.

And one more paragraph before testing H4.

H4 After Paragraph

H4 headings should have standard heading margin, no special section break treatment.

Prose Element Spacing

First paragraph after the heading. Standard spacing.

Second paragraph. There should be consistent spacing between paragraphs.

Third paragraph. Not too tight, not too loose.

A blockquote should have appropriate spacing from the surrounding paragraphs.

Paragraph after blockquote.

A multi-paragraph blockquote starts here.

This is the second paragraph inside the blockquote.

Paragraph after the multi-paragraph blockquote.

Lists

Lists should have appropriate spacing from surrounding content.

Unordered List

• First item
• Second item
• Third item with nested list
  • Nested item one
  • Nested item two
  • Nested item with deeper nesting
    • Deeply nested
    • Another deep item
• Fourth item back at top level

Paragraph after unordered list.

Ordered List

1. Step one
2. Step two
3. Step three with substeps
   1. Substep A
   2. Substep B
   3. Substep C with more detail
      1. Detail i
      2. Detail ii
4. Step four

Paragraph after ordered list.

Horizontal Rule Spacing

This paragraph comes before a horizontal rule.

This paragraph comes after a horizontal rule. The HR should have symmetrical spacing.

Heading After HR

The heading above follows an HR. Should have appropriate section break spacing.

Table Spacing

Tables should integrate naturally with surrounding prose.

Paragraph after table.

Details Element

The details element should space like other block elements.

Paragraph after details.

Figure Spacing

Figures (images with captions) should integrate with prose rhythm.

Paragraph after figure.

Code Block Spacing

Preformatted code blocks should have appropriate vertical spacing.

function example() {
  // Returns a greeting
  console.log('Hello, world!');
}

Paragraph after code block.

// Another code block
const spacing = '--space-s';

Realistic Mixed Content

This section tests how various elements work together in realistic content. Good typography is invisible—when text is set well, readers absorb content without noticing the spacing.

A Subsection

Consider the following points about vertical rhythm:

• Consistent spacing creates visual harmony
• Section breaks guide the reader's eye
• First-child handling prevents awkward gaps

These principles apply whether you're writing documentation, blog posts, or technical specifications.

"The details are not the details. They make the design."

After this quote, we continue with normal prose. The blockquote should feel like a natural pause in the text, not a jarring interruption.

Another Subsection

With a Sub-subsection

When headings follow each other, they form a hierarchy. The tighter spacing between consecutive headings signals that they're related.

Final Section

This H2 follows a paragraph, so it should have full section break spacing. It signals a major topic change.

And we end with a normal paragraph to test the overall visual rhythm of the page.