modular-scale-typography

# Modular Scale Typography Typography feels cohesive when all font sizes are related to each other through a single mathematical ratio. Without a scale, sizes get picked arbitrarily and the result feels visually noisy — headings that don't contrast enough, body text too close in size to captions, labels that blend into content. ## What Is a Modular Scale A modular scale starts from a **base size** and multiplies or divides by a **ratio** to generate every size in the system. ``` size(n) = base × ratio^n ``` Every size is thus a deliberate step away from the base — not a guess. ## Choosing a Ratio | Ratio | Name | Feel | Good for | |---|---|---|---| | 1.067 | Minor Second | Very tight | Dense data UIs, dashboards | | 1.125 | Major Second | Subtle | Long-form reading, editorial | | 1.200 | Minor Third | Balanced | Most UI applications | | 1.250 | Major Third | Clear hierarchy | Marketing, landing pages | | 1.333 | Perfect Fourth | Strong contrast | Display, hero sections | | 1.414 | Augmented Fourth | Dramatic | Portfolios, branding | | 1.500 | Perfect Fifth | Very dramatic | Use sparingly | **Default recommendation:** `1.25` (Major Third) — enough contrast between steps to feel intentional without being theatrical. ## Generating a Scale > **Recover an existing scale, don't reverse-engineer it by hand (dembrandt engine, optional).** If a brand already has type on the web, `get_typography` returns the real font sizes, weights, and line-heights computed off the live DOM...