Fonts
The default fonts we use are Inter for regular text and JetBrains Mono for monospace text.
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.