Type Scale Generator
Generate a modular type scale from a base size and ratio, preview every step with your own text and copy the sizes as CSS variables in px or rem.
Free · No upload · 100% on your device
How to use Type Scale Generator
- Choose the settings in the side panel.
- The result updates instantly. Select “Update” for a fresh one.
- Copy the result or download it.
Private by design. Everything you type, open or record is processed in this browser tab and is never uploaded to KittySuite.
About Type Scale Generator
Each step is the previous size multiplied by the ratio. Smaller ratios such as 1.2 suit dense interfaces; larger ones such as 1.5 suit editorial pages with big headlines. Names follow the xs to 9xl pattern used by Tailwind and many design systems.
Everything is calculated in this browser tab and nothing you enter is sent anywhere. It keeps working offline once the page has loaded.
Type Scale Generator: frequently asked questions
How do I make a type scale?
Choose a base size and a ratio. Each step is the previous size multiplied by the ratio, previewed with your own text.
Which ratio should I choose?
Smaller ratios such as 1.2 suit dense interfaces; larger ones such as 1.5 suit editorial pages with big headlines.
Can I copy the sizes as CSS?
Yes. Copy them as CSS variables in rem or px, named from xs to 9xl.
How many steps are generated?
You choose up to 10 steps up and 5 down from the base.