Typography Scale Calculator
Generate a modular typography scale from any base size and ratio. Get px, rem, and copy-ready CSS custom properties for every step.
How to use
- Choose a base font size (16px is standard).
- Select a ratio. 1.25 (Major Third) suits most interfaces.
- Copy the CSS custom properties block into your stylesheet.
Frequently asked questions
What is a modular typography scale?
A series of font sizes generated by multiplying a base size by a consistent ratio. It creates visual rhythm and hierarchy.
Which ratio should I choose?
1.25 for interfaces, 1.333 for editorial, 1.5 for marketing, 1.618 for dramatic contrast. Lower ratios for dense content.
Should I use rem or px for scales?
rem — it respects user preferences and scales when the root font-size changes.