Data-Driven Architecture

النظام الطباعي — قرار واحد واضح، لا خياران متنافسان

بعد دراسة الاتجاهين، لم نعد نتعامل مع الصفحة على أنها "مقارنة بين خطين" بل على أنها نظام طباعي واحد له أدوار مختلفة. الخط العربي الكلاسيكي Amiri يُستخدم حيث نحتاج حضوراً بصرياً ووزناً افتتاحياً، بينما يتولى Tajawal مهام القراءة السريعة، والواجهات، والنصوص التي يجب أن تُقرأ بسهولة على الشاشات. في الجانب الإنجليزي، يقوم Playfair Display بدور العرض، بينما يتولى Roboto دور النص العملي. الفكرة هي بناء نبرة طباعية تبدو أكثر تميزاً وأقل اعتياداً من المواقع التقليدية، مع ضمان الوضوح التام في الشاشات الرقمية.

1. منطق العرض السريع

النصوص القصيرة، القوائم، الأزرار، والتفاصيل التي يجب أن تُفهم فوراً.

القرار: هنا يظهر دور Tajawal وRoboto. فالأولوية في هذه الطبقة ليست الشخصية البصرية، بل السرعة والوضوح والقدرة على المسح البصري السريع دون إنهاك العين.

2. منطق القراءة المريحة

فقرات الشرح، التوضيح، والمحتوى الذي يحتاج زمناً أطول داخل الصفحة.

القرار: تم الحفاظ على ارتفاع سطر مريح وأوزان متزنة لأن الصفحة لا تُعرض كملصق بصري فقط، بل كمستند استشاري يجب أن يشرح ويقنع.

3. منطق الهيبة والتميّز

العناوين الرئيسية، الجمل الافتتاحية، والنصوص التي نريدها أن تُحسّ قبل أن تُقرأ بالكامل.

القرار: هنا يدخل Amiri وPlayfair Display. ليس لأنهما "محليان" وبسيطين، بل لأنهما يملكان حضوراً تحريرياً كلاسيكياً يرفع قيمة الواجهة ويمنحها شخصية أقل استهلاكاً.

تناغم العربية والإنجليزية داخل واجهة واحدة

مرجع يوضح لماذا تحتاج الواجهات الثنائية اللغة إلى توافق في الإيقاع البصري لا إلى نسخ حرفي بين الخطين.

Open source

وضوح القراءة العربية على الشاشة

مرجع عملي حول أهمية المقروئية، والهوامش، وارتفاع السطر، وسبب نجاح الخطوط البسيطة في النصوص العملية.

Open source

أهمية السلالم الطباعية والخطوط البديلة

مرجع من نظام تصميم رسمي يبرر أهمية التسلسل الهرمي الطباعي، واستقرار الخطوط، ووجود بدائل موثوقة عند فشل التحميل.

Open source

Role 1

Display & Editorial Layer

Amiri (Arabic) + Playfair Display (English)

لماذا اختير Amiri للعناوين العربية؟

ليس لأننا ندّعي أنه "خط سوداني"، فهذا غير دقيق. اختير Amiri لأنه يقدّم شيئاً لا يقدمه Cairo: حضور افتتاحي مميز. عندما يظهر في العنوان الرئيسي أو في عبارة محورية، فإنه يعطي الصفحة وزناً تحريرياً ونبرة أكثر جدية وتميزاً. هذه هي وظيفته: أن يرفع السقف البصري للعناوين، لا أن يتحمل عبء القراءة اليومية الطويلة.

الخط البديل (Fallback Font)

بناءً على الطابع التراثي والفخم، تم اختيار عائلة خطوط (Serif) الكلاسيكية وعلى رأسها خط (Georgia) ليكون خط التراجع البديل. يضمن هذا الاختيار الحفاظ على الروح الأنيقة والأدبية للنص حتى عند انقطاع الاتصال. تُقرأ هذه الفقرة المعروضة أمامك بالخط البديل.

محارف العربية

أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ
١٢٣٤٥٦٧٨٩٠
؟ ! ، . : ؛ / - ( )

السلم الطباعي (Arabic Scale)

عرض رئيسيDisplay — 48px, Bold

عنوان أولH1 — 38px, Bold

عنوان ثانٍH2 — 30px, Bold

عنوان ثالثH3 — 24px, Bold

Why Playfair completes the Arabic display layer

If Amiri gives the Arabic side presence, Playfair Display gives the English side an equivalent editorial tone. The goal is not to make English imitate Arabic, but to make both sides feel as if they belong to the same publication. That is why Playfair works here: it has enough elegance for headlines, enough contrast to feel premium, and enough restraint to avoid turning the page into costume.

Classical Fallback Font

To maintain the editorial and premium aesthetic, a traditional native serif stack (led by Georgia) is employed as the fallback. This ensures the reading experience remains literary and structured even if the web font fails. This text block is actively demonstrating the fallback serif style.

Latin Glyphs

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
! ? , . : ; / - ( )

English Scale

DisplayDisplay — 42px, Bold Italic

Heading 1H1 — 34px, Bold

Heading 2H2 — 26px, Bold

Heading 3H3 — 22px, SemiBold Italic

Technical Specifications — Display & Editorial

Role	Font Family	Size (Mobile-Desktop)	Weight	Line Height	Usage
Arabic Display	Amiri Georgia, "Times New Roman", Times, serif	24px - 48px	400, 700	1.3 - 1.6	Hero, section titles, pull quotes, display moments
English Display	Playfair Display Georgia, "Times New Roman", Times, serif	22px - 42px	400, 600, 700	1.2 - 1.4	Hero headlines, section titles, editorial emphasis

Role 2

Body & Interface Layer

Tajawal (Arabic) + Roboto (English)

لماذا اختير Tajawal للنص العربي العملي؟

لأن وظيفته هنا توازن بين الحداثة والأصالة. يتميز Tajawal بوضوح استثنائي في الأحجام الصغيرة، مما يجعله مثاليًا لعناصر الواجهة والشروح الطويلة. هو خط يقرأ بسلاسة دون أن يبدو ميكانيكيًا بحتًا، مما يحافظ على دفء الهوية البصرية للعلامة التجارية.

الخط البديل (Fallback Font)

تم الاعتماد على خطوط النظام الافتراضية (System-UI) كبديل آمن وسريع لضمان سرعة التحميل وتفادي أي تشوه في التصميم في حال لم يكتمل تحميل الخط الأساسي. تُقرأ هذه الفقرة المعروضة أمامك حالياً باستخدام الخط البديل الفعلي لتوضيح التوافق الهيكلي.

محارف العربية

أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ
١٢٣٤٥٦٧٨٩٠
؟ ! ، . : ؛ / - ( )

السلم الطباعي (Arabic Scale)

نص أساسي للفقرات والشرحBody — 20px, Regular

نص صغير للتلميحات والملاحظاتSmall — 14px, Regular

Why Roboto supports the Arabic decision

Roboto was chosen for its unparalleled clarity and versatility in digital interfaces. It complements Tajawal by providing a structured, modern Latin counterpart that prioritizes readability across all screen sizes. This pair ensures that the bilingual interface remains cohesive and functionally superior.

System Fallback Font

System-UI fonts are designated as a robust fallback. They guarantee zero layout shifts and instant readability if the primary web font fails to load. This paragraph is actively rendered in the fallback system font to demonstrate the resulting visual structure.

Latin Glyphs

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
! ? , . : ; / - ( )

English Scale

Body text for paragraphs and descriptionsBody — 16px, Regular

Small text for hints and notesSmall — 13px, Regular

Technical Specifications — Body & Interface Layer

Role	Font Family	Size (Mobile-Desktop)	Weight	Line Height	Usage
Arabic Body & UI	Tajawal system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif	14px - 22px	400, 500, 700	1.6 - 1.8	Paragraphs, UI, labels, notes, fast scanning
English Body & UI	Roboto system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif	13px - 20px	400, 500, 700	1.4 - 1.6	Paragraphs, labels, metadata, interface text

ماذا يرى القارئ العربي في الجانب الإنجليزي؟

الفكرة هنا مقصودة: القارئ العربي لا يهمه شكل الخط الإنجليزي لذاته، بل يريد أن يفهم لماذا لم نترك الإنجليزية تذهب في اتجاه بصري مختلف. لهذا نشرح له أن Playfair وRoboto ليسا اختيارين مستقلين، بل شريكان وظيفيان لقراري Amiri وTajawal. الأول يحفظ النبرة الافتتاحية الراقية، والثاني يحفظ ووضوح القراءة وسرعة الاستخدام.

What the English reader needs to understand about the Arabic side

This page is deliberately bilingual, but it is also deliberately explanatory. An English-only reader still needs to understand why the Arabic typography was resolved this way. The answer is simple: Amiri carries the display voice, while Tajawal carries the operational voice. The English pair mirrors that structure so the whole website reads like one system rather than two parallel sites stitched together.

المصادر والدراسات المرجعية Sources & Reference Studies

معايير التيبوغرافية - نظام دبي للتصميم

تصميم الواجهات العربية: تجربة المستخدم RTL