Typography Scale Generator
Generate a modular typography scale from a base font size and a ratio. Pick a classic ratio (minor third, perfect fourth, golden ratio…) and the number of steps above and below base — then copy the scale as CSS variables, a Tailwind config snippet or SCSS variables.
How to use
- 1
Set the base size
Enter your body text size in pixels (typically 16 px). The scale is anchored to this value as the `base` step.
- 2
Choose a ratio
Pick a classic typographic ratio. The minor third (1.125) gives subtle steps for UI, the golden ratio (1.618) gives dramatic display sizes.
- 3
Choose steps above and below
Use the sliders to set how many scale steps you want above and below base. Names follow the Tailwind convention (xs, sm, base, lg, xl, 2xl…).
- 4
Copy in your favourite format
Switch tabs to view the scale as CSS custom properties, a Tailwind config snippet or SCSS variables, then copy.
Common use cases
- Build a design-system type scale anchored to a single ratio.
- Generate consistent heading sizes (h1–h6) from one base value.
- Ship a Tailwind theme extension without hand-typing every size.
- Document a typography system with both px and rem values.
Limitations
- Line-heights are not generated — pair each size with an appropriate line-height for body vs. display usage.
- The scale is purely multiplicative; fluid typography (clamp) is not generated here.
- Names follow Tailwind convention and stop at 10xl/6xs; requesting more steps produces numeric fallbacks.