Bilingual Arabic and English website design

You can push an English site through a translation tool and have Arabic back in a minute. It will look like Arabic. It will not read like Arabic to the person you are selling to. Word order gives it away first: Arabic often leads with the verb, adjectives follow the noun, and a headline built to land in English arrives flat. Register gives it away second. A trademark firm and a burger shop do not sound the same in Arabic, and a translation engine gives both the same neutral voice.

The visible failures are worse. Arabic is a joined script, so every letter changes shape according to its neighbours, and a font without proper shaping support breaks a word into disconnected letters. Numerals are the next trap: dates and percentages read naturally as ٢٨ يوليو and ٢٥٪, while a phone number should stay in Western digits so a customer can dial it. And Arabic sets shorter in most sentences but taller on every line, so a headline that wrapped to two lines in English wraps to three and pushes your call to action below the fold.

The fix is not exotic. A person who writes Arabic professionally writes it, from the intent of the English rather than its grammar, and the layout is then tested with the real words in place. That is how a bilingual storefront like Al Badawi sells handmade leather to Cairo and to London from one catalogue.

Set dir="rtl" and the browser flips the text. It does not flip your design. The composition has to mirror: the logo moves to the right of the navigation, sidebars swap sides, tables start their first column on the right, and every margin stops being left or right and becomes start or end. Directional icons mirror too — back arrows, carousel controls, progress bars. The W3C guidance on structural markup and right-to-left text is worth handing to whoever builds it.

What must not move matters as much. Your logo stays as drawn, unless someone has deliberately made an Arabic lockup. Phone numbers read left to right in every language, and so do email addresses, URLs, code, and Latin brand names such as Google, Shopify, Fawry, Paymob, InstaPay and WhatsApp. Put any of those in an Arabic paragraph and you are in bidirectional text, where the browser usually gets it right and the punctuation at the boundary usually does not. The W3C write-up on inline bidirectional markup explains why.

This is why bolting Arabic on at the end costs more than building for it. Every hard-coded left has to be found, every icon checked, every component looked at twice. It is not difficult work, but it does not compress into the last week of a project — one reason a custom build holds up where a retrofit does not.

The display typeface on this site is Clash Display. It has no Arabic glyphs at all. Feed it an Arabic heading and the browser falls back to whatever the device has, Noto Naskh on Android and Geeza Pro on an iPhone, so two visitors see two different brands and neither sees yours. A fallback stack does not fix that. You choose an Arabic face on purpose and pair it. Google Fonts filtered to the Arabic subset is the practical starting point: IBM Plex Sans Arabic, Cairo, Almarai, Tajawal and Noto Kufi Arabic.

Pair on proportion, not on name. Body copy comfortable at 1.5 line height in Inter usually wants 1.75 to 1.85 in Arabic, because the dots below the line need somewhere to go. Set letter-spacing to zero: tracking that flatters a Latin heading pulls joined Arabic letters apart. Arabic has no capitals, so hierarchy built on all-caps labels moves to weight and size — and drops a step, because Arabic reads heavier at the same nominal weight. A second family is also a second download, which is where page speed on a mid-range Android over Egyptian mobile data is won or lost.

Google recommends a separate URL for each language version of a page. If a switch only replaces text on the same URL, search engines may not discover every version. We plan the language URLs alongside the page structure, then connect matching pages with links and hreflang. See Google’s multilingual site guidance for the underlying recommendation.

We learned that on our own site. An earlier version of ymsstudio.com held both languages behind a toggle and stored the choice in the browser. Crawlers have no browser memory, so the Arabic was invisible. English now lives at /page and Arabic at /ar/page, each static HTML with its own title, description and canonical, each pointing at the other with reciprocal hreflang and an x-default. Reciprocal is the word that matters: if the Arabic does not point back, Google's documentation on localised versions says the annotation may be ignored.

Translating the page is not the same as translating the search. Egyptians type تصميم مواقع, not the literal Arabic of a phrase like web design agency, so Arabic titles, descriptions, headings and alt text have to be written for real queries rather than converted word for word. That is the point of building for search and AI visibility, and it is where hosted builders run out of room: platform limits show up first in multilingual URLs and hreflang control.

IGBS provides trademark, intellectual property and business services, and its clients read Arabic, English, French, German and Chinese. We built the public site in five languages with full Arabic right-to-left: mirrored layout, an Arabic typeface chosen rather than inherited, Arabic written by a person, separate indexable URLs per language, and hreflang tying them together. It has been live and maintained since, which is the test that means anything. If you are comparing studios, the question is not whether they can produce Arabic. It is whether the Arabic was designed or translated. Switch any bilingual site on your phone and look at the navigation, the buttons and the line breaks.

• Each language has its own page URL, title and description, with links to the equivalent translated page.
• Navigation, forms and confirmation messages work in both languages; phone numbers and email addresses remain readable.
• Arabic headings, buttons and line breaks are reviewed at mobile sizes using the real content.
• The enquiry journey is tested from the service page through a successful submission, including both language versions.

These checks are part of the agreed project scope. See our web design service in Egypt or discuss your bilingual website.

Can I use Google Translate for the Arabic version of my site?

Automatic translation can be a first draft, but customer-facing copy needs review for meaning, terminology and tone. Test the Arabic with the actual layout, forms and navigation. Whatever translation workflow you choose, publish each language on its own crawlable URL so visitors can link to it and search engines can discover it.

What has to flip in a right-to-left layout, and what must not?

Flip the composition: navigation, sidebars, table column order, form labels, list markers, and every left and right margin. Flip directional icons — back and next arrows, carousel controls, progress bars. Do not flip your logo, phone numbers, email addresses, URLs, code, or Latin brand names such as Google, Shopify, Fawry, Paymob, InstaPay and WhatsApp.

Which Arabic font pairs with my English brand typeface?

Whichever one matches its proportions, not its name. Most Latin display faces, Clash Display included, hold no Arabic glyphs, so the browser substitutes a system font and your Arabic pages stop looking like your brand. IBM Plex Sans Arabic, Cairo, Almarai, Tajawal and Noto Kufi Arabic are dependable. Give Arabic more line height, set letter-spacing to zero, and expect to drop one weight step.

Should my Arabic site be a subfolder, a subdomain, or a .com.eg?

For a business using one main domain, /ar/ subfolders are a practical option because both languages share the same hosting and publishing setup. Subdomains and country-specific domains can also work; the right choice depends on your markets and how you maintain the site. Google documents the trade-offs for each structure in its multilingual site guidance.

Will Google index my Arabic pages if I use a JavaScript language toggle?

A JavaScript toggle alone does not give each language a separate URL. Google recommends different URLs for each language and links between the versions. We serve Arabic and English as separate HTML pages with their own titles and reciprocal hreflang annotations. This makes both versions discoverable; indexing and rankings still depend on Google’s systems.