Arabic and Persian typography for the web

What changes when the script is Arabic

Most web type is tuned for Latin: tight tracking, close display lines, weights chosen by number. Applied to Arabic or Persian, those settings pull letters apart and make wrapped lines collide. Setting a page right-to-left fixes none of this; direction is covered in publishing right-to-left. This article covers the type. Three facts drive it: the letters join, the ascenders and descenders extend much further than Latin ones, and Persian uses characters Arabic does not².

Joined letters: why tracking breaks Arabic

Arabic is cursive: the only spaces inside a word sit next to letters that do not join on both sides². The CSS specification says cursive scripts "do not admit gaps between their letters"³. Faced with letter-spacing, a browser may stretch the joins or leave the letters unspaced, and authors are advised to avoid it unless they accept results that differ between browsers³.

Tracking also costs ligatures. When spacing between characters is not zero, browsers should not apply optional ligatures³⁴, and in OpenType only the rlig feature counts as required³. Gravity sets letter-spacing to zero on Arabic-script labels and headings, because tracking breaks joined letters¹.

Stretching Arabic on purpose

Arabic widens words its own way. Kashida lengthens the connection between joined letters; tatweel, U+0640, is a fixed-width character inserted between them². Both justify lines and can make a heading more visible, but neither is letter-spacing: the stretch runs along the baseline, unevenly, and too much of it makes the text look patchy². Tatweel is part of the text, so it is copied and indexed with the word; keep it for display lines you control. CSS forbids justification from opening gaps between joined Arabic letters but does not require elongation³, so test justified Arabic in each browser you support.

Size and line height across two scripts

Arabic's tall ascenders and deep descenders need room, or a wrapped headline collides with itself. Publishing right-to-left gives Gravity's values; check yours on real headlines that wrap.

Size is harder: at the same font-size, the two scripts often do not look the same size. The W3C lists "the size issue" in mixed texts among the points to weigh when choosing an Arabic font², and its own example of styling by language sets Arabic at 120%⁵. But a font-size on :lang(ar) also enlarges any Latin inside, such as a brand name in an Arabic headline. The size-adjust descriptor scales one font face instead, multiplying its glyph outlines and metrics; it has worked across browsers since September 2023⁷. Declare the Arabic face with size-adjust, and only its glyphs grow.

Persian is more than Arabic with extra letters

Persian and Arabic share a script but not a character set. Persian adds پ, چ, ژ and گ. It writes ی (U+06CC) and ک (U+06A9) where Arabic writes ي (U+064A) and ك (U+0643)². A font must include the Persian forms, and draw them well, before it can set Persian.

Persian also relies on the zero-width non-joiner, U+200C, an invisible character that stops two letters within a word from joining. The W3C marks it as used in Persian, not Arabic, and says such control characters should be kept when text is stored and displayed². Delete it and letters join that should not; turn it into a space and one word becomes two.

Digits are characters too; which set each audience reads is covered in the pillar article. Put the digits you want in the text rather than relying on a font. Intl.NumberFormat's numberingSystem option has a locale-dependent default¹⁰, so name arabext, the Extended Arabic-Indic digits of a Persian edition, or latn explicitly¹¹. Gravity keeps Latin digits in its market ticker¹.

Choosing an Arabic-script family

All four families below are on Google Fonts under the SIL Open Font License.

Vazirmatn describes itself as a Persian/Arabic font for web pages and applications¹⁸; Amiri is a classical Naskh for books and running text¹⁷; Google Fonts lists Persian among Noto Naskh Arabic's languages¹⁵. Whatever a listing says, test with real Persian: the four extra letters, ی and ک in every position, a zero-width non-joiner, and the digits ۴۵۶.

A weight number is only a request

A static family renders only the weights it has. For a missing weight, the browser substitutes by rule: below 400 it tries lighter weights first, then heavier; above 500, heavier first⁹. Amiri has only 400 and 700¹⁶, so a headline set at 300 renders in Amiri Regular and one at 600 in Amiri Bold. A variable family renders any weight on its axis; Gravity's own pages set Vazirmatn at 100 for display, 200 for titles and 300 for ledes¹. Two families can also divide the work: the Arabic edition of Gravity's Luxury template uses Amiri for display and IBM Plex Sans Arabic for the interface¹.

Pairing a Latin family with an Arabic one

Arabic-script pages still carry Latin: brand names, handles, tickers. The font stack's order decides which family draws it. Many Arabic families include Latin glyphs; Vazirmatn's come from Roboto, and the project also publishes a version without them¹⁸. List the Latin family first and the Arabic one second, so Latin characters use the Latin family and Arabic letters fall through to the Arabic one. Then match the two by eye, not by weight number, adjusting the Arabic face's weight and size-adjust until they look consistent.

Scope Arabic styles with :lang() rather than classes: it matches elements that inherit their language from an ancestor, and :lang(fa) also matches fa-IR⁵. It depends on the language being declared, usually with the lang attribute⁶. Latin handles inside Arabic also need isolating, with dir="auto" or bdi, or "@handle" displays as "handle@"¹; that bidirectional text problem is covered in the pillar article.

The fallback trap

Web fonts arrive after the page, so frameworks generate stand-in faces to hold the layout; the Next.js font loader adds an automatic fallback by default to reduce layout shift¹². A stand-in is an ordinary @font-face rule, and a rule with no unicode-range covers every character: the initial value is U+0-10FFFF⁸.

There are two fixes. Gravity names the families directly, in order: Latin family, Arabic family, then the generated fallback, so Arabic letters reach the Arabic face first¹. If you write the fallback face yourself, give it a Latin-only unicode-range; a face is used, and downloaded, only for characters in its range⁸.

A CSS checklist for Arabic-script type

/* Latin family first, the Arabic face by name, fallbacks last. */
:root {
  --font-text: "Latin Sans", "Arabic Sans", "Latin Sans Fallback",
    system-ui, sans-serif;
}

/* The Arabic face: Arabic code points only, scaled to sit
   level with the Latin beside it. */
@font-face {
  font-family: "Arabic Sans";
  src: url("/fonts/vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200D,
    U+FB50-FDFF, U+FE70-FEFF;
  size-adjust: 108%; /* illustrative: judge by eye */
}

/* A fallback you write yourself: Latin only, so it can
   never claim an Arabic letter. */
@font-face {
  font-family: "Latin Sans Fallback";
  src: local("Arial");
  unicode-range: U+0000-00FF;
}

/* Arabic-script settings, scoped by language. */
:lang(ar),
:lang(fa) {
  letter-spacing: 0;
  line-height: 1.8; /* illustrative */
}

What this means for an IB's page

For an introducing broker whose audience reads Arabic or Persian, the type is seen before a word is read, and broken words or colliding lines say the page was made for someone else. The risk warning needs the same care: it only protects readers who can read it comfortably. A page that reads natively is the point of an IB website over a social feed.