Picking heading sizes by eyeballing pixel values rarely produces a harmonious hierarchy. A modular scale — multiplying a base size by a fixed ratio — gives you a mathematically consistent set of sizes instead.
What Is the Type Scale Generator?
Choose a base font size and a classical scale ratio (Major Third, Perfect Fourth, Golden Ratio, and more), and get a full set of heading sizes computed as base × ratio^n, shown live and exported as CSS custom properties.
How to Use It
- Open the tool at /tools/type-scale-generator.
- Set your base font size and pick a scale ratio.
- Adjust how many steps above the base you want.
- Copy the generated
:rootCSS custom properties into your stylesheet.
Key Features
- Seven named classical/musical ratios (Minor Second through Golden Ratio).
- Live preview rendering each step at its actual computed size.
- CSS custom properties output in both px and rem.
- Adjustable step count for taller or shorter hierarchies.
When to Use This Tool
- Establishing a consistent heading hierarchy for a new design system.
- Replacing arbitrary hardcoded heading sizes with a mathematically grounded scale.
- Exploring different visual rhythms by comparing ratios side by side.
Try It Now
Open Type Scale Generator directly, or press ⌘K and type the tool name from anywhere on the site.
Part of the CSS Tools collection on WebdevToolbox — free, browser-based developer tools with no login required.