Type Scale Generator
Build a balanced type scale from your base size and ratio, preview every step at its real rendered size, and copy the CSS variables. Free, no signup needed.
Free, no signup needed. Runs 100% in your browser.
Loading…
How to use this tool
- Set your base size and pick a ratio.
- Choose how many steps go up and down.
- Copy the CSS variables into your stylesheet.
Frequently asked questions
Which ratio should I pick?
Start with 1.25 for a balanced look. Use 1.125 for quiet interfaces and 1.333 or 1.5 for bold marketing headlines.
Are the rem values based on 16px?
Yes. Rem values divide by a 16 pixel root, so they scale correctly if users change their default font size.
Is it free?
Yes, free with no signup.
Related tools
Need a website for this?
Describe your idea once and BYOB plans, builds, and deploys your site.
Embed this tool
Paste this snippet to show this tool on your own site.