# Typography

North brand guidelines for AI agents · https://identity.north.ae/AGENTS/typography · Updated 2026-10-14
Use when: Setting any text: fonts, sizes, weights, line heights.
Rules that always apply: https://identity.north.ae/AGENTS

## Typefaces
- **Helvetica Now Display** (Monotype, licensed): headlines, numbers, lockups, anything ≥ 20px. Weights: Light 300, Regular 400, Medium 500, Bold 700, ExtraBold 800 (hero numbers only).
- **Helvetica Now Text**: body, UI, captions, anything < 20px. Regular 400, Medium 500, Bold 700.
- **IBM Plex Sans Arabic** (SIL OFL): all Arabic script. See /AGENTS/arabic.
- **JetBrains Mono** (SIL OFL): code, CLI, token names, IDs only.
- Fallback where Helvetica Now is unavailable: Arial (stack: Helvetica Now → Helvetica Neue → Arial → sans-serif).

## Text styles (tokens; CSS classes `.n-type-<name>`)
| Style | Family | Weight | Size | Line height | Tracking | Use |
|---|---|---|---|---|---|---|
| display-xl | Helvetica Now Display | 700 | 96px | 0.96 | -0.035em | Campaign heroes, title slides. One per layout. |
| display-lg | Helvetica Now Display | 700 | 72px | 1 | -0.03em | Landing-page heroes. |
| heading-1 | Helvetica Now Display | 500 | 48px | 1.06 | -0.02em | Page titles. |
| heading-2 | Helvetica Now Display | 500 | 36px | 1.1 | -0.015em | Section titles. |
| heading-3 | Helvetica Now Display | 500 | 24px | 1.22 | -0.01em | Sub-sections, card titles. |
| heading-4 | Helvetica Now Text | 700 | 18px | 1.33 | 0 | Small headings, list titles. |
| lead | Helvetica Now Display | 300 | 22px | 1.45 | -0.005em | Intro paragraphs under a title. |
| body-lg | Helvetica Now Text | 400 | 18px | 1.55 | 0 | Marketing body copy. |
| body | Helvetica Now Text | 400 | 16px | 1.55 | 0 | Default body and UI copy. |
| body-sm | Helvetica Now Text | 400 | 14px | 1.5 | 0.005em | Dense UI, tables, secondary copy. |
| caption | Helvetica Now Text | 500 | 12px | 1.4 | 0.01em | Captions and legal. Smallest permitted size on screen. |
| microtitle | Helvetica Now Text | 700 | 12px | 1.3 | 0.1em uppercase | Navigation groups and data labels only — echoes the uppercase wordmark. Never above every heading. |
| code | JetBrains Mono | 400 | 14px | 1.6 | 0 | Code blocks, CLI, token names. |

## Rules
- Sentence case for headings, buttons, menus, slide titles. Capitals only for short microtitles (nav groups, data labels), tracked +0.1em.
- Emphasis by weight (e.g. Display Light with Display Bold payoff), once per headline, never colour highlights in headlines.
- Left-aligned by default (right in Arabic); centre only short hero lines; never justify.
- Minimums: screen body 16px reading / 14px dense UI, captions 12px; slides 18pt body (24pt+ preferred); print body 9pt (10.5–11pt preferred), legal 7pt. Line length ≤ 80 characters.
- Big numbers: Display ExtraBold, −0.05em, with one line of context in Display Medium. Tables and UI numbers: tabular figures.