Typography Scale Builder

Typography Setup

Choose a body size and hierarchy strength

Body font size

Unit

Hierarchy strength

Quick starts

Type Scale

Heading 1

39px

The quick brown fox

Heading 2

31px

The quick brown fox

Heading 3

25px

The quick brown fox

Lead

20px

The quick brown fox

Body

16px

The quick brown fox

Small

13px

The quick brown fox

Caption

10px

The quick brown fox

Copyable CSS

:root {
  --text-caption: 10px;
  --text-small: 13px;
  --text-base: 16px;
  --text-lead: 20px;
  --text-h3: 25px;
  --text-h2: 31px;
  --text-h1: 39px;
}

body {
  font-size: var(--text-base);
  line-height: 1.6;
}

h1 {
  font-size: var(--text-h1);
  line-height: 1.1;
}

h2 {
  font-size: var(--text-h2);
  line-height: 1.18;
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.25;
}

.lead {
  font-size: var(--text-lead);
  line-height: 1.45;
}

Start with readable body text, then choose the smallest hierarchy that still separates headings clearly. Stronger ratios work best when there is enough space.

Tool Categories