🖋️ Typography
Typography is the suite of fonts we use to guide our users with the right tone through every step of their experience.
Font
Our design system utilizes the Geist font (opens in a new tab), an open-source variable font that offers adjustable knobs for fine-tuning font weight and slant.
For languages where Geist doesn’t offer a complete set of glyphs, employs the system font to ensure proper rendering and compatibility.
font-family: “GeistSans”, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";Aa
Regular (400)
Aa
Medium (500)
Aa
Semibold (600)
Font Mono
In our products, we primarily utilize sans serif typefaces for typography, reserving monospace fonts exclusively for instances where code needs to be displayed.
font-family: "GeistMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;Font Stack
Sans serif
| OS | Font family |
|---|---|
| All | GeistSans |
| All | Helvetica Neue (fallback) |
| All | Arial (fallback) |
| All | sans-serif (fallback) |
| All | Noto Color Emoji (fallback) |
| macOS & iOS | -apple-system (fallback) |
| macOS & iOS | BlinkMacSystemFont (fallback) |
| macOS & iOS | Apple Color Emoji |
| Windows | Segoe UI (fallback) |
| Windows | Segoe UI Emoji |
| Windows | Segoe UI Symbol (fallback) |
| Android & Chrome OS | Roboto (fallback) |
| Android & Chrome OS | Noto Sans (fallback) |
Monospaced
| OS | Font family |
|---|---|
| All | GeistMono |
| All | monospace (fallback) |
| macOS & iOS | SFMono-Regular (fallback) |
| macOS & iOS | Menlo (fallback) |
| macOS & iOS | Monaco (fallback) |
| Windows | Consolas (fallback) |
| Windows | Courier New (fallback) |
| Linux | Liberation Mono (fallback) |