How to named modular ratios for typography
- Step 1Subtle: 1.067 (Minor Second), 1.125 (Major Second) — Gentle, reading-focused. 16px base produces 16, 17.07, 18.20, 19.41 (Minor Second). Visual hierarchy is whisper-quiet; body text dominates.
- Step 2Common: 1.2 (Minor Third), 1.25 (Major Third), 1.333 (Perfect Fourth), 1.414 (Augmented Fourth) — Balanced and clear. Major Third (1.25) is the modern default — works for body text and headlines simultaneously. Most SaaS uses this range.
- Step 3Dramatic: 1.5 (Perfect Fifth), 1.618 (Golden Ratio) — Editorial, luxury, headline-focused. 16px × 1.618^4 = 109.5px. Body text recedes; typography is the design centerpiece.
Frequently asked questions
Why musical-interval names?+
Historical — typographers borrowed the names from music theory because both deal with harmonious ratios. The relationships in music (perfect fifth = 3:2 frequency ratio) translate to visual harmony in typography.
Can I use non-standard ratios?+
Yes — any positive number works. Common bespoke ratios: 1.15 (between Minor Second and Major Second), 1.4 (between Augmented Fourth and Perfect Fifth). The Type Scale Builder accepts arbitrary numeric inputs.
What's the most-used ratio in 2026?+
Major Third (1.25) — dominant in modern design systems including Tailwind's text-* defaults. Second most common: Minor Third (1.2) for content-heavy sites. Both produce clear, balanced hierarchy.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.