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—