Skip to content
All tools

Typography

Type Scale Calculator

Create a consistent hierarchy from a base size and modular ratio, with ready-to-use CSS tokens.

px

Display

--text-display

Shape the next idea.

39.06px

Heading 1

--text-h1

Shape the next idea.

31.25px

Heading 2

--text-h2

Shape the next idea.

25px

Heading 3

--text-h3

Shape the next idea.

20px

Body

--text-body

Shape the next idea.

16px

Small

--text-small

Shape the next idea.

12.8px

:root {
  --text-display: 2.441rem;
  --text-h1: 1.953rem;
  --text-h2: 1.563rem;
  --text-h3: 1.250rem;
  --text-body: 1.000rem;
  --text-small: 0.800rem;
}

Choose a hierarchy your content can support

  1. Set the base size for body text, then choose the ratio between successive sizes.
  2. Preview real headings and body copy. A modest ratio makes adjacent levels closer; a larger ratio creates stronger differences.
  3. Copy the CSS tokens and test long headings, browser zoom, and narrow screens before applying the scale throughout a site.

Font size alone does not ensure readability. Check line height, line length, font weight, contrast, and the behavior of text at 200% zoom. Do not disable browser zoom to keep a heading on one line.

WCAG resize-text guidance

A modular scale with a 1.25 ratio

:root {
  --text-body: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.953125rem;
}

Each step multiplies the previous size by 1.25. These rem values follow the root font size. A modular scale does not become fluid automatically; choose responsive rules based on your actual layout.