Typography

A modular scale on a 1.125 ratio, from a 1.6rem base. Each step is drawn at its real size, so the page is the scale.

Click any specimen to copy the token it documents, as var(--token).

How it works

Steps. Thirteen, xs to 9xl, on a 1.125 ratio - two under the base and ten over it. --root-t--font-size--md is the base: that is the one for body text.

Relative, on purpose. Each step is 1em based, so a step nested inside another compounds - a heading inside a large section grows with it. The value beside each step is what it resolves to from the 1.6rem base, computed at build time; the reset puts the root font size at 62.5%, so that base is 16px and every rem here reads as its px value times ten.

Also in this file. The two families - Inter, and a mono stack for values and code - the four weights (400 to 700) and --root-t--line-height--base: 1.4, unitless so it follows whatever step the element lands on.

What to write. A step, never a px value and never a ratio of your own. h1 to h6 are already mapped onto the scale, so a heading needs no font-size at all.

Scale basis

--root-t--font-size--base

1.6rem

--root-t--ratio

1.125

--root-t--line-height--base

1.4

Typography

How it works

Scale basis

Tokens