Generate a harmonious fluid type scale from a base size and modular ratio. Preview sizes with real text. Export as CSS custom properties or Tailwind config.
Open Typography Scale Generator → free, no sign-inA consistent typographic scale — where each heading size follows a mathematical ratio from the base size — is the foundation of readable, harmonious design. The Typography Scale Generator takes a base size and scale ratio, computes all the font sizes, and shows them with real text previews. Export as CSS custom properties or a Tailwind config for immediate use.
Designers building design systems, developers implementing typographic scales for web projects, anyone setting up a new site's typography who wants a mathematically harmonious size progression.
No tutorials. No learning curve. Open it and get started.
No server uploads. Real text previews at each scale step — so you see how the scale looks with actual characters, not just numbers.
Completely free. No trial period. No premium tier for basic functionality. No account required. Use it as often as you need.
One job, done well. Typography Scale Generator was built to solve a specific problem cleanly. No feature bloat, no ads, no distractions.
What is a modular scale?
A sequence of font sizes where each size is the previous multiplied by a fixed ratio — creating mathematical harmony across the type scale.
What is the Major Third ratio?
1.25 — multiplying each size by 1.25 gives: 16, 20, 25, 31.25... A gentle, readable scale.
What is the Golden Ratio?
1.618 — a more dramatic scale with bigger jumps between sizes. Used for strong visual hierarchy.
Should I use fluid typography?
Fluid type scales (using clamp()) scale between screen sizes. This generator provides fixed sizes — clamp values can be derived from the output.
How many steps do I need?
Typically 5-8 steps cover xs through 4xl in a complete design system.
Free. Instant. No sign-in. Open it and get the job done.
Open Typography Scale Generator on Doathingy.com →