---
url: https://brand.okrado.com/foundations/type/
title: Type
description: The four faces and their jobs, the product scale, the marketing scale and the Arabic rules.
kind: reference
owner: Ghassen-Hizem
updated: 2026-11-03
review_by: 2027-02-28
audience:
  - designer
  - developer
---

# Type

> The four faces and their jobs, the product scale, the marketing scale and the Arabic rules.

| Face           | Job                  | Notes                                                                                                 |
| -------------- | -------------------- | ----------------------------------------------------------------------------------------------------- |
| Archivo        | Headings and display | Weight 540, width 108, tracking −0.04 em. In the product only for page-level numbers of 32 px and up. |
| Inter          | UI and body          | Weights 400, 500, 600. Tabular numbers.                                                               |
| JetBrains Mono | Evidence             | Ids, hashes as `abcd…wxyz`, timestamps, commands. Never a label style.                                |
| Readex Pro     | Arabic               | Used wherever the text is Arabic; no negative tracking.                                               |

All four are open-licensed and served from the same host as the page.

## Product scale

The product uses seven sizes; 13 px is the default. Weights are 400, 500 and 600.

| Token              | Size   | Specimen                               |
| ------------------ | ------ | -------------------------------------- |
| `ui.font.size.xs`  | `12px` | Objectives go down. Results come back. |
| `ui.font.size.sm`  | `13px` | Objectives go down. Results come back. |
| `ui.font.size.md`  | `14px` | Objectives go down. Results come back. |
| `ui.font.size.lg`  | `16px` | Objectives go down. Results come back. |
| `ui.font.size.xl`  | `20px` | Objectives go down. Results come back. |
| `ui.font.size.2xl` | `24px` | Objectives go down. Results come back. |
| `ui.font.size.3xl` | `32px` | Objectives go down. Results come back. |

## Marketing scale

Fluid between 360 and 1440 px.

| Token                            | CSS variable                           | Value                                     |
| -------------------------------- | -------------------------------------- | ----------------------------------------- |
| `ui.font.marketing.size.display` | `--okr-ui-font-marketing-size-display` | `clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem)`  |
| `ui.font.marketing.size.h2`      | `--okr-ui-font-marketing-size-h2`      | `clamp(2rem, 1.45rem + 2.2vw, 3.25rem)`   |
| `ui.font.marketing.size.h3`      | `--okr-ui-font-marketing-size-h3`      | `1.375rem`                                |
| `ui.font.marketing.size.h4`      | `--okr-ui-font-marketing-size-h4`      | `1.125rem`                                |
| `ui.font.marketing.size.lead`    | `--okr-ui-font-marketing-size-lead`    | `clamp(1.0625rem, 1rem + 0.3vw, 1.25rem)` |
| `ui.font.marketing.size.body`    | `--okr-ui-font-marketing-size-body`    | `1rem`                                    |
| `ui.font.marketing.size.small`   | `--okr-ui-font-marketing-size-small`   | `0.875rem`                                |
| `ui.font.marketing.size.caption` | `--okr-ui-font-marketing-size-caption` | `0.8125rem`                               |
| `ui.font.marketing.size.mono`    | `--okr-ui-font-marketing-size-mono`    | `0.8125rem`                               |

## Rules

- Sentence case everywhere. No all-caps labels.
- A two-tone headline is allowed once per page, in the hero only.
- Numbers always use tabular figures.
- Long text keeps a measure of about 68 characters.
- Use `text-wrap: balance` on headings and `pretty` on leads.