text_fields UI/UX & Frontend Architecture

Designing Multilingual Web Typography: Kurdish, Arabic & Latin Harmony

Building world-class digital platforms in the Middle East requires mastering multilingual interface design where Latin, Kurdish Sorani, and Arabic scripts coexist harmoniously. This guide explores typographic scale, vertical metrics alignment, bidirectional (BiDi) layout architecture, and performance optimization for seamless cross-cultural user experiences.

person Reshape Editorial Team
schedule 10 min read
update Updated September 2026

format_size 1. The Challenge of Mixed Script Typography

Latin, Arabic, and Kurdish scripts possess fundamentally different anatomical structures. Latin fonts feature a prominent x-height with clear ascenders and descenders. In contrast, Kurdish and Arabic scripts are cursive, horizontally connected, and feature variable baseline heights with complex vertical letter stackings.

When mixed naively on the same web page, standard Latin font settings create awkward visual discrepancies: Arabic text appears significantly smaller than English text at the same font-size, line-heights clip diacritics, and buttons look misaligned.

align_horizontal_right 2. Calibrating Vertical Metrics & Line Heights

To maintain visual balance between English and Kurdish, implement optical scale compensations:

Optical Size Compensation (+15%)

Arabic and Kurdish letterforms have smaller eye-loops than Latin characters. Setting Kurdish text 10% to 15% larger than Latin body text (e.g., 16px Kurdish vs 14px English) produces equal perceived legibility.

Expanded Line Height (1.7 - 1.9)

While English body text breathes comfortably at line-height: 1.5, Kurdish script requires line-height: 1.75 to accommodate high vowel markings and stacked ligatures without vertical clipping.

swap_horiz 3. Bidirectional (BiDi) Layout Architecture with CSS Logical Properties

Legacy websites wrote duplicate stylesheets with margin-left for English and margin-right for Kurdish. Modern frontends leverage CSS Logical Properties for effortless bidirectional adaptability:

Legacy Physical Property Modern Logical Property Behavior in LTR (English) Behavior in RTL (Kurdish/Arabic)
margin-left: 16px; margin-inline-start: 1rem; Adds left margin Automatically adds right margin
padding-right: 24px; padding-inline-end: 1.5rem; Adds right padding Automatically adds left padding
text-align: left; text-align: start; Left-aligned Right-aligned

font_download 4. Curated Font Pairing Stacks for Kurdish Web Design

Selecting harmonized font pairings ensures your platform feels contemporary, professional, and trustworthy across both language communities:

  • Enterprise Tech: Pair Plus Jakarta Sans or Inter for English with Vazirmatn or Noto Naskh Arabic for Kurdish.
  • Editorial & Media: Pair Hanken Grotesk headlines with Noto Sans Arabic for clean digital journalism.
  • Code & Telemetry: Use JetBrains Mono for Latin code blocks paired with proper direction isolation (dir="ltr") inside RTL pages.

quiz Frequently Asked Questions

Why do English words inside a Kurdish paragraph sometimes jump to the wrong side? expand_more

This happens when the Unicode Bidirectional standard (BiDi) misinterprets weakly directional punctuation (like commas or brackets) adjacent to neutral characters. Wrapping embedded Latin terms in `` (Bidirectional Isolation) tags or CSS `unicode-bidi: isolate` resolves this issue permanently.

What is the best font for Central Kurdish (Sorani) on the web? expand_more

Google Fonts' Vazirmatn and Noto Sans Arabic are the industry standards. They fully support all unique Kurdish letters (ڕ, ڵ, ۆ, ێ, ە) with proper vertical metrics and variable font weights.

Should icons flip horizontally in RTL layouts? expand_more

Only icons that indicate directional movement or narrative flow (such as back/forward arrows, step indicators, and progress bars) should flip. Symmetrical icons, brand logos, and clocks should never flip.

How does Reshape structure its multilingual typography? expand_more

Reshape utilizes Plus Jakarta Sans for Latin interfaces paired with customized Noto Arabic typography, calibrated with CSS logical properties so switching between English, Kurdish, and Arabic requires zero manual layout rewrites.

Does loading Arabic/Kurdish web fonts impact page load speed? expand_more

Using WOFF2 font compression, subsetting unused characters, and declaring `font-display: swap` ensures fast rendering with zero layout shift.

RE

Curated by Reshape Technical Editorial Board

Our engineering guides are authored by full-stack architects, software engineers, and localized language researchers at Reshape in Erbil, Kurdistan Region. We publish authoritative, practical guidance designed to solve real operational challenges.