Arabic typography
ذكاء سيادي تهتدي به.
IBM Plex Sans Arabic · خفيف · عادي · متوسط · شبه عريض · عريض
IBM Plex Sans Arabic
Our Arabic typeface is IBM Plex Sans Arabic: a clear, contemporary sans with open counters and a rhythm that sits comfortably next to Helvetica Now.
Why this typeface
- Designed for Arabic from the start, with proper joins and generous spacing; not a Latin font with Arabic added.
- Five weights that map to our Latin hierarchy.
- Legible at small UI sizes and on low-resolution screens.
- Free and open (SIL Open Font License): installable on every machine, embeddable in apps and PDFs, no licence requests.
التوطين قبل القدرة
إنسان مسؤول عن كل إجراء يتخذه الذكاء الاصطناعي
تبقى ملفاتك على جهازك، وتعمل النماذج داخل مقر جهتك، ولا تُرسل التحليلات المصنّفة إلى أي نموذج عام.
Weights
| Latin role | Helvetica Now | IBM Plex Sans Arabic |
|---|---|---|
| Display headlines | Display Bold 700 | Bold 700 |
| Headings | Display Medium 500 | SemiBold 600 (Arabic needs one step heavier to match) |
| Lead lines | Display Light 300 | Light 300 |
| Body | Text Regular 400 | Regular 400 |
| Labels, buttons, captions | Text Medium 500 | Medium 500 |
Arabic type scale
Arabic letterforms sit lower and wider than Latin capitals, so at the same size Arabic looks smaller. Set Arabic at 1.08× the Latin size for the same role, with more line height. These values are tokens: --n-arabic-size-ratio, --n-arabic-line-height-body, --n-arabic-line-height-heading.
| Style | Latin size | Arabic size | Arabic weight | Arabic line height |
|---|---|---|---|---|
display-lg | 72px | 78px | Bold 700 | 1.35 |
heading-1 | 48px | 52px | SemiBold 600 | 1.35 |
heading-2 | 36px | 39px | SemiBold 600 | 1.35 |
heading-3 | 24px | 26px | SemiBold 600 | 1.35 |
lead | 22px | 24px | Light 300 | 1.8 |
body-lg | 18px | 19px | Regular 400 | 1.8 |
body | 16px | 17px | Regular 400 | 1.8 |
body-sm | 14px | 15px | Regular 400 | 1.8 |
caption | 12px | 13px | Medium 500 | 1.8 |
What Arabic doesn't do
- No letter-spacing. Tracking breaks the joins between letters. Our microtitle style (capitals, +0.1em) has no Arabic equivalent; use SemiBold at the same size instead.
- No italics. Arabic has no true italic, and slanted Arabic is hard to read. Emphasise with weight.
- No capitals. Arabic has no case. Sentence-case rules don't apply.
- No justification with stretched letters. Don't use kashida (tatweel, ـ) to justify text in UI or documents. Align right, ragged left.
- No underlines through letters. If links must be underlined, offset the underline so it clears the descenders (
text-underline-offset: 0.35em).
Punctuation
| Mark | Arabic | Note |
|---|---|---|
| Comma | ، | Reversed comma. Never the Latin comma in Arabic text. |
| Semicolon | ؛ | |
| Question mark | ؟ | Mirrored question mark. |
| Quotation marks | « » | Use guillemets; keep them consistent in a document. |
| Full stop, colon, exclamation | . : ! | Same characters as Latin, placed at the left end of the sentence. |
| Percent | % or ٪ | % with Western digits, ٪ with Eastern digits. |
Mixing Arabic and Latin
Isolate the Latin runs
Product names, numbers, emails and code inside Arabic sentences are left-to-right “islands”. Without isolation, punctuation jumps to the wrong side and words reorder.
- In HTML, set
dir="rtl"on the Arabic block and wrap Latin runs in<bdi>(ordir="ltr"). - In plain text and chat, use Unicode isolates: FSI (U+2068) … PDI (U+2069).
- In Word and PowerPoint, set the paragraph to right-to-left and let the Latin run keep its own direction.
- Set Latin runs in Helvetica Now at the Latin size, not in the Arabic font.
<p lang="ar" dir="rtl">
تعمل <bdi>NorthStar</bdi> على أجهزتكم، ويمر كل طلب
عبر <bdi>NorthStar Admiral Server</bdi>.
</p>
/* CSS */
:lang(ar) {
font-family: var(--n-font-family-arabic);
font-size: calc(1em * var(--n-arabic-size-ratio));
line-height: var(--n-arabic-line-height-body);
letter-spacing: 0;
}Fallbacks
| Where | Use |
|---|---|
| Web and apps | IBM Plex Sans Arabic (self-hosted or Google Fonts) → Noto Sans Arabic → system |
| Microsoft Office without Plex installed | Segoe UI (Windows) or Geeza Pro (macOS). Install Plex wherever you can. |
| Tahoma, Arial: email clients rarely load web fonts | |
| Code and terminals | JetBrains Mono for Latin; let the system font render Arabic strings |
Dos and don'ts
Do
- Use IBM Plex Sans Arabic for all Arabic text.
- Apply the size ratio and Arabic line heights.
- Use SemiBold for headings.
- Isolate Latin names and numbers.
Don't
- Track, italicise or stretch Arabic.
- Set Arabic in Helvetica Now or in decorative calligraphic fonts.
- Use the Latin comma or question mark in Arabic.
- Shrink Arabic to make it fit beside English.
Last updated on 14 October 2026