Modular Typography Scale Calculator
Generate a modular type scale from a base size, a ratio and the number of steps — the backbone of any design-system typography token set.
How to Use the Modular Typography Scale Calculator
- Enter the base font size in px.
- Pick a modular ratio.
- Choose the maximum step to generate.
- Click Calculate to see the comma-separated list.
Cas d'utilisation
- •Creating typography tokens.
- •Designing brand style guides.
- •Rebuilding Figma text styles in code.
Formule
size(step) = base × ratio^step. Step 0 returns the base size; higher steps grow exponentially.
Questions fréquemment posées
Which ratio should I use?
Tighter ratios (1.125, 1.200) give subtle hierarchy suited to dense UI. Wider ratios (1.414, 1.500) create dramatic editorial contrast. 1.250 is a safe web default.
Should I round to whole pixels?
Rem-based scales can keep fractional values; px tokens are usually rounded to 0.5 px or whole pixels for rendering fidelity.
Is this the same as Tailwind's scale?
No — Tailwind uses hand-tuned stops rather than a pure modular scale. Use this calculator to generate an alternative scale when you need a custom brand.