Arabic typefaces and numerals for Saudi and UAE apps: a practical guide

The short answer: set Arabic in a family drawn for Arabic, never in a fallback. SF Arabic ships with iOS and Noto Naskh Arabic with stock Android; IBM Plex Sans Arabic, Noto Sans Arabic, Noto Kufi Arabic, Cairo, Tajawal and Almarai are open-licensed and free to embed. Give Arabic more line height than Latin, no letter-spacing and no capitals. For digits, Unicode's locale data defaults to Arabic-Indic (١٢٣) for ar-SA and Western (123) for ar-AE. Choose one per product, write it down, and keep phone numbers in a single left-to-right run.

This guide builds on the twelve mistakes we fix most in right-to-left interfaces. That one lists what breaks. This one gives the settings, with the source for each.

Which Arabic typefaces do iOS and Android ship with?

On Apple platforms the system Arabic face is SF Arabic, which Apple describes as "a contemporary interpretation of the Naskh style with a rational and flexible design". It is part of the San Francisco family and has a rounded variant; Apple's Design for Arabic session gives its range as Ultralight to Black. The downloadable copy is licensed for mock-ups of interfaces for Apple's platforms, so it cannot be your web or Android font.

On Android, the open-source platform's font configuration lists Noto Naskh Arabic as the Arabic fallback, in regular and bold only. A type scale that leans on medium and semibold has nothing to map to there. That is the open-source platform. Its notes for device vendors tell them where to add their own font configurations, so check the handsets your users carry.

The practical consequence: if the product has a brand typeface, bundle an Arabic family with it. Relying on the system gives you two different Arabic designs on two platforms.

Which open families are worth shortlisting?

All six below are published under the SIL Open Font License, which allows bundling and embedding in an app or a website at no cost. Weights are from the families' Google Fonts listings.

Family	Weights	Worth knowing
IBM Plex Sans Arabic	Seven, Thin to Bold	Drawn as part of IBM Plex, so the Latin pairing is already made
Noto Sans Arabic	Variable, 100 to 900, with a width axis	Condensed widths help in tight controls
Noto Kufi Arabic	Variable, 100 to 900	The base Arabic font of the UAE Design System
Cairo	Variable, 200 to 1000	Goes to 1000, the heaviest of the six
Tajawal	Seven, 200 to 900, no 600	Map a semibold to 500 or 700 on purpose
Almarai	Four: 300, 400, 700, 800	No medium, so a short scale

Commercial foundries also sell Arabic companions to well-known Latin families. Check that the licence covers app embedding and web use before a design depends on one; the two are often sold separately.

How do you pair Arabic with a Latin face?

Pair on proportion and weight, not on name. Three checks do most of the work.

Size against capitals. Arabic has no upper case, and Arabic fonts are usually drawn to sit with Latin lower case. Apple's right-to-left guidance notes that Arabic "can appear too small when next to uppercased Latin text" and suggests raising it by about 2 points. The Design for Arabic session gives the same advice as 10%.

Weight for weight. List the Latin weights the interface uses and name the Arabic weight that stands in for each. If the Arabic family has no 600, decide what happens before an engineer's browser decides for you.

Family per language. Assign the Arabic family through the lang attribute, and put it first in the stack for Arabic text. Then Arabic glyphs never fall through to whatever the device has.

Families drawn together, such as IBM Plex Sans with IBM Plex Sans Arabic or Noto Sans with Noto Sans Arabic, remove most of this work.

How should line height, size and weight differ from Latin?

Arabic needs more vertical room. The W3C's Arabic layout requirements put it plainly: "Arabic ascenders and descenders extend much further than those of the Latin script". Apple adds that Arabic is "slightly taller, especially with the use of dots, vocalization, and diacritic marks", and tells designers to add vertical spacing to avoid clipping.

• Line height. We set Arabic body text at 1.6 to 1.8 against 1.4 to 1.5 for English. Those are our working numbers, not a standard; the UAE Design System sets 1.5 as its minimum for body copy.
• Controls. Add vertical padding to buttons, chips and inputs, then test with a fully vocalised string such as مُحَمَّد.
• Size. Follow the platform minimums for both scripts. On iOS, Apple gives a default of 17 points and a minimum of 11.
• Weight. Apple's advice for thin custom fonts is to go larger than the recommended sizes. Check the light weights of an Arabic family at small sizes on a real device before the scale is fixed.

Why do letter-spacing and all-caps not apply to Arabic?

Arabic is a joined script: most letters connect to their neighbours, and a letter's shape depends on its position in the word. Spacing the letters apart breaks the joins.

The CSS Text specification is explicit. A browser that cannot stretch a cursive script without breaking its connections "must not apply spacing between any pair of that script's typographic letter units at all". Apple's session says the same from the design side: unless the typeface is built for it, "make sure to use 0 tracking".

So the rule for a design system is zero letter-spacing on every Arabic text style. That includes the tracked, upper-case eyebrow label common in English interfaces. It has no Arabic equivalent, because there is no case to transform. Give the Arabic version of that style its own definition, using weight, size or colour.

What is kashida, and where does it belong in an interface?

Kashida is the lengthening of the horizontal connection between two joined letters. The W3C defines it as "extending the horizontal connection between joined letters" and describes it as a tool for justifying paragraphs.

Tatweel is a character, U+0640, that can be typed between two joined letters to widen the join by a fixed amount: جميل becomes جمـيل. Because it is a character in the text, it is stored, copied and matched in search like any other.

Two rules follow. Do not type tatweel into interface strings to make a label fill its space. And prefer start-aligned Arabic to justified Arabic in product screens, where lines are short and stretching is hard to control.

Arabic-Indic or Western digits: what does CLDR say for ar-SA and ar-AE?

Western digits are 0 to 9. Arabic-Indic digits are ٠ to ٩, at U+0660 to U+0669. The Unicode Common Locale Data Repository (CLDR) is the locale data that browsers and mobile platforms draw on to format numbers and dates.

Locale	CLDR default numbering system	1234.5 formatted
ar-SA	arab, set in ar_SA.xml	١٬٢٣٤٫٥
ar-AE	latn, inherited in ar_AE.xml	1,234.5

Note that the separators change with the digits.

The default is a starting point, not a ruling. The W3C lists Saudi Arabia among the countries that use Arabic-Indic digits. Apple says Saudi Arabia uses both, and that usage varies "even among areas within the same country or region". Decide per product, record the rule in the design system, and set it in code with the locale extension, ar-SA-u-nu-latn or ar-AE-u-nu-arab, so no screen depends on the default.

How should phone numbers and mixed-direction strings be set?

A phone number is one left-to-right run, in either digit style. Apple's guidance is that the digits of "a phone number, or a credit card number" always appear in the same order.

Inside an Arabic sentence this needs help. Under the Unicode bidirectional algorithm, numbers "act as if they were R" for the spaces and symbols around them, so the groups of a spaced number, and its plus sign, can come out in the wrong order. Isolate the run, as here: اتصل بنا على +966 5X XXX XXXX

The W3C's advice on inline bidirectional text is to wrap every opposite-direction phrase tightly and set dir on the wrapper, or to use bdi or dir="auto" when the direction is not known in advance. Phone, email, URL and code inputs stay left-to-right on an Arabic page.

How should prices and dates be written?

Prices. Both currencies now have a symbol. The riyal sign was approved on 20 February 2025 and is U+20C1, added in Unicode 17.0. The Saudi Central Bank's usage guidelines place it to the left of the numeral with a space between. The dirham sign was unveiled on 27 March 2025 and became U+20C3 in Unicode 18.0, released on 16 September 2026. Fonts take time to follow a new code point, so test for a missing glyph and keep a drawn icon or the text form as the fallback. CLDR's Arabic text forms are still ر.س. and د.إ., written after the amount. Join amount and unit with a no-break space.

Dates. CLDR's calendar preference for both Saudi Arabia and the UAE now lists Gregorian first and the Umm al-Qura Hijri calendar second. As recently as CLDR 44 it listed Umm al-Qura first for Saudi Arabia, so the same code can return a different calendar on an older device. Never rely on the default. Pass the calendar explicitly, -u-ca-gregory or -u-ca-islamic-umalqura, and label a Hijri date when both appear on one screen.

Where Recast fits

Recast is a product design studio in Amman, Jordan. The team reads and designs in Arabic and English: Arabic type is set in an Arabic family rather than a Latin fallback, and right-to-left layouts are re-set rather than mirrored. English and Arabic are designed on the same flow, in one plan at $3,900 a month.

Arabic and RTL design describes the work, pricing has the plan, and a free 20-minute pilot call, in English or Arabic, is the place to bring a screen and ask.