Type Scale Generator
Build a modular type scale from one base size and a ratio, see every step at its real size, and export as CSS variables or Tailwind config.
Build a modular type scale from one base size and a ratio, and see every step rendered at its real size.
Scale
A modular scale multiplies by the same ratio at every step, which is what makes the sizes feel related rather than arbitrary. A larger ratio gives more drama and fewer usable steps: at 1.25 the jump from base to the next size up is 25 percent.
:root {
--text-xs: 10px;
--text-sm: 13px;
--text-base: 16px;
--text-lg: 20px;
--text-xl: 25px;
--text-2xl: 31px;
--text-3xl: 39px;
--text-4xl: 49px;
--text-5xl: 61px;
}About the type scale generator
Font sizes picked one at a time end up almost the same as each other, which reads as unresolved rather than deliberate. A modular scale fixes that by multiplying by a fixed ratio at each step, so the relationships are consistent and every size has a reason to exist.
The ratio is the whole decision. A small one gives many closely spaced sizes, which suits an interface with a lot of labels. A large one gives drama and few usable steps, which suits a landing page and rarely suits a dashboard.
How to use it
- 1Set your base size, usually 16px for body text.
- 2Pick a ratio and watch every step redraw.
- 3Set how many steps you need above and below.
- 4Copy as CSS variables, rem values or a Tailwind config.
Questions
Which ratio should I use?
1.2 or 1.25 for an interface, where you need several close sizes. 1.333 or 1.5 for editorial and landing pages, where contrast between heading and body is the point. The golden ratio grows fastest and gets unusable quickest.
Should I use px or rem?
rem, because it respects the reader's browser font size setting, which is an accessibility requirement. Both are given here; the px values are shown so you can see what they mean at default settings.
Why round to whole pixels?
Fractional sizes render inconsistently across browsers and produce slightly different line heights. Rounding keeps the scale predictable, at the cost of the ratio no longer being exact.
How many steps do I need?
Most interfaces use six or seven. If you find yourself needing more, the ratio is probably too small and neighbouring sizes are not doing distinct jobs.