Websites

Designing a website in Arabic and English from day one

A bilingual website is not an English site with a translation added later. What to decide at the start so both Arabic and English feel native.

Yousef Qatanani, founder of Ftoosh · 9 November 2026 · 3 min read

A bilingual website is not an English website with a translation added later. When Arabic is planned from the first sketch, both versions feel native. When it is bolted on at the end, Arabic readers notice within seconds.

Why "translate it later" costs more

Arabic reads right to left, so the whole layout mirrors: navigation, arrows, progress bars, the order of cards, even which side an icon sits on. Arabic text also runs a different length from English, and its letters need more line height to breathe. A design made only for English often breaks in all of these places at once. Fixing them after launch means reworking pages that were already "finished".

Planning both languages together is cheaper because every component is built once, already knowing it must work in both directions.

What to decide at the start

  1. Separate addresses for each language. Use clear paths such as /en/ and /ar/, so each page can be shared, bookmarked and found by search engines in the right language. Avoid switching language invisibly on the same address.
  2. A typeface pair, not a single font. Choose an Arabic typeface and a Latin one that share weight and personality, so headings feel like the same brand in both scripts.
  3. Mirrored layouts by default. Build with logical directions (start and end) instead of fixed left and right, so the Arabic version mirrors itself rather than being redrawn.
  4. Numbers. Decide whether Arabic pages use Western digits (123) or Eastern Arabic digits (١٢٣), and apply it everywhere, including prices, phone numbers and dates.
  5. Who writes the Arabic. Machine translation is a starting point, not a finish. The Arabic should be written or reviewed by a native speaker for your audience, whether that is Gulf, Levantine or broader.

Content is the real work

The layout is the easy part. The harder part is writing the same message well twice. A clever English headline often has no Arabic equivalent, and a direct translation can sound stiff or formal. It is better to agree on what each page must say, then write each language for its own readers. Sometimes the Arabic headline is different, and that is fine.

Details that show you cared

  • The language switch keeps visitors on the same page instead of sending them home.
  • Forms accept Arabic names and local phone formats.
  • Search engines are told which page is the translation of which, so each language ranks on its own.
  • Images with text in them have an Arabic version, or no text at all.
  • Emails and confirmation messages arrive in the language the visitor used.

The short version

Treat Arabic and English as two first-class versions of one site. Decide the structure, typefaces, numbers and tone at the start, and both audiences will feel the site was made for them. This site was built that way; switch the language at the top to see both.