A scale, not a guess.
Pick a base size and a ratio. Every step multiplies the last by that ratio, so your type never feels arbitrary.
The scale is calculated in the browser. Nothing is uploaded.
What it does
About the Type Scale Generator.
A type scale generator builds a modular set of font sizes by multiplying a base size by a chosen ratio so headings and body type stay related.
Instead of picking 13, 15, 18, and 22 by eye, each step is the previous size times the ratio (for example a major third or perfect fourth). You get a ladder you can drop into tokens or a stylesheet.
How to use
Three steps.
Set
Choose a base size and a modular ratio.
Read
Review the generated steps in the preview.
Copy
Copy the sizes (often in rem) into tokens, CSS, or a type spec.
When to use it
Where it helps.
Use it at the start of a design system, a marketing site, or a SaaS app shell when you need heading levels that feel intentional rather than arbitrary.
FAQ
FAQ.
What is a modular type scale?
It is a sequence of font sizes where each step equals the last step multiplied by a constant ratio. The ratio is what keeps the scale musical instead of random.
Which ratio should I pick?
Minor second and major second stay tight for dense product UI. Perfect fourth and golden ratio jump faster, which suits editorial or marketing heroes. Match the ratio to how many heading levels you actually ship.
Does this tool send my sizes to a server?
No. The scale is calculated in your browser.
How do I copy the scale into CSS?
Copy the rem (or px) values and map them to custom properties such as --fs-h1 through --fs-body, or to your token JSON.
More tools