Typography Scale Generator
Create harmonious type scales using mathematical ratios. Visualize, compare, and export as CSS, SCSS, Tailwind, or custom properties.
Configuration
Select a preset ratio or enter a custom value. Each ratio creates a different visual hierarchy.
Scale Preview
See how each heading level, body text, and smaller sizes relate to one another at the chosen ratio.
Visual Ruler
Bar widths represent the relative size of each level in your type scale.
Compare Ratios
See how different ratios produce different heading sizes at a glance. Click a card to apply that ratio.
Scale Table
Full numeric breakdown of each scale level with recommended line heights.
| Element | Size (px) | Size (rem) | Size (em) | Line Height | Multiplier |
|---|
When to Use Each Ratio
Minor Second (1.067)
Very subtle differences between levels. Works well for dense UIs, data dashboards, and applications where space is limited.
Major Third (1.25)
A balanced, versatile ratio ideal for desktop body copy. Provides clear hierarchy without excessive contrast between heading levels.
Perfect Fourth (1.333)
The most popular default for web typography. Strong enough hierarchy for marketing pages while remaining practical for content-heavy sites.
Golden Ratio (1.618)
Dramatic and expressive. Best for hero sections, landing pages, and editorial layouts where large headings create visual impact.
Export Code
Choose your format and copy the generated code directly into your project.
Unlock the Full Design Toolkit
Get 100+ premium tools, templates, and automation workflows in one bundle.