Brand
Typography
Geist carries display, body, and interface text. Geist Mono labels the system.
Type roles
| Display | --font-display. Large, lightweight headings with chrome treatments only in marketing. |
|---|---|
| Body and interface | --font-body and --font-ui. Use plain readable text in forms, navigation, dashboards, and long copy. |
| Monospace | --font-mono for code, token names, measurements, and timing labels. |
| Fallback | Arial and system monospace preserve layout when the hosted font is unavailable. |
Families
| Token | Custom property | Value |
|---|---|---|
font.sans | --font-sans | "Geist", Arial, sans-serif |
font.serif | --font-serif | "Geist", Arial, sans-serif |
font.mono | --font-mono | "Geist Mono", ui-monospace, monospace |
font.display | --font-display | "Geist", Arial, sans-serif |
font.body | --font-body | "Geist", Arial, sans-serif |
font.ui | --font-ui | "Geist", Arial, sans-serif |