How to pick a type scale ratio that matches brand personality
- Step 1Soft scales (1.067–1.2) — Minor Second through Minor Third. Small differences between sizes; reading-focused. Examples: medium articles, Stripe documentation, technical blogs. Body text dominates; headings are subtle.
- Step 2Mid scales (1.25–1.414) — Major Third through Augmented Fourth. Clear visual hierarchy; balanced. Examples: most SaaS landing pages, marketing sites, modern e-commerce. Default choice for most designs.
- Step 3Dramatic scales (1.5–1.618) — Perfect Fifth, Golden Ratio. Strong visual hierarchy; headlines dominate. Examples: editorial sites, luxury brands, design agency portfolios. Body recedes; display typography is the star.
Frequently asked questions
Can I change ratios mid-design-system?+
Yes but expect rework — every typography decision recomputes. Best to pick a ratio early and stick with it. The Hybrid approach (modular base + arbitrary overrides) gives flexibility without commitment.
What if the ratio gives unusable sizes?+
Round to nearest pixel after computing. Major Third × 16 base step 4 = 39.0625px → round to 39px. Pixel-level rounding doesn't break the scale; the harmony remains.
Should I match my competitor's ratio?+
Generally no — distinctive type scales are part of brand identity. If every competitor uses Major Third, picking Perfect Fifth makes your typography feel different at a glance. Differentiation matters.
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.