Typography Scale Calculator
Create a fluid or modular typography scale from a base size and ratio. See live preview and copy the CSS.
How to use the Typography Scale Calculator
Choose a base font size and a ratio.
Preview each scale step at actual size.
Copy the generated CSS or config.
What is a type scale?
A typography scale is a sequence of font sizes that follow a consistent ratio — like the Major Third (1.25), Perfect Fourth (1.333), or Golden Ratio (1.618). Using a mathematical scale creates visual harmony and saves you from choosing arbitrary sizes. This tool generates the scale, shows each step rendered at size, and outputs ready-to-use CSS.
Key features
- 8 preset ratios plus custom ratio input
- Live preview of each scale step at its actual size
- Copy as CSS custom properties, Tailwind config, or SCSS
- Adjustable base size (px or rem)
Frequently asked questions
Which ratio should I choose?
Major Third (1.25) works for most sites. Perfect Fourth (1.333) for more contrast. Golden Ratio (1.618) for dramatic headlines.
Should I use px or rem?
rem is generally recommended for accessibility — it respects the user's browser font size settings.
Is my design saved?
No. Everything runs locally in your browser.