This guide demonstrates the correct margin specifications between headings and various content elements. Each example shows the exact pixel measurements to maintain proper visual hierarchy and readability.

When headings appear consecutively without intervening content, maintain a 32px margin between them. This spacing preserves the hierarchical relationship while providing clear visual separation.

This paragraph appears 24px below the heading. The spacing is close enough to show the paragraph belongs to this heading, while still providing adequate separation for readability. The 24px space creates a natural visual connection without crowding the content.

This paragraph precedes a heading. When a heading follows a paragraph (or any content), we use a larger 40px margin to indicate the start of a new section or topic. This creates a stronger visual break in the content flow.

• This list appears 24px below the heading

• Each list item has 12px spacing between items

• The heading-to-list spacing matches the heading-to-paragraph spacing

• This creates consistency in the document's vertical rhythm

• This is the final item in a list that precedes a heading

• When any content (including lists) comes before a heading

• We use a 40px margin to create a clear section break

javascript// This code block appears 24px below the heading
function calculateSpacing() {
  const baseUnit = 8;
  const headingToContent = baseUnit * 3; // 24px
  const contentToHeading = baseUnit * 5; // 40px
  
  return { headingToContent, contentToHeading };
}

css/* This code block precedes a heading */
.heading-margins {
  margin-top: 40px;
  margin-bottom: 24px;
}

ElementSpacing AboveSpacing BelowHeading 140px (from content)24px (to content)Heading 240px (from content)24px (to content)Heading 340px (from content)24px (to content)

Content TypeMargin to HeadingParagraph40pxList40pxCode Block40pxImage40pxTable40px

Paragraph on Warpcast

Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup

Farcaster

Paragraph on Warpcast

Warm up with a delicious spicy Italian chicken sausage and barley soup! This hearty recipe from @galazio combines sausage, fresh veggies, and a smooth, creamy texture thanks to a perfectly tempered egg. Perfect for cozy nights in your kitchen! Check out the full blog post for details. https://paragraph.com/@galazio/spicy-italian-chicken-sausage-and-barley-soup

Farcaster

This visual guide demonstrates all heading margin specifications within our typography system:

1. Title to Subtitle: 16px (tight relationship)

2. Subtitle to Content: 40px (clear separation)

3. Between Headings: 32px (hierarchical relationship)

4. Heading to Content: 24px (section connection)

5. Content to Heading: 40px (section separation)

Consistent application of these margin specifications creates a harmonious reading experience with clear content hierarchy and improved readability.