Hey,
Arabic on the web breaks in five predictable ways. Tracking is dropped by one engine and tears the joins in another. Marks clip when the line height is copied from Latin. Numerals get picked by accident. Almost nobody measures the font they ship.
every number here is measured in your browser, not estimated
Five things that break
Each one is a decision that defaults make for you.
-
Letter-spacing
Chromium drops tracking on Arabic without a warning: the declaration renders, the space does not appear. Engines that do apply it open the joins. Either way, the number you wrote is not the number the reader gets, so measure the line instead of trusting the property.
-
Line height
Arabic carries marks above and below the baseline, and its ascenders and descenders run longer than Latin's. The 1.4 that flatters Inter clips Amiri.
-
Numerals
Morocco, Algeria and Tunisia write 0 1 2 3. Egypt and the Gulf write ٠ ١ ٢ ٣. Most interfaces pick one for both, and one of the two audiences reads the numbers as foreign.
-
Weight
At the same pixel size, Arabic strokes read lighter than Latin ones. A Latin family with an Arabic bolted on usually ships one weight, so there is nothing to step up to.
-
Direction
Chevrons, arrows, progress bars and breadcrumbs keep their left to right geometry when the layout flips. In an RTL interface, next points backwards.
Tracking, measured
Two lines per script, identical except for 0.055em of letter-spacing. The verdict is computed in your browser when this page loads.
The Arabic letters are joined
The Arabic letters are joined
measuring
الحروف العربية متصلة ببعضها
الحروف العربية متصلة ببعضها
measuring
The first line in each pair has no tracking. The second has 0.055em. One script moves, the other does not, and the next browser may disagree with this one. That is why the number is measured rather than asserted.
Four instruments
Each one prints a measurement, or nothing at all.
- Webfont cost Fetch the actual WOFF2 files for an Arabic family and add up the bytes a visitor downloads.
- Bilingual type scale Build a scale from one base size, with the Arabic companion size and leading worked out.
- RTL audit Paste markup or CSS and get the physical properties, unmirrored icons and missing direction.
- Numeral systems Arabic-Indic, Eastern Arabic-Indic and Western digits, and what this browser formats right now.
Fifty-seven families
Every Arabic family Google serves, weighed, with a specimen set in the file we counted.
Four notes
Each one tied to a number measured here or to a clause of the Arabic Layout Requirements.
- What an Arabic webfont actually weighs Measured WOFF2 sizes for Arabic families, why the Arabic subset can be lighter than the Latin one, and what to do about it.
- Physical properties are the bug Why margin-left is a directional bug, what logical properties actually resolve to, and the cases where the physical value was right.
- Three families of numerals Western, Arabic-Indic and Eastern Arabic-Indic digits, which countries write which, and why the decision belongs to your formatter.
- Line height is not a matter of taste Arabic ascenders and descenders, vocalisation marks, and the clipping that happens when a Latin leading value meets an Arabic face.
How the numbers are made
Every tool on this site runs in your browser. It fetches the same WOFF2 files a visitor would download, counts the bytes, and prints the counts. Nothing is estimated and nothing is copied from a blog post.
Fonts are served from this domain, not from Google. The Arabic files are Google's own unicode-range subsets, which means the size you read here is the size you serve, down to the kilobyte.