# Typography

Geist for the UI and headings, Geist Mono for code and aligned numbers. The UI base is 14px (`text-sm`).

## Headings

| Style | Size / line height | Weight | Usage |
| --- | --- | --- | --- |
| `h1` | 36px / 40px | 800 | Page title. One per screen. Tailwind: text-4xl font-extrabold tracking-tight. |
| `h2` | 30px / 36px | 600 | Main sections. Tailwind: text-3xl font-semibold tracking-tight. |
| `h3` | 24px / 32px | 600 | Subsections. Tailwind: text-2xl font-semibold tracking-tight. |
| `h4` | 20px / 28px | 600 | Group and dialog titles. Tailwind: text-xl font-semibold tracking-tight. |
| `card-title` | 16px / 20px | 600 | CardTitle. Tailwind: leading-none font-semibold. |

## Text

| Style | Size / line height | Weight | Usage |
| --- | --- | --- | --- |
| `lead` | 20px / 28px | 400 | Page intro in muted-foreground. Tailwind: text-xl text-muted-foreground. |
| `p` | 16px / 28px | 400 | Running text on content pages. Tailwind: leading-7. |
| `body` | 14px / 20px | 400 | UI default: buttons, fields, tables, menus. Tailwind: text-sm. |
| `label` | 14px / 14px | 500 | Form labels and "small" text. Tailwind: text-sm font-medium leading-none. |
| `caption` | 12px / 16px | 500 | Badges, captions, keyboard shortcuts. Tailwind: text-xs. |

## Mono

| Style | Size / line height | Weight | Usage |
| --- | --- | --- | --- |
| `code` | 14px / 20px | 600 | Inline code on muted. Tailwind: font-mono text-sm font-semibold. |
| `data` | 13px / 20px | 400 | Aligned numbers in tables (tabular-nums), IDs, hashes. |

---
PUI documentation · https://aline-aroucha.github.io/pui/typography.html