Typography

Type Scale

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

Base size

Scale ratio

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;
}