Typography
CAIRL typography system — IBM Plex Sans and IBM Plex Mono typefaces, type scale, and usage rules.
Typography
CAIRL uses two typefaces from the IBM Plex family, each with a defined role. No other typefaces are permitted.
IBM Plex Sans — body and UI
The primary typeface for all headings, body copy, navigation, and interface elements.
- Classification: Neo-grotesque sans-serif
- Loading:
next/font/googlewithdisplay: swap - CSS variable:
--font-sans - Fallback stack: ui-sans-serif, system-ui, sans-serif
Approved weights:
| Weight | Name | Role |
|---|---|---|
| 400 | Normal | Body text, descriptions |
| 500 | Medium | Small text, labels, captions |
| 600 | SemiBold | Headings (H2–H4), emphasis |
| 700 | Bold | H1 headings, strong emphasis |
Weight 300 (Light) has been removed — zero usage across the product.
IBM Plex Mono — brand and code
Serves two distinct roles: brand identity (wordmark and lockups) and system UI (code, data, keys).
- CSS variable:
--font-mono - Fallback stack: ui-monospace, monospace
Brand identity weights:
| Weight | Role |
|---|---|
| 600 (SemiBold) | Wordmark letterforms |
| 700 (Bold) | Wordmark brackets |
System UI weights:
| Weight | Role |
|---|---|
| 400 (Normal) | Code blocks, data tables |
| 500 (Medium) | Labels in monospace contexts |
| 600 (SemiBold) | Emphasis in monospace contexts |
Weight 700 is reserved for the wordmark only — never use it for UI monospace.
Approved monospace contexts: code blocks, API keys, verification codes, email aliases, admin data tables, debug overlays.
Type scale
CAIRL uses the standard Tailwind type scale with no custom ratio.
| Level | Tailwind class | Size | Weight | Tracking |
|---|---|---|---|---|
| H1 | text-4xl / text-5xl | 36–48px (responsive) | 700 bold | tracking-tight |
| H2 | text-3xl | 30px | 600 semibold | tracking-tight |
| H3 | text-2xl | 24px | 600 semibold | tracking-tight |
| H4 | text-xl | 20px | 600 semibold | tracking-tight |
| Body | text-base | 16px | 400 normal | default |
| Small | text-sm | 14px | 500 medium | default |
| Muted | text-sm | 14px | 400 normal | default |
Line heights:
| Context | Line height |
|---|---|
| Badges, compact labels | leading-none |
| Body text | leading-7 (1.75rem) |
| Hero text | leading-8 (2rem) |
Case rule: All headings use sentence case. No all-caps headings except the CAIRL wordmark itself.