أفضل خطوط عربية في الواجهات لتصميم احترافي

ابدأ بخط IBM Plex Sans Arabic للنص الأساسي وTajawal للعناوين، بحجم 17 بكسل وارتفاع سطر 1.8. هذه الوصفة وحدها ترفع مستوى أي واجهة عربية خلال دقائق. اختيار خطوط عربية في الواجهات ليس مسألة ذوق شخصي فقط؛ إنه قرار يمسّ سرعة القراءة، وثقة المستخدم، ومعدل إتمام الطلب داخل تطبيقك. سأشرح لك الخطوط التي أثق بها فعلًا بعد تجربتها في مشاريع خليجية، ولماذا أفضّلها، وكيف تضبطها بنفسك دون الحاجة إلى مصمم بدوام كامل.

لماذا يبدو تطبيقك «غير احترافي» بسبب الخط؟

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

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

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

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

الخط، ببساطة، أول ما يقرأه المستخدم عنك قبل أن يقرأ كلمة واحدة من محتواك.

معايير لا تتنازل عنها عند اختيار خط الواجهة

قبل الغرق في أسماء الخطوط، ضع قائمة تحقق قصيرة. أستخدمها في كل مشروع، وتوفّر أسابيع من التعديلات المتأخرة.

• عدد الأوزان: لا تقبل بأقل من ثلاثة (عادي، متوسط، عريض). الخط ذو الوزنين يدفع المتصفح إلى تزييف العريض، وهذا يشوّه اتصال الحروف العربية.
• دعم الأرقام بنوعيها: الغربية (123) والعربية الهندية (١٢٣)، مع أرقام جدولية متساوية العرض للفواتير والتقارير.
• وضوح النقاط: افحص «بـ تـ ثـ نـ يـ» بحجم 13 بكسل. إن التبست النقاط عليك، استبعد الخط فورًا.
• رفيق لاتيني منسجم: ستكتب حتمًا Wi-Fi وiPhone وأسماء علامات تجارية داخل النص العربي.
• الترخيص: هل يسمح بالتضمين داخل تطبيق جوال، أم للويب فقط؟ الفرق يظهر في الفاتورة.
• حجم الملف: الخط العربي أثقل من اللاتيني لأن الحرف الواحد له حتى أربعة أشكال حسب موضعه في الكلمة.

هناك معيار سابع يغفله الجميع تقريبًا: هل يبدو الخط طبيعيًا في الكلمات المفردة؟ واجهات التطبيقات مليئة بكلمات قصيرة مثل «حفظ» و«إلغاء» و«السلة». بعض الخطوط الجميلة داخل الفقرات تبدو مرتبكة في زر من كلمتين، لأن تناسبها صُمم لكتل نصية طويلة.

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

أفضل خطوط عربية مجانية للواجهات في 2026

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

• IBM Plex Sans Arabic: خياري الأول للنص الأساسي. أوزان متعددة، حروف هادئة، نقاط واضحة حتى في الأحجام الصغيرة، ورفيق لاتيني من العائلة نفسها.
• Tajawal: هندسي وعصري، رائع في العناوين وأزرار الإجراء. أستخدمه بوزن 700 فوق نص من IBM Plex.
• Cairo: من تصميم محمد جابر، متوفر كخط متغيّر، ودود الطابع ومناسب لتطبيقات المحتوى والمجتمعات.
• Almarai: أوزانه محدودة، لكنه نظيف ومقروء ويعمل بامتياز في لوحات التحكم والجداول.
• Readex Pro: خط متغيّر يوازن العربي واللاتيني بانسجام لافت، مفيد جدًا للتطبيقات ثنائية اللغة.
• Noto Sans Arabic: تغطية لغوية ضخمة، وخيار آمن كخط احتياطي دائم في نهاية القائمة.
• خط دبي: أطلقته حكومة دبي بالتعاون مع مونوتايب عام 2017، مجاني تمامًا، ويمنح إحساسًا محليًا مألوفًا لمستخدمي الإمارات.

رأيي بصراحة؟ لا تجمع أكثر من خطين. الثنائي «Tajawal للعناوين + IBM Plex Sans Arabic للنص» يغطي معظم الحالات ويبدو مصقولًا فورًا. وإن أردت خطًا واحدًا فقط، فاختر IBM Plex واصنع التباين بالأوزان لا بخط ثانٍ.

لو كنت تبني تطبيقك عبر منصة no code عربية، فغالبًا ستجد هذه الخطوط جاهزة ضمن إعدادات الهوية البصرية، دون رفع ملفات ولا شيفرة.

الخطوط التجارية: متى تستحق ميزانيتك؟

ادفع حين تكون الهوية البصرية أصلًا من أصول شركتك: بنك، شركة اتصالات، علامة تجزئة تنافس على التميّز. فيما عدا ذلك، المجاني كافٍ ومحترم تمامًا.

من العائلات التجارية التي تستحق النظر: 29LT Bukra و29LT Zarid Sans من مسبك 29LT، وGreta Arabic بمرونتها الهائلة في الأوزان والعروض، وFrutiger Arabic بوضوحه العالي في لوحات الإرشاد، إضافةً إلى عائلة GE SS المنتشرة في هويات خليجية كثيرة. جميعها مصمّمة عربيًا من الأساس، لا مجرّد إضافة لاحقة لخط لاتيني.

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

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

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

ما المقاسات والتباعد المناسبان للنص العربي؟

استخدم 17 بكسل للنص الأساسي بدل 16 المعتاد لاتينيًا، وارتفاع سطر بين 1.7 و1.9، وتباعد أحرف صفر تمامًا. اجعل عرض السطر بين 60 و70 حرفًا، والعناوين من 22 إلى 32 بكسل بوزن 600 أو 700، ولا تنزل بالنص الثانوي تحت 14 بكسل أبدًا.

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

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

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

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

الأرقام والعملات والمزج مع الإنجليزية

في السوق الخليجي، الأرقام الغربية (123) هي السائدة في الواجهات الرقمية، حتى داخل محتوى عربي بالكامل. اعتمدها افتراضيًا، واترك الأرقام العربية الهندية للمحتوى التحريري أو حين تطلبها جهة حكومية تحديدًا.

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

لمزج اللاتيني بالعربي، رتّب عائلة الخطوط بذكاء. المتصفح يأخذ كل حرف من أول خط يملكه في القائمة، فإن أردت لاتينيًا من Inter وعربيًا من IBM Plex Sans Arabic، ضع Inter أولًا. عكس الترتيب يمنحك لاتينيًا مأخوذًا من الخط العربي، وقد لا يعجبك شكله إطلاقًا.

أرقام الهواتف والروابط تحتاج معاملة خاصة. رقم مثل ‎+971 50 123 4567‎ ينقلب ترتيب أجزائه داخل فقرة عربية بسبب خوارزمية الاتجاهين. ضعه في عنصر باتجاه من اليسار إلى اليمين أو استخدم وسم bdi، وتنتهي المشكلة نهائيًا. الأمر ذاته ينطبق على أرقام الآيبان وأكواد الطلبات في شاشات الفوترة العربية في التطبيقات.

كيف تحمّل الخط دون إبطاء تطبيقك؟

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

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

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

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

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

أخطاء شائعة وقائمة تحقق قبل الإطلاق

معظم مشاكل الخطوط العربية تتكرر بنفس الشكل. هذه أكثرها انتشارًا مع علاجها المباشر.

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

قبل الإطلاق، امشِ على هذه القائمة القصيرة: هل يظهر الخط نفسه على آيفون وأندرويد وويندوز؟ هل الأرقام محاذية داخل الجداول؟ هل تظهر رموز العملات كاملة؟ هل يمكن قراءة الإيصال المطبوع من التطبيق دون عناء؟ هل تعمل الشاشة عند تكبير خط النظام إلى 130%؟

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

خطوتك التالية

لخّص القرار في سطر: IBM Plex Sans Arabic للنص، Tajawal للعناوين، 17 بكسل، ارتفاع سطر 1.8، وزنان محمّلان فقط. طبّق ذلك اليوم وستلاحظ الفرق قبل أن تنهي فنجان قهوتك.

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

Frequently Asked Questions

ما أفضل خط عربي مجاني لتطبيق تجارة إلكترونية؟

IBM Plex Sans Arabic للنص وأسماء المنتجات، مع Tajawal بوزن 700 للعناوين والأزرار. السبب أن IBM Plex يوفّر أرقامًا جدولية تحافظ على محاذاة الأسعار داخل السلة والفواتير، ونقاطه واضحة في الأحجام الصغيرة. كلاهما مجاني للاستخدام التجاري ومتاح عبر Google Fonts دون أي رسوم ترخيص.

هل أستخدم الأرقام العربية الهندية أم الغربية في الواجهة؟

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

كم وزنًا من الخط أحتاج فعليًا في التطبيق؟

وزنان يكفيان في أغلب المشاريع: عادي 400 للنص، وعريض 700 للعناوين والأزرار. أضف الوزن المتوسط 500 فقط إن كانت واجهتك تحوي جداول وتسلسلًا هرميًا معقدًا. كل وزن إضافي يعني ملفًا يُحمَّل ويبطئ الظهور الأول للنص، خصوصًا على شبكات الهاتف خارج المدن الكبرى.

لماذا يظهر رمز الريال السعودي مربعًا فارغًا؟

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