# Typography

Font families (sans · arabic · mono) with web stacks plus iOS/Android equivalents, type scale (rem + px), and weight ramp. Bilingual EN/AR samples live alongside each other.

## Font families

| token | tailwind | web stack | ios | android |
| --- | --- | --- | --- | --- |
| `fontFamily.sans` | `font-sans` | `ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif` | SF Pro (system) · use `-apple-system` | Roboto (Material 3 default) |
| `fontFamily.arabic` | `font-arabic` | `"IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif` | SF Arabic (built-in on iOS 16+) | Noto Sans Arabic |
| `fontFamily.mono` | `font-mono` | `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace` | SF Mono | Roboto Mono |

## When to use

| family | use for |
| --- | --- |
| `sans` | Primary UI body and headings (English / Latin scripts). |
| `arabic` | Used automatically inside [dir="rtl"] regions; pair with logical Tailwind utilities. |
| `mono` | Code blocks, JSON snippets, anything monospaced. |

## Type scale

| tailwind | rem | px |
| --- | --- | --- |
| `text-xs` | 0.75rem | 12px |
| `text-sm` | 0.875rem | 14px |
| `text-base` | 1rem | 16px |
| `text-lg` | 1.125rem | 18px |
| `text-xl` | 1.25rem | 20px |
| `text-2xl` | 1.5rem | 24px |
| `text-3xl` | 1.875rem | 30px |
| `text-4xl` | 2.25rem | 36px |

## Weights

| tailwind | name | value |
| --- | --- | --- |
| `font-normal` | Normal | 400 |
| `font-medium` | Medium | 500 |
| `font-semibold` | Semibold | 600 |
| `font-bold` | Bold | 700 |

## RTL

The `arabic` family is applied automatically inside `[dir="rtl"]` regions on the web. On iOS / Android, use the system locale to switch between the latin (`SF Pro` / `Roboto`) and arabic (`SF Arabic` / `Noto Sans Arabic`) fonts.