baseline-rhythm

name	baseline-rhythm
description	Use when establishing vertical rhythm. Baseline rhythm aligns text to invisible horizontal grid; gives consistency.

Baseline Rhythm

Baseline grid = vertical rhythm. Every text element snaps to invisible horizontal lines (usually 4px or 8px). The page feels composed not patched.

Setting up baseline

1. Pick base unit (4px or 8px most common)
2. Body text leading = base unit × 6 (24px for 4px base)
3. Headings round to multiples of base
4. Padding/margins all multiples of base
5. Images sized to baseline multiples

Result: every horizontal line of text falls on the grid.

CSS baseline implementation

:root {
  --base: 4px;
  --leading-body: calc(var(--base) * 6);  /* 24px */
  --leading-h1: calc(var(--base) * 14);   /* 56px */
}
p { line-height: var(--leading-body); }
h1 { line-height: var(--leading-h1); }
.spacer-2 { padding: calc(var(--base) * 8); }

Tools for verification

1. Browser DevTools rulers
2. Baseline grid overlay (browser extension)
3. Sketch / Figma baseline grid
4. Manual: count from top, divide by 24px → integer?

If elements don't snap, the layout looks slightly off — not broken but uncomposed.

Where this fits in the X3 empire

Foundation rhythm for CardPrepAI typographic layout.