Colour, Type and Arabic-Friendly UI on UAE Websites

A UAE website that looks considered in English and broken in Arabic did not finish the design. Colour, type and direction are one system. If you bolt on Google Translate and keep the buttons on the left, you told Arabic readers they were optional.

I specify this on almost every Dubai brief, even when the first launch is English-only: choose Latin faces that will not fight a future Arabic cut, and choose colours that still read on a phone at noon. Fixing both after the brand guidelines are laminated is more expensive than doing it in week one.

Brand colours that die in sun glare

Agency palettes are approved on a calibrated display in an office. Customers stand on a pavement in Sharjah. Light gold on white, mint on sky photos, and 16% black body copy all disappear. I push brand colours into large fields and buttons only when the contrast holds. Otherwise the colour is a stripe, a hover, a chart — not the paragraph.

Red and green as the only error/success pair is a problem for colour-blind users; add an icon or text. Luxury gold as text is a problem for everyone; I argued the quiet version in luxury web design. Test the header outdoors. If you cannot see Services, neither can a driver at a light.

Pairing Arabic and Latin type

Do not take a Latin display face and hope the browser falls back to a random Naskh. Specify an Arabic family with a matching weight: not a decorative Diwani for UI, not a Latin gothic that has three Arabic glyphs. Sizes: Arabic often needs a slightly larger pixel size and more line-height than English for the same perceived weight.

• UI and body: a workhorse pair (one Latin, one Arabic) with enough weights to avoid fake-bold.
• Headlines: a display pair that shares mood — both calm, or both sharp — not a fashion serif next to a default Tahoma.
• Never mix Arabic and English in one sentence unless it is a brand name or a legal citation you cannot avoid.

Webfonts: subset, limit weights, and do not block the first paint on four italic files you never use. Fallback metrics should not shove the Arabic into the Latin button padding. That is a CSS job, not a “the translator will fix it.”

RTL is a layout, not a font swap

Right-to-left means the grid flips: logo, menus, chevrons, form labels, the WhatsApp chip, breadcrumbs. Icons that mean “forward” must mirror or they point to the wrong future. Numbers and bilingual product names need a plan so they do not reverse into nonsense.

I implement dir="rtl" on the Arabic documents (or a proper lang and direction on the root), not a CSS direction hack on a single div while the rest of the app stays LTR. The operational checklist for switchers and SEO is in bilingual Arabic and English websites. This article is the visual half: type, colour, and whether the UI still looks like you meant it.

What Google Translate does to a layout

Widgets inject a toolbar, stretch strings, break buttons, and leave the structure English. Legal copy and medical copy become a liability. If you cannot fund Arabic yet, say EN only. A half translation is worse than a clear English site with a note that Arabic is coming.

A type scale that holds on cheap Androids

I set a simple scale: body, small, H3, H2, H1, and I check wrap at 360px. Headlines that look editorial on a 1440px mock will orphan prepositions on a phone. Letter-spacing on Arabic is not the same craft as tracking on Latin; go easy. Buttons need padding that still works when the Arabic label is longer than “Submit.”

Contrast and focus styles belong in this system too. If the type is beautiful and the focus ring is missing, keyboard users disappear. That overlap is in accessible web design in Dubai.

Bring the brand PDF if you have one. Bring the Arabic wordmark. I will tell you which colours survive, which Latin face has a respectable Arabic partner, and whether we should wait on AR until the English UI is simpler. Message ITZ with screenshots of both languages if they already exist. The ugly one is usually the truth of the system.

Frequently asked questions

Can I use the same Latin display font for Arabic?

Only if it actually contains quality Arabic glyphs. Most fashion serifs do not. Pair a Latin face with an Arabic face that matches weight and mood, and size Arabic a little larger.

Why do my brand colours fail on mobile in Dubai?

Sun glare and bright screens. Pale gold, light grey type, and low-contrast pastels disappear. Darken the text, keep large areas simple, and test outdoors.

Is a Google Translate widget enough for Arabic UI?

No. It leaves layout left-to-right, breaks forms, and produces sentences you would not print. Real Arabic needs RTL, a switcher, and a human pass.