# Typography

Typefaces, the type scale and how to set text in a dense interface.

## Typefaces

| Family                    | Utility                  | Use                                                                |
| ------------------------- | ------------------------ | ------------------------------------------------------------------ |
| Inter (variable)          | `font-sans`, the default | Every piece of interface text.                                     |
| JetBrains Mono (variable) | `font-mono`              | Identifiers, hashes, IP addresses, code, values the user may copy. |

Both load from `@zenoxai/ui/fonts.css`, imported from the app's JavaScript entry (see
[Installation](/getting-started/installation#3-load-the-fonts)). Inter renders with the `cv11`
(single-storey a) and `ss01` (open digits) features.

## Type scale

The scale overrides the Tailwind defaults. The platform is dense: **running text is `text-sm`
(12.5px)**, not `text-base`. Sizes and line heights are set in `rem`, so they follow the user's
font size setting together with spacing and control heights; the pixels below are at the
browser's default 16px. Every line height is a whole pixel. The reasoning is in
`docs/decisions/0006-type-scale-and-density.md` in the repository.

| Utility | Size | Line height |
| --- | --- | --- |
| `text-xs` | 11px | 16px |
| `text-sm` | 12.5px | 18px |
| `text-md` | 14px | 20px |
| `text-base` | 16px | 24px |
| `text-lg` | 18px | 26px |
| `text-xl` | 22px | 30px |
| `text-2xl` | 26px | 34px |
| `text-3xl` | 31px | 38px |
| `text-4xl` | 37px | 44px |
| `text-5xl` | 44px | 50px |

| Utility           | Use                                                                                     |
| ----------------- | --------------------------------------------------------------------------------------- |
| `text-xs`         | Captions, badges, keyboard hints, chart axes. The floor: never a sentence or help text. |
| `text-sm`         | Body copy, buttons, table cells, form labels, help text, descriptions.                  |
| `text-md`         | Compact titles: a Popover title, a small Card title, a table group, a side panel group. |
| `text-base`       | Container titles (Card, Dialog, Sheet, Drawer, empty states); inputs below `md`.        |
| `text-lg`         | Section headings.                                                                       |
| `text-xl`         | The page title, the single `<h1>` of a page.                                            |
| `text-2xl`        | KPI figures in a [Stat Tile](/patterns/stat-tile), semibold.                            |
| `text-3xl` and up | Marketing surfaces only.                                                                |

`text-dense-xs` is a deprecated alias of `text-xs`.

## Title levels

A title's weight follows its role. Page and section headings organize the page and are
semibold. Container titles name the object in a card or an overlay; they repeat many times on a
screen and are medium, so they stay below the section heading above them. The compact step is
semibold because at 14px a medium title would not stand apart from the 12.5px medium labels and
buttons around it.

| Level     | Size / line | Weight   | Components                                                        |
| --------- | ----------- | -------- | ----------------------------------------------------------------- |
| Page      | 22 / 30     | semibold | [Page Header](/patterns/page-header)                              |
| Section   | 18 / 26     | semibold | [Section Heading](/patterns/section-heading)                      |
| Container | 16 / 24     | medium   | Card, Dialog, Alert Dialog, Sheet, Drawer, Empty                  |
| Compact   | 14 / 20     | semibold | Popover title, `size="sm"` Card title, table and panel groups     |
| Body      | 12.5 / 18   | normal   | Text, cells, descriptions                                         |
| Label     | 12.5 / 18   | medium   | Labels, buttons, links, emphasis; table headers are semibold      |
| Caption   | 11 / 16     | medium   | Badges, captions, keyboard hints; uppercase captions are semibold |

No title uses `leading-none`: Portuguese and Spanish titles wrap more often than English ones,
and a wrapped title needs its line height.

## Weights

| Utility         | Use                                                                  |
| --------------- | -------------------------------------------------------------------- |
| `font-normal`   | Body text.                                                           |
| `font-medium`   | Labels, buttons, links, container titles, badges.                    |
| `font-semibold` | Page, section and compact titles; table headers; uppercase captions. |
| `font-bold`     | Not used: KPI figures are semibold, so a row of them is not heavy.   |

## Rules

- Sentence case for every title, label and button: "Save changes", not "Save Changes".
- Uppercase is for short captions only (`text-xs font-semibold uppercase tracking-widest`), such
  as sidebar group labels. Never for headings or buttons.
- Numbers that line up in columns use `tabular-nums`.
- Truncate with `truncate` and give the full value a tooltip or a detail view; never let a cell
  wrap an identifier mid-way.
- Values a user may copy (hashes, IPs, keys) use `font-mono` and offer a
  [Copy Button](/patterns/copy-button).