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

تفتح تطبيقاً عربياً فتحس إن النص «يخنق»: الحروف متلاصقة، النقاط تصطدم بالسطر اللي فوقها، والعنوان يبان أصغر من الإنجليزي اللي جنبه. المشكلة غالباً مو في الخط نفسه؛ المشكلة إن الإعدادات أُخذت من تصميم إنجليزي ونُسخت كما هي.

ليش العربي يحتاج معاملة مختلفة؟

الحرف العربي له امتدادات فوق وتحت السطر أكثر من اللاتيني: النقاط، والهمزات، والحركات، والحروف النازلة مثل الياء والميم. ونفس الحجم الرقمي يطلع بصرياً أصغر في كثير من الخطوط العربية. عشان كذا الأرقام اللي تشتغل مع Inter أو Roboto ما تشتغل كما هي مع خط عربي.

القواعد الأساسية للأحجام

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

الأوزان: قليل منها يكفي

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

خلط العربي بالإنجليزي والأرقام

• اختر خطاً عربياً له عائلة لاتينية متناسقة، أو اضبط حجم الخط اللاتيني المرافق حتى يتوازن بصرياً.
• حدّد من البداية: أرقام عربية مشرقية (١٢٣) أو أرقام غربية (123)، وثبّت الاختيار في كل المنتج.
• انتبه لاتجاه النص في الجمل المختلطة مثل أسماء المنتجات والإيميلات وأرقام الجوال.
• الأسعار والأرقام الطويلة: تأكد إن الفواصل والعملة في مكانها الصحيح في الاتجاه من اليمين لليسار.

أخطاء تتكرر كثيراً

• استخدام خط لا يدعم العربي، فيرجع المتصفح لخط النظام بشكل عشوائي.
• النص العربي بحروف متباعدة (letter-spacing)؛ هذا يكسر اتصال الحروف.
• محاذاة الفقرات بالضبط مع توزيع الكلمات، فتظهر فراغات كبيرة داخل الأسطر.
• نص مائل صناعياً؛ العربي ما له مائل حقيقي في أغلب الخطوط.
• النص المتدرّج في العناوين يقص النقاط لو كان ارتفاع السطر ضيقاً.

اختبار الخمس دقائق

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

كيف تختار الخط العربي المناسب؟

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

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

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

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

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

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