FREE TOOL · NO AI · CSS + TAILWIND
Typography Scale Generator
Pick a base size and ratio. Get a complete type scale with CSS custom properties, Tailwind fontSize config, and a live preview of every step.
Typography Scale Generator
Harmonious type scales in one click.
:root {
--text-2xs: 0.48rem;
--text-xs: 0.58rem;
--text-sm: 0.69rem;
--text-base: 0.83rem;
--text-md: 1.00rem;
--text-lg: 1.20rem;
--text-xl: 1.44rem;
--text-2xl: 1.73rem;
--text-3xl: 2.07rem;
--text-4xl: 2.49rem;
}What you get
Complete scale
Every step from 3xs to 6xl, calculated from your base size and chosen ratio.
CSS custom properties
`--text-base`, `--text-lg`, `--text-2xl`… ready to paste into your `:root`.
Tailwind fontSize config
Drop-in `fontSize` block for your `tailwind.config.ts` or CSS `@theme` block.
How it works
Set your base size
Enter your body text size (default 16px). This is the anchor for your entire scale.
Choose a ratio
Pick from 8 standard ratios: Minor Second through Golden Ratio.
Copy your scale
Get the full scale as CSS custom properties or Tailwind fontSize config.
Why use this
Math-perfect, not arbitrary
Every step calculated from a single ratio. No eyeballing. No "18px feels about right."
Works for any CSS system
Output works in vanilla CSS, Tailwind v4 CSS-first config, or any design token system.