CSS type scale generator — harmonious font sizes from one ratio

How to use the CSS type scale generator

1. Enter the Base size in px, usually your body text size.
2. Choose a Scale ratio, from Minor second (1.067) to Golden ratio (1.618), or Custom to type your own in Custom ratio.
3. Set Steps above base (1–8) for headings and Steps below base (0–3) for small text.
4. Pick the Unit, rem or px, and a Variable prefix.
5. Check the preview lines, then copy the CSS or download type-scale.css.

What it does and when to use it

Choosing heading sizes one by one often ends with sizes that are almost but not quite the same, such as 22px and 24px, which look like mistakes. A type scale gives you a short, consistent set instead. Assign the steps to elements, for example base for paragraphs, xl for h3, 3xl for h1 and sm for captions.

Set the body text style itself with the typography styler, convert other measurements with the px to rem converter, and keep the sizes beside your other tokens using the CSS variables generator.

How it works

Each size is the base times the ratio raised to the step number:

size = base × ratio^step

Steps run from minus “below” to plus “above”. In rem mode, each size is divided by 16 and rounded to four decimals; in px mode it is rounded to two. The variables are written under :root as --<prefix>-<name>. A table lists every step with its exact pixel value. MDN lists var(), which you use to read these variables, as Baseline widely available since April 2017.

Worked examples

The default scale. 16 px base, Major third (1.25), 5 steps up and 2 down:

:root {
  --font-size-xs: 0.64rem;
  --font-size-sm: 0.8rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5625rem;
  --font-size-2xl: 1.9531rem;
  --font-size-3xl: 2.4414rem;
  --font-size-4xl: 3.0518rem;
}

The largest step is 48.828 px.

A short scale in pixels. 16 px, Perfect fifth (1.5), 1 up, 0 down, px: --font-size-base: 16px; and --font-size-lg: 24px;, since 16 × 1.5 = 24.

An 18 px reading site. Minor third (1.2), 3 up, 1 down, prefix text: --text-sm: 0.9375rem; (15 px) up to --text-2xl: 1.944rem; (31.104 px), with --text-xl: 1.62rem; in between. A note explains that the rem values assume the browser’s 16px root.

Limits and tips

• Big ratios grow fast. Golden ratio with 8 steps above a 16 px base passes 750 px; reduce the steps or the ratio.
• Large headings on phones may need smaller steps; use a gentler ratio there with a media query.