UI/UX · Free online tool
Typography Scale
Generate harmonious heading and body type sizes from a base font size and modular ratio.
✓ Free to use↓ Export ready
Live preview
Preparing your preview...
Export to your stack
Copy or downloadoutput.css
Different technologies support different asset types. Generated snippets are editable starting points.
ABOUT THIS TOOL
What can you create with Typography Scale?
Create a type hierarchy for landing pages, dashboards and mobile apps.
How to use Typography Scale
Set your base size and ratio, compare heading levels, and export custom properties or theme values.
Design tips and limitations
Typography quality also depends on typeface, line height, language and available content width.
Built for a practical design workflow
ColorPremise keeps the creative controls next to the preview and export options. Try a variation, compare the result visually, and then bring the output into your own website, app, or design project. You can always return to the free design tool directory to continue refining related details.