بلوتون

المكتب

المعادي — كورنيش النيل

أبراج المهندسين، برج ٤، الدور ١٠

القاهرة، مصر

الهاتف

٠١٠٨٠٧٤٣٣٠٧

البريد الإلكتروني

info@plutonagency.com

التصميم

أسس التصميم العربي: الخط والمسافة واتجاه القراءة

أغلب المواقع العربية مبنية على أنظمة تصميم لاتينية بترجمة حرفية. النتيجة نصّ يبدو مضغوطًا ومتعبًا دون سبب ظاهر.

مدة القراءة
٦ دقائق
سنة النشر
٢٠٢٦
القسم
التصميم

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

تباعد الحروف: ممنوع بالسالب

letter-spacing سالب حيلة شائعة في العناوين اللاتينية — يجعلها أكثر تماسكًا. في العربية يفعل شيئًا مختلفًا تمامًا: يقرّب الحروف المتصلة حتى تتداخل، فتفقد الكلمة وضوحها ويصعب تمييز الحروف المتشابهة.

القاعدة عندنا: صفر أو موجب طفيف. وإن كان لا بدّ من تكثيف بصري في عنوان، فليكن عبر وزن الخط أو حجمه، لا عبر ضغط المسافات.

ارتفاع السطر: أوسع مما تظنّ

العربية تحتاج مساحة رأسية أكبر. الحروف النازلة (ج ح خ ع غ م ي) تمتدّ تحت خط الأساس، والتشكيل والنقاط تمتدّ فوقه. الارتفاع المريح في اللاتينية يقصّ هذه الامتدادات في العربية.

  • نصّ المتن: ١.٨ إلى ٢.٠ — وليس ١.٥ المعتاد لاتينيًا.
  • العناوين الكبيرة: ١.١ إلى ١.٢، مع فحص بصري لأن الحجم الكبير يُظهر أي قصّ فورًا.
  • العناوين على الهاتف: زد قليلًا (١.١٨ تقريبًا) لأن الالتفاف إلى سطرين يقرّب النزلات من الصعدات.

طول السطر ومحاذاته

السطر المريح في العربية بين ٥٥ و٧٥ حرفًا. الأطول من ذلك يُفقد القارئ موضعه عند العودة إلى بداية السطر التالي — والمشكلة أوضح في العربية لأن العودة تكون إلى اليمين.

أما المحاذاة الطرفية (justify) فهي فخّ. في اللاتينية تُوزَّع المسافات بين الكلمات فقط. أما محرّكات المتصفحات فقد تلجأ في العربية إلى تمديد الكلمات نفسها بطرق غير متّسقة، فتظهر فجوات وثقوب بيضاء عبر الفقرة. الأسلم: محاذاة إلى اليمين وترك النهاية حرة.

RTL ليس انعكاسًا كاملًا

تحويل الاتجاه لا يعني قلب كل شيء. بعض العناصر تتبع اتجاه القراءة، وبعضها يتبع أعرافًا عالمية ثابتة:

  • ينقلب: ترتيب القوائم، اتجاه الأسهم السردية، محاذاة النصّ والحقول، ترتيب الأعمدة، موضع الأيقونة بجانب النصّ.
  • لا ينقلب: أزرار تشغيل الوسائط، الشعارات، الرسوم البيانية الزمنية في كثير من الحالات، أيقونات لها معنى ثابت عالميًا.
  • يحتاج قرارًا: مؤشّرات التقدّم ومسارات التنقّل — تُقلب عادةً، لكن اختبرها مع مستخدمين حقيقيين قبل الحسم.

تقنيًا، استخدم الخصائص المنطقية في CSS بدل الاتجاهية: margin-inline-start بدل margin-left، وpadding-inline بدل padding-left/right. هكذا يعمل التخطيط نفسه في الاتجاهين دون شيفرة مكرّرة.

الأرقام: عربية أم هندية؟

مسألة يُتنازع فيها بلا داعٍ. القاعدة العملية: الأرقام الهندية (١٢٣) أنسب للمحتوى التحريري والتواريخ في السياق العربي الخالص. والأرقام العربية (123) أنسب للبيانات التقنية والأسعار والأرقام التي تُنسخ وتُلصق — لأن المستخدم يتعامل معها في أنظمة أخرى.

الاتّساق داخل السياق الواحد أهم من اختيار النظام. الخلط في الجدول نفسه هو الخطأ الفعلي.

اختيار الخط

معيار الاختيار ليس الجمال في اللوحة، بل الأداء في السطر. افحص أي خط قبل اعتماده على ثلاثة مستويات: عنوان بحجم ٦٤ بكسل، ونصّ متن بحجم ١٦، ونصّ صغير بحجم ١٢ على شاشة هاتف حقيقية. كثير من الخطوط الأنيقة تنهار عند الحجم الصغير.

  • تأكّد من وجود أوزان متعدّدة — الخط بوزن واحد يقيّد التسلسل البصري كله.
  • افحص الأرقام والعلامات اللاتينية داخله؛ كثير من الخطوط العربية تُهملها فتبدو غريبة.
  • حمّله محليًا بصيغة woff2 وحدّد المجموعة (subset) المطلوبة — الفرق في وزن الملف كبير.
  • اختبر مع تشكيل إن كان المحتوى يستخدمه؛ ليست كل الخطوط تضعه في موضعه الصحيح.

نطبّق هذا في مشاريعنا

إن كنت تخطّط لموقع جديد أو تواجه إحدى المشكلات المذكورة أعلاه، نراجع حالتك ونعطيك رأيًا صريحًا دون التزام.

تواصل معنا
كلّمنا على واتساب