Typography
Three Latin roles plus an Arabic companion. The display face carries the personality; the body face disappears into readability; the mono face handles labels and data. All are open source, variable where useful, and light to load.
Archivo · wght 650 · width 115%
Archivo · wght 650 · width 108%
Hanken Grotesk · 400/600
IBM Plex Mono · 500 · caps
IBM Plex Sans Arabic
Why these faces
Archivo at slightly expanded widths gives headlines an engineered, international authority that neither Inter nor the current wordmark can, while its open geometric forms sit comfortably next to the rounded logo type. Hanken Grotesk is a humanist grotesk with excellent screen readability and no template associations. IBM Plex Mono replaces JetBrains Mono for anything technical and pairs natively with IBM Plex Sans Arabic, which gives us a professionally matched Arabic voice in the same family, with aligned weights and vertical metrics.
Type scale
| Token | Desktop / mobile | Face & settings | Use |
|---|---|---|---|
display-xl | 64 / 40 px · lh 1.05 | Archivo 650, width 115%, ls -1% | Homepage hero only |
display | 48 / 34 px · lh 1.1 | Archivo 650, width 115% | Page heroes |
h1 | 40 / 30 px · lh 1.15 | Archivo 650, width 112% | Section titles |
h2 | 32 / 26 px · lh 1.2 | Archivo 650, width 110% | Sub-sections |
h3 | 24 / 21 px · lh 1.3 | Archivo 650, width 108% | Card titles |
h4 | 20 / 18 px · lh 1.4 | Archivo 650, width 105% | Minor headings |
body-lg | 18 px · lh 1.65 | Hanken 400 | Leads, intros |
body | 16 px · lh 1.65 | Hanken 400 | Default text |
body-sm | 14 px · lh 1.6 | Hanken 400 | Meta, captions |
label | 11 px · lh 1.4 | Plex Mono 500, caps, ls +18% | Eyebrows, tags, table heads |
Office and constrained environments
All four brand faces are open source. IT installs them on every company machine, so Word, PowerPoint, Keynote and design tools use the real brand type. Where installation is impossible (recipient-side email rendering, externally shared editable documents), substitute per the table and never reach for anything decorative.
| Role | Brand face | Constrained fallback |
|---|---|---|
| Headings | Archivo (SemiBold, slightly expanded) | Arial Bold |
| Body | Hanken Grotesk | Arial or Calibri |
| Labels & data | IBM Plex Mono | Consolas or Courier New |
| Arabic | IBM Plex Sans Arabic | Segoe UI (Windows) · Geeza Pro (Mac) |
Rules
- Sentence case everywhere, including headings and buttons
- Keep body measure between 55 and 75 characters
- Reserve the expanded display width for Archivo headings only
- Increase Arabic sizes by ~10% and line height to 1.8 minimum
- Use Inter, JetBrains Mono or decorative “code” text anywhere
- Set headings in orange or gradient fills; headings are navy or white
- Letter-space lowercase body text; only mono labels are tracked
- Mix italic Arabic or fake-slant any Arabic text