Typography Scale Calculator
Generate a modular type scale with named ratios. Preview heading hierarchy, copy CSS custom properties or Tailwind config.
:root {
--fs-h6: 21.3px;
--fs-h5: 28.4px;
--fs-h4: 37.9px;
--fs-h3: 50.5px;
--fs-h2: 67.3px;
--fs-h1: 89.8px;
--fs-body: 16px;
--fs-small: 12px;
--fs-xsmall: 9px;
}This is body text at 16px. Typography scales create a consistent visual hierarchy that guides readers through your content. Good typographic rhythm makes interfaces feel polished and professional.
Small text at 12px for captions, labels, and secondary information.
Extra small text at 9px for fine print, timestamps, and legal notices.
How to use this tool
- 1Set your base size
Enter your body text size in pixels. The default is 16px, which is the browser default and works well for most sites.
- 2Choose a scale ratio
Pick a named ratio from the dropdown or enter a custom value. The preview updates live so you can compare ratios instantly.
- 3Copy the code
Switch between CSS custom properties and Tailwind config, choose your preferred unit (px, rem, em), and copy with one click.
Why use a typography scale?
Visual harmony
A mathematically derived scale creates consistent size relationships between text elements. This produces a natural visual rhythm that makes interfaces feel polished and intentional.
Faster design decisions
Instead of picking arbitrary font sizes for every element, a scale gives you a defined set of sizes to choose from. This eliminates guesswork and speeds up both design and development.
Easy to maintain
CSS custom properties from a scale mean you can adjust your entire typography system by changing the base size or ratio. Every heading, body, and caption size updates automatically.
Get GEO & AEO tips every week
The Layman SEO newsletter. Plain English updates on what is changing in search - SEO, AEO, and GEO - and what to do about it. One email a week. Unsubscribe any time.
No spam. No paywall content. Unsubscribe with one click.