--- title: "Typography" description: "Set your brand's Sans, Serif, and Mono font families and the text size scale, previewed with brand specimens." label: "Typography" date: "2026-06-25" --- Typography holds your brand's font families and the text size scale. AI tools read these values so generated UI uses your type, not a default. ## Font families You set three font families, matching the standard font tokens: - **Sans.** Your primary interface and body typeface. - **Serif.** Used where your brand calls for a serif, for example editorial or display contexts. - **Mono.** Your monospace typeface for code and tabular content. New brands start on **Geist** for the sans family and **Geist Mono** for the mono family. Replace them with your brand's typefaces. ## The text size scale Typography includes the Tailwind `--text-*` size scale, from `xs` through `9xl`. Each step holds a **size** and a **line-height**, so AI tools have the full type ramp rather than a single base value. ## Brand-specimen previews Each family and size step renders a brand-specimen preview using your actual fonts and values. The preview is how you confirm a family loads correctly and how the scale reads at every step before AI tools start using it. Already have your type defined elsewhere? You can pull families and sizes in from a source. See [Importing styles](/docs/styles/importing-styles). ## Rules Author **General** rules groups for typography to capture intent that values cannot, for example which size to use for a heading or when to reach for the serif. Each rule carries text, a Guidance marker (Do, Don't, Caution, or Info), and an Importance (Required, Recommended, or Optional).