Skip to content
Aa

Typography Scale Generator

Build modular type scales and CSS.

4xl48.828px / 1.548.828px · n=5

The quick brown fox jumps

3xl39.063px / 1.539.063px · n=4

The quick brown fox jumps

2xl31.25px / 1.531.25px · n=3

The quick brown fox jumps

xl25px / 1.525px · n=2

The quick brown fox jumps

lg20px / 1.520px · n=1

The quick brown fox jumps

base16px / 1.516px · n=0

The quick brown fox jumps

sm12.8px / 1.512.8px · n=-1

The quick brown fox jumps

xs10.24px / 1.510.24px · n=-2

The quick brown fox jumps

:root {
  --text-4xl: 48.828px;
  --text-4xl-lh: 1.5;
  --text-3xl: 39.063px;
  --text-3xl-lh: 1.5;
  --text-2xl: 31.25px;
  --text-2xl-lh: 1.5;
  --text-xl: 25px;
  --text-xl-lh: 1.5;
  --text-lg: 20px;
  --text-lg-lh: 1.5;
  --text-base: 16px;
  --text-base-lh: 1.5;
  --text-sm: 12.8px;
  --text-sm-lh: 1.5;
  --text-xs: 10.24px;
  --text-xs-lh: 1.5;
}

.text-4xl {
  font-size: var(--text-4xl);
  line-height: var(--text-4xl-lh, 1.5);
}

.text-3xl {
  font-size: var(--text-3xl);
  line-height: var(--text-3xl-lh, 1.5);
}

.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--text-2xl-lh, 1.5);
}

.text-xl {
  font-size: var(--text-xl);
  line-height: var(--text-xl-lh, 1.5);
}

.text-lg {
  font-size: var(--text-lg);
  line-height: var(--text-lg-lh, 1.5);
}

.text-base {
  font-size: var(--text-base);
  line-height: var(--text-base-lh, 1.5);
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh, 1.5);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--text-xs-lh, 1.5);
}

About Typography Scale Generator

A typography scale generator designs a ladder of font sizes by raising a base size to successive powers of a modular ratio—from captions through display headings. toco.tools ships classic interval presets (minor second through golden ratio), custom ratios, up/down steps, px or rem, T-shirt / HTML / numeric naming, and optional line-height, with a live specimen preview. Export CSS custom properties, utility classes, a Tailwind fontSize snippet, or an SCSS map. Everything runs in your browser; nothing is uploaded.

How to use

  1. Pick a ratio preset or enter a custom ratio
  2. Tune base size, steps, and unit
  3. Preview the scale and copy the CSS

FAQ

What is a modular type scale?

A harmonious ladder of sizes made by repeatedly multiplying a base by a fixed ratio—each step is base × ratio^n.

Which ratio should I choose?

For body-heavy UI, 1.125–1.25 (major second / third) is common; for dramatic headings try 1.333–1.618 (fourth through golden).

px vs rem?

px is absolute; rem is relative to the root font size. rem is usually better for accessibility and scaling. Switching units converts the base for you.

Are settings sent externally?

No. All processing runs in your browser.