Typography

Gerstner carries display, headings, and body. It ships Regular and Bold, each with an italic; bold is Text’s only weight switch. Diatype Mono carries labels, buttons, pills, and meta. It has one face, is always uppercase and tracked looser, and ignores bold and italic.

Fourteen semantic variants pair size, line height, weight, tracking, and family. The specimen keeps each row at its real Text variant.

A composed album header shows how a small set of variants carries a page.

Prefer a semantic variant. It sets size, line height, weight, tracking, and family together; override with font="sans" or font="mono" only when needed.

import { useSwshdTheme } from "swshd/ThemeProvider";
import Text from "swshd/Text";

const { colors } = useSwshdTheme();
<Text variant="heading-2" color={colors.text.primary}>
  Share the whole night
</Text>