Fonts
The default fonts we use are Inter for regular text and JetBrains Mono for monospace text.
Font sizes
Font sizes use Tailwind’s naming convention.
xssmbaselgxl2xl3xl4xl5xl6xl7xl8xl9xl
| Value | Size |
|---|---|
| xs | 12px |
| sm | 14px |
| base | 16px |
| lg | 18px |
| xl | 20px |
| 2xl | 24px |
| 3xl | 30px |
| 4xl | 36px |
| 5xl | 48px |
| 6xl | 60px |
| 7xl | 72px |
| 8xl | 96px |
| 9xl | 128px |
Font weights
Thin (100)Extra Light (200)Light (300)Normal (400)Medium (500)Semibold (600)Bold (700)Extra Bold (800)Black (900)
| Value | Weight |
|---|---|
| thin | 100 |
| extralight | 200 |
| light | 300 |
| normal | 400 |
| medium | 500 |
| semibold | 600 |
| bold | 700 |
| extrabold | 800 |
| black | 900 |
Usage in typography components
Font properties are used by typography components to control text appearance. Text is the primary component for rendering text and accepts all font-related props. Heading uses a subset of larger sizes appropriate for headings.
- size - Controls the font size. Text defaults to
base, while Heading sizes map to appropriate heading levels. - weight - Controls the font weight. Text defaults to
normal, Heading defaults tosemibold.
All font props accept responsive values for adapting typography across breakpoints.
Component props
| Name | Type | Values |
|---|---|---|
| size | Responsive<FontSize> | "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | ... | "9xl" |
| weight | Responsive<FontWeight> | "thin" | "extralight" | "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold" | "black" |