Arabic typography
Multilingual

Which common Arabic RTL website errors ruin the experience?

Typography and direction errors hurt Arabic websites far more than most managers notice. The short answer first: Arabic script is cursive, so any letter-spacing breaks the joins between letters; mixed Latin content flips when direction is set in CSS instead of markup; an unmatched fallback font shifts the layout at load; and Arabic needs more line-height than Latin. This article walks through the five most common errors, with a practical fix for each and a pre-launch checklist, based on official W3C, MDN and Google Fonts documentation and on the practices we apply at Somu Raqami to our clients' sites.

Key points

Letter-spacing breaks the joins between Arabic letters; remove it from Arabic text and use word-spacing instead.
Set direction with the dir attribute in HTML markup, not with the CSS direction property alone.
A fallback font with matched metrics (size-adjust plus ascent and descent overrides) prevents layout shift when the web font loads.
Arabic needs more line-height than Latin because of diacritics and tall ascenders and deep descenders.
Only directional icons should mirror under dir=rtl; neutral icons stay as they are.

The error, its effect, its fix, its reference

The five errors at a glance: what the client sees, the practical fix and the official documentation.

The error	What the client sees	The practical fix	Official reference
Positive letter-spacing on Arabic text	Detached letters and hard-to-read headings	Set letter-spacing to normal or 0 on Arabic text	MDN: letter-spacing
Uncontrolled direction on mixed text	Phone numbers and Latin brand names flipped inside the sentence	dir=rtl on html and isolate Latin runs with dir or bdi	W3C: qa-html-dir
Fallback font with different metrics	Content that jumps on screen as the web font loads	size-adjust with ascent-override, descent-override and line-gap-override	MDN: size-adjust
Tight line-height inherited from Latin designs	Letters and diacritics clipped at the top or bottom	Raise Arabic line-height to at least 1.7	MDN: line-height
Directional icons not mirrored in RTL	A "next" arrow pointing the wrong way	Mirror the icon with scaleX(-1) only inside [dir=rtl]	MDN: scaleX()

Letter-spacing: the error that disconnects Arabic letters

Arabic is a cursive script: every letter joins its neighbour according to its position in the word. The CSS letter-spacing property adds space after every character without knowing anything about those joins, so the result is a text cut into separate letters. The error shows up most often in headings, when styles designed for Latin text are copied onto the Arabic version as they are.

The fix is simple: set letter-spacing to normal or 0 on Arabic text, and use word-spacing if you want to open up a heading without breaking the joins. Keep letter-spacing for the Latin content on the page only. At Somu Raqami, removing this spacing from Arabic headings is a standard step in every project.

letter-spacing: normal or 0 on Arabic elements.
word-spacing to open up headings without breaking letter joins.
Keep positive letter-spacing values for Latin content only.

Mixed-content direction: why phone numbers and brand names flip

Any Arabic sentence containing a phone number, a Latin brand name, a link or an order reference needs an explicit direction. The Unicode bidirectional algorithm classifies every character, and digits read left to right even inside an Arabic context. Without proper isolation, the number or the brand name lands in the wrong place in the sentence.

The fix starts at the root: add dir=rtl and lang=ar to the html tag of every page. Inside the text, isolate every Latin run in an element with dir=ltr or in a bdi element, and use dir=auto for the fields the client types into. The W3C recommends logical properties such as margin-inline-start instead of fixed right/left values, and warns against relying on the CSS direction property alone: styles can be disabled or lost when content is copied.

dir=rtl on the html tag of every Arabic page, including error pages.
Isolate Latin runs with span dir=ltr or bdi.
dir=auto in input fields that receive client names.
Logical properties (inline-start/inline-end) instead of fixed right/left.

Font fallback layout shift: metrics and size-adjust in plain words

When an Arabic web font loads with font-display: swap, the browser first renders a fallback font and then swaps in the web font. If the two fonts' metrics differ — letter widths and heights — the text moves and the page jumps, which is most visible on phones, where these shifts are felt the most.

The fix has three simple parts: size-adjust is a zoom dial applied to the fallback font so its letters occupy the same space the web font will occupy; ascent-override, descent-override and line-gap-override pin the vertical metrics so the lines stay put no matter which font renders. At Somu Raqami we declare a metrics-matched fallback with a simple percentage adjustment, and we measure the result at a real phone width, never on a desktop screen.

Declare a local fallback font in @font-face instead of letting the system choose.
Set size-adjust to a percentage that matches the fallback to the web font.
Pin ascent, descent and line-gap with the metric override descriptors.
Measure the shift at a real phone width: desktop measurements hide these jumps.

Line-height: Arabic needs more room than Latin

Arabic carries diacritics above and below the letters, deep descenders and tall ascenders. A line-height inherited from Latin designs — around 1.2 or 1.4 — clips the diacritics or presses the lines together and makes reading hard work.

Use a unitless value such as 1.7 on long text: it scales with the font size in every context, and go higher for vocalised headings. Also check that overflow: hidden does not clip descenders or diacritics, and that service cards do not impose a fixed height on vocalised Arabic text.

A unitless line-height on Arabic text.
A higher value for vocalised and large headings.
Avoid fixed pixel heights in cards and buttons.

Mirrored icons and SVG text: what must flip and what must not

Icons that carry a directional meaning — next arrow, back, share, undo — must mirror their direction in an Arabic interface, otherwise they point the client the wrong way. Neutral icons like the clock, search or camera never mirror. Mirroring is not automatic: the Unicode algorithm mirrors punctuation characters, not icon drawings.

The practical fix: apply transform: scaleX(-1) to directional icons only inside the [dir=rtl] selector, or export two versions of the drawing. In an SVG, add direction=rtl to the svg tag, and to change direction inside a tspan element add unicode-bidi with the value embed, as the W3C documents in its SVG tutorial.

Mirror the directional: navigation arrows, back, share, undo.
Do not mirror the neutral: clock, search, camera, location.
scaleX(-1) under [dir=rtl] instead of editing icon files by hand.
direction=rtl in svg and unicode-bidi: embed in tspan for Arabic text inside drawings.

The pre-launch checklist for an Arabic site

This list sums up the whole article: review it before publishing any Arabic page, and at every new launch. Every item can be checked by eye, exactly as your client sees it.

The html tag carries lang=ar and dir=rtl on every page, including error pages.
No positive letter-spacing on any Arabic text.
Every phone number, Latin name or link inside an Arabic sentence is isolated with the correct direction.
The fallback font has matched metrics and the shift is measured at a real phone width.
Arabic line-height reaches at least 1.7 unitless and clips no diacritics.
Directional icons are mirrored under RTL and neutral icons are intact.
SVG texts carry direction=rtl.
Full test with the web font blocked to see the fallback state.

FAQ

Can letter-spacing be used with Arabic text?

No. Arabic is cursive and positive spacing cuts the joins between letters, making the word read letter by letter. Remove the spacing from Arabic text and use word-spacing if you want to open up a heading.

Why does a phone number or brand name flip inside an Arabic sentence?

Because digits and Latin text read left to right even inside an Arabic context. Isolate the run in an element with dir=ltr or bdi, or use dir=auto in fields the client types into.

What is the difference between size-adjust and font-size-adjust?

size-adjust is an @font-face descriptor that works like a zoom dial on the fallback font so it occupies the same space as the web font. font-size-adjust is a property on the element that adjusts the apparent size. For layout shift, use size-adjust together with the metric overrides.

Should every icon be mirrored in an Arabic interface?

No. Mirror only the directional icons: navigation arrows, back, share, undo. Neutral icons like the clock, search or camera stay as they are; mirroring them is a common mistake.

Why does Arabic text look clipped at the top or bottom?

Usually because the line-height is too tight or an overflow: hidden clips diacritics and descenders. Raise the line-height on Arabic text and review containers that impose a fixed height.

Is direction: rtl in CSS enough?

No. The W3C and MDN recommend setting direction in markup via dir on the html tag, because CSS styles can be disabled or lost when content is copied, leaving the text reversed again.

Related resources

Website developmentGo to the service page.Brand identityGo to the service page.Audit your current siteGo to the service page.