Toolkit / Color & Design Tools
Typography Scale Generator
Create a modular typography scale for headings, body text, captions, and interface labels.
Privacy note: Design inputs are processed in your browser, so you can test colors, gradients, and CSS values quickly.
Limitations: A mathematical scale is a starting point, not a complete typography system.
Typography Scale Generator
Create a modular type scale with px and rem values.
How typography scale generator works
Choose a base font size and scale ratio, then copy the generated sizes or CSS variables.
Use the scale to keep type sizes consistent across a website or app.
Privacy
Design inputs are processed in your browser, so you can test colors, gradients, and CSS values quickly.
Limitations
- A mathematical scale is a starting point, not a complete typography system.
- Different fonts can feel larger or smaller at the same pixel size.
- Line height, spacing, viewport behavior, and content density still need design review.
FAQs
What is a typography scale?
It is a set of related font sizes based on a base size and ratio.
What ratio should I use?
Smaller ratios feel more restrained for apps, while larger ratios create stronger editorial contrast.
Can I use this with CSS variables?
Yes. Copy the generated variables into your stylesheet or design token system.
Does this choose fonts for me?
No. It creates sizes; font choice and hierarchy still need design judgment.