modular-scale-typographylisted

# 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 Starting from `base = 16px`, ratio `1.25`: | Step | Formula | Value | Rounded | Role | |---|---|---|---|---| | -2 | 16 ÷ 1.25² | 10.24px | 10px | Caption, label-xs | | -1 | 16 ÷ 1.25 | 12.80px | 13px | Label, small | | 0 | 16 | 16px