Recipe
Type Scale
A systematic progression of font sizes that creates visual hierarchy and rhythm across every surface in Meridian.
Fundamentals
A type scale is not a random collection of sizes. It follows a ratio — typically 1.25 (major third) or 1.333 (perfect fourth) — applied multiplicatively from a base size. Meridian uses 16px as the root, scaled by 1.25 for headings and 0.875 for captions.
Scale Table
| Step | Size | Usage |
|---|---|---|
| xs | 12px | Badges, fine print |
| sm | 14px | Captions, metadata |
| base | 16px | Body copy |
| lg | 20px | Lead paragraphs |
| xl | 25px | Section headings |
| 2xl | 31px | Page titles |
Why It Matters
Consistent scaling eliminates guesswork. Every component inherits from the same mathematical foundation, so spacing, line-height, and weight adjustments compound predictably. The result is a UI that feels intentional — never janky or hand-tuned.