Typography

The type families, weights and scale this theme ships. Samples render in the live face; families and the fluid --font-size-* scale read straight from the active theme.

Type families

The quick brown fox jumps over the lazy dog

--font-display · — · Headlines, page titles, big numbers.

The quick brown fox jumps over the lazy dog

--font-sans · — · Body — the workhorse face.

The quick brown fox jumps over the lazy dog

--font-mono · — · Code, IDs, token names.

Type scale

Each row renders at its real fluid token; the px shown is the used size at this viewport.

--type-size-900 —

The quick brown fox jumps over the lazy dog

--type-size-800 —

The quick brown fox jumps over the lazy dog

--type-size-700 —

The quick brown fox jumps over the lazy dog

--type-size-600 —

The quick brown fox jumps over the lazy dog

--type-size-500 —

The quick brown fox jumps over the lazy dog

--type-size-400 —

The quick brown fox jumps over the lazy dog

--type-size-300 —

The quick brown fox jumps over the lazy dog

--type-size-250 —

The quick brown fox jumps over the lazy dog

--type-size-200 —

The quick brown fox jumps over the lazy dog

--type-size-150 —

The quick brown fox jumps over the lazy dog

--type-size-100 —

The quick brown fox jumps over the lazy dog

--type-size-050 —

The quick brown fox jumps over the lazy dog

Weights

--font-weight-regular —

--font-weight-medium —

--font-weight-semibold —

--font-weight-bold —