Fonts
The default fonts we use are Inter for regular text and JetBrains Mono for monospace text.
Font sizes#
Font sizes use Tailwind's native typography utilities. size="sm" maps to text-sm,
and size="base" maps to text-base. Text and standard controls default to sm.
The sizes below assume Tailwind's default theme and a 16px root font size; rem-based sizes
follow the host application's root font size.
| 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#
| 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
sm, 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 | Description |
|---|---|---|
| size | Responsive<FontSize> | "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | ... | "9xl" |
| weight | Responsive<FontWeight> | "thin" | "extralight" | "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold" | "black" |
Customizing typography#
Configure font sizes and their line heights through Tailwind's --text-* theme variables.
Zen components use the same utilities as the rest of your application. Font families remain
configurable through --zen-font-family and --zen-font-family-mono.
Migrating from the custom scale#
The old --zen-font-size-* and --zen-line-height-* variables are no longer used.
Move overrides into your Tailwind typography theme. Explicit sizes now follow Tailwind: for
example, size="base" is 16px instead of 14px at the default root size. Use size="sm" for 14px text.
Text, Label, Code, and ordinary control defaults remain 14px; explicit heading and other size
variants now follow the standard scale.