CEPD · Module 2 — Visual and information design for screens
Type choice, size, line height, letter joining, numerals, punctuation and mixed-direction text: the details that decide whether an Arabic course reads as native or as a translation.
About 22 min
Practice in the lesson player
Sorting, matching, quizzes, and the module gate stay behind a free account so scored answers are not public. The teaching notes below are the same cited curriculum.
01
An Arabic reviewer opens your course and says: "It looks translated." She cannot point to one error. The text is correct. But the Arabic is set in the same size as the English and looks small, the lines are cramped so dots collide, some headings use letter-spacing that breaks the joins, and a product code sits on the wrong side of its full stop. Each is minor. Together they signal that Arabic was an afterthought.
02
Setting | Guidance
Typeface | A screen-tested Arabic family designed with its Latin pair (for example IBM Plex Sans Arabic, Noto Sans Arabic, Cairo, Tajawal). Avoid decorative calligraphic faces for body text.
Size | Arabic usually needs to be set larger than Latin at the same nominal size to look equal; check visually and adjust per typeface.
Line height | More generous than Latin (often around 1.6 to 1.8 for body text) to clear ascenders, descenders and dots.
Letter-spacing | None. Tracking breaks the joins between letters. Use kashida only with a typeface and engine that support it.
Bold and italic | Use weight for emphasis. Avoid synthetic italic; Arabic has no true italic tradition.
Line length | Shorter lines than you would use in English on the same screen.
03
Arabic text can use Western digits (0123) or Arabic-Indic digits (٠١٢٣). Usage differs by country and context: Gulf government documents often use Arabic-Indic digits; many corporate, technical and financial contexts across the region use Western digits; Egyptian usage varies. Ask the client, write the decision into the style sheet, and apply it everywhere, including charts, scores and dates. Mixed digit systems in one course are one of the fastest ways to look unedited.
04
When Arabic and Latin text share a line (a product code, an email address, a term like SCORM), the Unicode Bidirectional Algorithm decides the order, and punctuation at the boundaries often lands on the wrong side. Fixes, in order of preference: set the correct base direction on the container (dir="rtl"); wrap embedded Latin runs in an isolate (the HTML bdi element, or dir="auto" on the span); and only if needed, use the invisible marks RLM or LRM next to punctuation. Test every screen with codes, numbers with units, and English terms at the end of a sentence.
05
Add an Arabic style sheet to your pattern sheet: typeface, sizes, line heights, numeral system, punctuation, emphasis rule and the bidi rules. Ask a native reviewer to check two templates against it.