Typography

The display and body families the kit ships, read live from the --font-display and --font-body tokens, alongside the four weights every text style draws from. Retheme the tokens and this page re-renders in the new faces.

The page's biggest moments: hero headlines, page titles, section openers, and stat callouts. Display styles set in the display family with tight letter spacing, made to carry weight at large sizes rather than sustain long reading. Every step renders at true size in all four weights, with font size, line height, and letter spacing measured live.

The reading layer: paragraphs, labels, inputs, captions, and table content. Text styles set in the body family at UI sizes tuned for legibility over impact; text-md (16px) is the kit's default body size. Every step renders at true size in all four weights, with the metrics measured live.