Arabic typography is where most bilingual products quietly lose quality. The layout is mirrored, the copy is translated, but the text itself looks cramped, too small or slightly broken. Picking and setting an Arabic font for UI is a different job from picking one for a poster, and it decides how readable your app or dashboard feels every day.
Key takeaways
- Pick a family designed for Arabic UI text, ideally with a matching Latin, and test it with real copy before committing.
- Set Arabic about 1–2px larger than English and give it more line height (1.6–1.8 for body text).
- Use regular weight or heavier for small text, and never letter-space, italicize or justify Arabic.
- Choose your numerals early and use tabular figures anywhere numbers line up, like tables and dashboards.
Why Arabic text needs its own decisions
Arabic is a connected script. Letters change shape depending on their position in a word, dots and diacritics sit above and below the main body, and the visual size at a given font size is usually smaller than Latin. Rules that work for English, such as tight line height, light weights at small sizes and letter-spacing on labels, break Arabic text in ways users notice even if they can't name them.
What to look for in an Arabic UI font
- Designed for screens and small sizes. Clear, open letterforms and dots that stay readable at 12–14px on an average Android phone.
- A matching Latin design. Bilingual products show both scripts on the same screen. A family that covers both keeps weights, heights and tone consistent.
- Enough weights. At least regular, medium and bold for a usable type scale. Variable fonts give you finer control.
- Both numeral styles. Western (123) and Eastern Arabic (١٢٣) digits, plus tabular figures for data.
- A license that fits your product. Check whether you can embed the font in an app, not only use it on a website.
Good starting points
These open-license families (all available on Google Fonts) cover Arabic and Latin and work well in interfaces:
- IBM Plex Sans Arabic: neutral and technical, a safe choice for SaaS and dashboards.
- Readex Pro: variable weight, friendly and very readable at small sizes.
- Cairo: compact and widely used, good when space is tight.
- Tajawal and Almarai: clean, modern options for consumer apps.
- Noto Sans Arabic: broad language coverage when you also support Persian or Urdu.
Also check the system fonts. iOS and Android ship their own Arabic UI fonts, and using the system stack is fast and familiar to users. Choose a custom font when brand matters enough to justify the extra download.
Size, weight and line height
Start with Arabic body text 1–2px larger than the English equivalent, for example 16px instead of 14px, and adjust after testing on a real device. Give body text a line height of 1.6–1.8 so dots and diacritics have room, and headings around 1.3–1.4.
Avoid thin and light weights below about 16px. Arabic strokes vary more in thickness than most Latin sans-serifs, and the thin parts disappear first on low-resolution screens.
Watch for clipping. Fixed-height buttons, tight line heights and text truncation can cut off the tops of letters or the dots below them. Test your components with the tallest and deepest words in your real copy.
Things to never do with Arabic text
- Letter-spacing: it breaks the joins between letters.
- Fake italics: slanted Arabic looks broken. Use weight or color for emphasis.
- Justified text: without proper kashida support it creates uneven gaps. Align text to the start instead.
- All-caps styles: Arabic has no capitals, so labels styled with uppercase need another way to stand out, usually weight or size.
Numbers in apps and dashboards
Decide early whether the product uses Western or Eastern Arabic digits. Both are common across the region, and mixing them on one screen looks like a bug. Once decided, apply it everywhere: prices, dates, phone numbers and charts.
In tables and dashboards, use tabular figures (font-variant-numeric: tabular-nums in CSS) so digits have equal widths and columns line up. Check that your chosen font actually includes them before you design a data-heavy screen around it. My SaaS dashboard design rules cover the rest of the table details.
Pairing Arabic and Latin
If one family doesn't cover both scripts well, pair two fonts and match them by visual size, not by font size. Put the same word in both scripts side by side and adjust until they feel equal. Then match weights the same way: an Arabic "bold" and a Latin "bold" rarely look equally heavy.
On the web, you can load each font only for its own script with unicode-range, so mixed sentences always render each script in the right typeface.
Performance
Arabic fonts are large because of all the letter shapes. Load only the weights you use, serve WOFF2, subset to the scripts you support, and use font-display: swap so text appears while the font loads.
See it in real projects
You can see Arabic typography in dense data screens in the Almenasa financial dashboard and in a consumer app in Qarib food delivery. For the rest of the RTL details, see the Arabic RTL app design checklist.
FAQs
What is the best Arabic font for UI design?
There's no single best one. For most apps and dashboards, start with a family that covers Arabic and Latin, such as IBM Plex Sans Arabic, Readex Pro or Cairo, then test it with your real copy at small sizes on a real phone before committing.
Should Arabic text be larger than English text?
Usually yes. At the same font size Arabic tends to look smaller, so setting it 1–2px larger and giving it more line height makes the two scripts feel balanced.
Can I use Google Fonts in a commercial Arabic app?
Fonts on Google Fonts use open licenses that allow commercial use, including embedding in apps. Still check each font's license file, and check paid fonts carefully, since some only allow web use.
Do you design Arabic and RTL products?
Yes. I design Arabic/RTL interfaces for clients across MENA, with mirrored layouts, bidirectional text and Arabic typography done properly, and I can design the English version alongside it.