Typography Scale Generator
Set a base size and ratio to build a harmonious modular type scale, previewed live and exported as rem-based CSS variables.
Type sizes that feel intentional
When heading sizes are picked one at a time, the result often looks slightly random — an h2 that's barely larger than the h3, an h1 that overpowers everything. A modular scale solves this by deriving every size from one base and a single ratio, so each step relates proportionally to the next. This generator builds that scale, names the steps, and previews real text at each size.
Pick a base of 16px for comfortable body text, then choose a ratio: gentle ratios like 1.2 suit dense, information-rich interfaces, while 1.333 or higher give editorial designs bold contrast. The output is a set of rem-based CSS variables that respect users' browser font settings — copy them straight into your stylesheet.
Copy-ready CSS
Generated live in your browser — nothing is uploaded.
Frequently Asked Questions
What is a modular type scale?
A modular scale sets font sizes by multiplying a base size by a fixed ratio for each step up, and dividing for each step down. It creates harmonious, proportional heading sizes instead of arbitrary numbers.
What ratio should I use?
Common ratios include 1.2 (minor third), 1.25 (major third), and 1.333 (perfect fourth). Larger ratios create more dramatic contrast between headings and body text.
Why output rem instead of px?
rem units scale with the user’s root font size, which respects browser accessibility settings. The tool shows both, but rem is recommended for the final CSS.
Is this tool free and private?
Yes. The scale is generated in your browser — no sign-up and nothing uploaded.
Want a complete type system and design language? Let’s build it.