Building an Arabic and English website in Dubai: RTL, fonts and content parity
Open a freshly launched Arabic version on a phone and look at the header. The phone number reads 971 50 123 4567+, the main button has clipped its own label, and the search icon sits on the wrong side of the input. None of that is a translation problem. An Arabic version is a second layout with its own type system, and most builds ship it as a language toggle bolted onto the English one.
Translated Arabic copy commonly runs 20 to 30 percent longer than the English source, so anything with a fixed width needs slack. Arabic body text usually needs 18 to 20px where Latin reads fine at 16px. On the build side, an Arabic version adds roughly 20 to 30 percent to the cost of the equivalent English site, with copy quoted separately.
Does your business in the UAE actually need an Arabic version?
Arabic earns its budget when your buyers, or the people who sign off your invoices, work in Arabic.
It pays for itself in government and semi-government work, banking and insurance, healthcare with a local patient base, luxury retail, jewellery and perfume, real estate sold to Emirati and Khaleeji buyers, education and automotive.
It is usually wasted money for a B2B SaaS company whose pipeline sits in Europe and North America, for agencies selling to expat founders, and for services built around one expat community. A relocation service working with Russian-speaking clients needs Russian long before it needs Arabic.
Open the language report in GA4 for the last six months: if Arabic-language sessions sit under a couple of percent, the demand is not there yet. Then look at your pipeline, because any serious conversation with a government entity or a large local group tends to bring an Arabic requirement with it.
On the legal side, be careful with what circulates on agency blogs. Arabic is commonly expected when you deal with government bodies, and procurement conditions can require Arabic materials outright. I am not going to quote you a federal law number for commercial websites, because the versions repeated online rarely cite one that survives inspection. If a specific tender matters, the requirement is in that tender's conditions.
RTL is a mirrored layout, and mirroring is where builds break
The switch itself is one attribute: <html lang="ar" dir="rtl">. Everything after that is CSS discipline.
A stylesheet full of margin-left, padding-right, left: 0 and text-align: left will not flip. Logical properties will, because they resolve against the writing direction rather than against the screen.
/* one stylesheet, both directions */
.card {
margin-inline-start: 24px; /* was margin-left */
padding-inline: 16px 32px; /* start, end */
border-start-start-radius: 8px;
text-align: start; /* was left */
}
.drawer { inset-inline-start: 0; }
Tailwind ships logical utilities (ms-, me-, ps-, pe-, start-, end-) and Bootstrap 5 has an RTL build, so on a current stack this is a sweep. On an older theme with hard-coded left and right values across dozens of components, that sweep is the project. Before briefing anyone, search your stylesheet for margin-left. The size of the result set is your RTL estimate.
Mirroring is selective:
| Element | In the Arabic version |
|---|---|
| Navigation, breadcrumbs, sidebars, drawers | Mirror |
| Back and next arrows, menu chevrons | Mirror |
| Progress bars, sliders, carousel direction | Mirror |
| Numbers, prices, dates | Stay left to right |
| Latin brand names, emails, URLs | Stay left to right |
| Logo and wordmark | Never mirror |
| Play, fast-forward and rewind controls | Do not mirror |
| Photographs of people and products | Never mirror |
Playback icons are the ones people argue about. A play button points at physical playback rather than at reading direction, so flipping it makes the player look broken to the exact user you were trying to please. The same logic protects the logo: it is a picture of your brand, not a sentence.
Arabic fonts: Cairo, Tajawal, Noto Sans Arabic and IBM Plex Sans Arabic
| Font | Character | Weights | Latin pairing | Where it works |
|---|---|---|---|---|
| Cairo | Modern, Kufi-influenced, open and geometric | Variable, 200 to 1000 | Ships its own Latin, sits well with a geometric sans | Marketing pages, retail, hospitality. Heavily used in the UAE, so it can read as generic |
| Tajawal | Neutral, compact, quiet | 7 static weights, 200 to 900 | Own Latin, tidy at small sizes | Interfaces, dense pages, forms and dashboards |
| Noto Sans Arabic | Neutral workhorse, widest glyph coverage | Variable weight and width | Noto Sans | Fallback stack and multi-script content, including Persian or Urdu strings |
| IBM Plex Sans Arabic | Corporate, technical, precise | 100 to 700 | IBM Plex Sans, drawn as one family | Fintech, B2B and product documentation where Latin and Arabic sit side by side |
Cairo, Tajawal and Noto Sans Arabic are available through Google Fonts at no cost, and IBM Plex Sans Arabic is released under the SIL Open Font License. Almarai is a quieter alternative when Cairo starts to feel overexposed.
Set body copy at 18 to 20px against 16px for Latin, with line height near 1.7 to 1.9 rather than the 1.5 you might use in English, because Arabic carries meaning in dots and small strokes around the baseline and they collapse at Latin sizes. Drop letter-spacing entirely: Arabic is cursive, and positive tracking either breaks the joins or looks like it did. Forget italics and uppercase, which Arabic does not have, so emphasis comes from weight or colour, and check the weight exists in the family instead of being synthesised by the browser into a smeared faux bold. Then subset and self-host, since one Arabic weight in WOFF2 lands in the tens of kilobytes while four unsubset weights are how an Arabic page ends up slower than its English twin.
Commercial sites in the UAE use Western Arabic numerals (1, 2, 3) rather than Eastern ones. Prices, phone numbers and dates run left to right inside an Arabic paragraph, and the browser handles that until someone concatenates strings in JavaScript. Pick the font pair at wireframe stage, since the choice changes line counts and therefore the layout.
Content parity: what gets translated, and by whom
Pages that carry money or trust need full parity. The archive does not.
Full parity covers the home page, service and product pages, pricing, contact, every form, checkout and account flows, legal pages, transactional emails and invoices. Partial coverage is acceptable for a deep blog archive, case studies and careers, on one condition: the switcher must not dump the reader on the Arabic home page when an Arabic version of that page does not exist. Hide the switch there, or state that the link opens the English page.
Who writes it matters more than most clients expect. A translator moves the meaning across. A native copywriter rewrites the offer so it reads as though it was written in Arabic first. Machine output sits at the bottom, and in premium categories it is expensive: a Gulf reader spots the wrong register, the mangled gender agreement and a brand name transliterated three ways inside one scroll, and what they take away is that the company is careless. We run paid and organic for brands including Fabiana Filippi, DSQ Cosmetics and Rayhaan, where the Arabic wording gets read the way stitching on a garment gets read.
Use Modern Standard Arabic for the site body, and Gulf dialect only where you have deliberately chosen it, usually in social and ad copy. Keyword-level decisions between the two belong to search work, and our guide to Arabic SEO and localisation in the UAE covers that side.
On budget: professional English to Arabic translation is commonly quoted per word, around AED 0.25 to 0.60 depending on subject matter and turnaround, while native marketing copywriting or transcreation runs several times that. Those are reported market bands, not our rate card. Hand the writer the live pages rather than a spreadsheet of strings, because context is what stops literal translation.
The language switcher and the URL structure
Put Arabic in a subfolder, example.com/ar/, unless a separate team and stack own it, in which case a subdomain becomes a management decision rather than a technical one.
Label the language in its own script (العربية and English, not two flags), because a flag names a country and Arabic is not one. Keep the reader on the same page instead of sending them home. Reflect the choice in the URL rather than only in a cookie. And never auto-redirect by IP, since crawlers and a fair share of Gulf traffic on VPNs will land on the wrong version with no way back.
The hreflang side (ar-AE, en-AE, x-default) and how Google treats those signals sits in the same Arabic SEO piece, so there is no reason to repeat it here.
What actually breaks at acceptance
| What you see | Why | Fix |
|---|---|---|
971 50 123 4567+ in the header |
The plus sign takes the paragraph direction | Wrap the number in <bdi> or a dir="ltr" span |
| Button labels cut off or wrapping to three lines | Arabic ran 20 to 30 percent longer | Fluid widths and min-height, then retest at 320px |
| Email and phone fields reading backwards | Inputs inherited dir="rtl" |
Set dir="ltr" on those inputs, keep label and error message RTL |
| Validation messages on the wrong side | Absolute positioning left over from the LTR build | Logical properties on the message container |
| Dates showing 03/12 when you meant 12 March | Locale assumed | Format by locale, and agree Gregorian or Hijri display with the client |
| Mojibake (أر) in the database or an export | Encoding is not UTF-8 end to end | utf8mb4 columns, charset in the response header, BOM on CSV exports for Excel |
| Invoices and PDFs with disconnected or reversed letters | The PDF library does not shape Arabic | Move to a renderer with proper shaping and test with a real name |
| Transactional emails still left aligned | Email templates live outside the site build | dir="rtl" in the template, and check the Outlook fallback font |
| Chat, booking or review widget stuck LTR | The third-party iframe ignores your direction | Confirm the vendor supports RTL before you buy, not after |
The two failures that reach a paying customer fastest are the PDF and the email, because both arrive after checkout. Test them with a real Arabic name and address before launch. If your developer has never shipped an RTL build, the acceptance list above is the conversation to have first, and our guide to picking a web developer in Dubai covers how to check that claim.
What a bilingual site costs in Dubai, and how long it takes
The build side of an Arabic version adds roughly 20 to 30 percent to the equivalent English site, and content is quoted on top. Set against the build bands in our Dubai website cost guide, the arithmetic looks like this. Reported market bands, not a quote.
| Scope | Build-side add-on (AED) | Content (AED) | Timeline |
|---|---|---|---|
| Mirrored Arabic layer on a small site, 8 to 12 pages, you supply the copy | 1,500 to 4,000 | you supply it | 2 to 3 weeks |
| Same site, with professional translation and a native QA pass arranged for you | 1,500 to 4,000 | 1,500 to 4,000 | 3 to 4 weeks |
| Corporate site, 20 to 40 pages, CMS multilingual setup, translated copy | 5,000 to 15,000 | 4,000 to 14,000 | 4 to 8 weeks |
| Full parity with native copywriting, adapted visuals, e-commerce or booking flows | 10,000 to 35,000 | 12,000 to 40,000 | 8 to 14 weeks |
Price drivers, in the order they move the number: template count rather than page count, since thirty pages on four templates is cheap; who writes the Arabic; whether the CMS already handles multiple languages (WordPress with WPML or Polylang, Shopify Markets, a Next.js i18n setup); whether the current CSS uses logical properties; and how many third-party widgets need replacing.
Our redesign cost guide puts the typical Arabic addition at two to four weeks, which matches the mirrored-layer rows at the top of the table. Full parity with written copy is measured in months, mostly because copy approval moves slower than code. If someone quotes you a bilingual site in three days, they are selling a machine-translated duplicate of your CSS.
We scope this as part of web development work, and a scoping call usually takes twenty minutes once we can see the current site.
The pre-launch checklist you can run yourself
- View source on an Arabic page and confirm
<html lang="ar" dir="rtl">. - Resize to 320px and read every button. Nothing clipped, nothing wrapping to three lines.
- Type a UAE phone number, an email and a Latin brand name into an Arabic form. All three read correctly.
- Submit the form empty. Errors appear in Arabic, on the correct side.
- Complete a real purchase or booking. The confirmation email is RTL and the PDF shows connected Arabic letters.
- Use the language switch from a deep page. You land on the same page, not the home page.
- Search the site for an Arabic word with and without a hamza. Both return results.
- Ask a native speaker who has never seen the site to read the home and top service page aloud. Every place they hesitate goes on the edit list.
- Check headings, meta titles, alt text, the 404 page and the cookie banner for English left in the template.
- Print one invoice, then run Lighthouse on an Arabic URL rather than the English one.
If you want a second pair of eyes on an Arabic build before it goes live, send us the staging link through the contact page or WhatsApp on +971 58 535 3199, and we will run this list against it.
FAQ
What is RTL, and why is an Arabic site not a mirror of the English one?
RTL means the document direction runs right to left, declared with dir="rtl". The layout mirrors, but the content does not: numbers, Latin words, logos and media controls keep their original direction. A pure mirror flips things that should never flip.
What font size should Arabic body text be? Around 18 to 20px against 16px for Latin, with line height near 1.7 to 1.9. Arabic carries meaning in dots and small strokes that disappear at Latin sizes.
Which Arabic web font should I use? Cairo for marketing pages, Tajawal for interfaces and dense text, Noto Sans Arabic as a fallback or for multi-script content, and IBM Plex Sans Arabic when your Latin type is IBM Plex or a similar technical sans. All four are free to use.
How do I translate a website into Arabic without losing meaning? Give the writer the live pages rather than a string spreadsheet, use a native speaker for anything customer-facing, and keep a glossary of brand terms, product names and units so one term does not appear three ways. Machine translation is for internal drafts and nothing else.
Should the Arabic version live on /ar/ or a subdomain? A subfolder by default. A subdomain makes sense when a different team and stack own the Arabic site.
Does a UAE business have to have an Arabic website? There is no blanket rule covering every commercial site. Arabic is commonly expected when you deal with government entities, and tender conditions can require it. Check the contract in front of you rather than a general claim online.
What are the most common bilingual layout mistakes? Hard-coded left and right CSS, buttons sized to English copy, forms that force RTL onto email and phone inputs, mirrored logos and play buttons, machine-translated copy, and a switcher that sends everyone back to the home page.
How much does a bilingual website cost in Dubai? The Arabic build adds roughly 20 to 30 percent to the English site, so AED 1,500 to 4,000 on a small brochure site and AED 5,000 to 15,000 on a mid-size corporate build, with translation or copywriting quoted separately. Full parity with written Arabic copy and adapted visuals starts from roughly AED 22,000 once content is included.
Written by Artur Gall, CEO and founder of SkyLight Marketing.
Want a quote that itemises every line?
Free audit — SEO, PPC, SMM, content and production under one roof.
Get a free quote on WhatsAppWritten by Artur Gall, CEO & founder of SkyLight Marketing, Dubai.
