اختيار خط عربي للموقع: قراءة ووضوح وسرعة
الجواب المختصر: لا يوجد «أفضل خط عربي» لكل المواقع، لكن هناك أسئلة تحسم الاختيار: هل النص طويل يُقرأ أم قصير يُلمح؟ هل تحتاج خطًا لاتينيًا متناسقًا معه؟ وكم وزنًا ستستخدم فعلًا؟ خطوط مثل Cairo وTajawal وIBM Plex Sans Arabic وNoto Kufi Arabic تناسب الواجهات الحديثة، وNoto Naskh Arabic يريح العين في النصوص الطويلة. اختر خطًا واحدًا بوزنين أو ثلاثة، واختبره على جوال حقيقي قبل اعتماده.
اختيار الخط في الموقع العربي يحدث عادة بطريقة غير مدروسة: يعجب صاحب المشروع خط رآه في منشور إنستغرام، أو يبقى الخط الذي جاء مع القالب. ثم يكتشف لاحقًا أن الأرقام تبدو غريبة، أو أن الخط ثقيل في الفقرات، أو أن الموقع يحمّل ستة ملفات خطوط. هذه مقارنة تساعدك على قرار أوعى.
معايير المقارنة
قبل الجدول، هذه المعايير التي تهم صاحب موقع صغير:
- الوضوح في الأحجام الصغيرة: الأزرار والقوائم ونصوص النماذج تظهر بحجم صغير على الجوال.
- الأوزان المتاحة: هل يوجد وزن خفيف للنص ووزن ثقيل للعناوين؟
- الخط المتغير أم الثابت: الخط المتغير (variable) يضم مجالًا من الأوزان في ملف واحد، والثابت ملف لكل وزن.
- وجود حروف لاتينية متناسقة: مهم لأن المواقع الأردنية تمزج العربية بأسماء منتجات وعلامات إنجليزية.
- الطابع: هل يناسب الخط هوية نشاطك؟ محامٍ وصالون أطفال لا يحتاجان الخط نفسه.
الجدول: ستة خطوط مفتوحة شائعة
المعلومات التالية مأخوذة من ملفات CSS التي تقدمها خدمة Google Fonts لكل خط، بحسب ما قرأناه في نوفمبر 2026:
| الخط | الطابع العام | الأوزان المتاحة | نوع الملف | مجموعات الحروف في الخدمة |
|---|---|---|---|---|
| Cairo | حديث، هندسي نسبيًا | مجال متصل من 200 إلى 1000 | متغير | عربي ولاتيني |
| Tajawal | حديث وبسيط | 200، 300، 400، 500، 700، 800، 900 | أوزان ثابتة | عربي ولاتيني |
| IBM Plex Sans Arabic | حديث بطابع مؤسسي | من 100 إلى 700 بسبعة أوزان | أوزان ثابتة | عربي ولاتيني وغيرهما |
| Almarai | حديث ومستدير نسبيًا | 300، 400، 700، 800 | أوزان ثابتة | عربي ولاتيني |
| Noto Kufi Arabic | كوفي حديث | مجال من 100 إلى 900 | متغير | عربي ولاتيني ورموز |
| Noto Naskh Arabic | نسخي تقليدي | مجال من 400 إلى 700 | متغير | عربي ولاتيني ورموز |
الطابع العام في الجدول وصف تقريبي منا لمساعدتك على البدء، وليس تصنيفًا رسميًا. افتح كل خط واكتب به جملة من موقعك قبل أن تقرر.
متى تختار كل خط؟
مواقع الخدمات والمتاجر الصغيرة
Cairo وTajawal وAlmarai خيارات شائعة لواجهات حديثة ونصوص قصيرة: عناوين، أزرار، بطاقات منتجات. ميزة Cairo أنه متغير، فتستطيع استخدام أكثر من وزن من ملف واحد. وTajawal وAlmarai بأوزان ثابتة، فاختر منها وزنين أو ثلاثة فقط.
المواقع المؤسسية والتقنية
IBM Plex Sans Arabic جزء من عائلة خطوط تضم نسخة لاتينية بالطابع نفسه، وهذا مفيد إن كان موقعك ثنائي اللغة ويحتاج تناسقًا بين النسختين.
المدونات والمقالات الطويلة
النصوص الطويلة تحتاج خطًا مريحًا في الفقرات. الخطوط النسخية مثل Noto Naskh Arabic أقرب لما اعتاده القارئ في الكتب والصحف، وكثيرون يجدونها أريح في القراءة الطويلة. يمكنك الجمع بين خط حديث للعناوين وخط نسخي للفقرات، لكن هذا يعني ملفين، فوازن بين الشكل والحجم.
هوية قوية في العناوين فقط
إن أردت خطًا زخرفيًا أو خطًا من هوية علامتك، فاستخدمه في الشعار والعناوين الكبيرة فقط، وأبقِ النص على خط واضح.
الأداء: لماذا يهم عدد الأوزان؟
يشرح موقع web.dev أن ملف الخط لا يُطلب لمجرد وجود تعريفه في CSS، بل حين يستخدمه نص في الصفحة فعلًا، وأن تبديل الخط بعد تحميله قد يسبب إزاحة في التخطيط. عمليًا، كل وزن تستخدمه في التصميم ملف إضافي يحمّله الزائر. ثلاثة أوزان في خطين تعني ستة ملفات محتملة.
نصائح عملية:
- حدد الأوزان في الرابط بدل تحميل العائلة كلها، فخدمة Google Fonts تتيح طلب أوزان معينة فقط.
- استفد من تقسيم الحروف: ملفات CSS التي قرأناها تقسم الخط إلى مجموعات (عربي، لاتيني، وغيرها)، والمتصفح يحمّل المجموعة التي تحتاجها الصفحة.
- استخدم خاصية font-display: تذكر وثائق Google Fonts أن اختيار قيمة غير الافتراضية مناسب عادة، وتشرح MDN أن هذه الخاصية تحدد ما يظهر أثناء تحميل الخط. قيمة swap تعرض النص بخط بديل فورًا ثم تستبدله.
- للشعار فقط: تذكر وثائق Google Fonts معامل text الذي يحمّل الحروف المطلوبة فقط، وهو مفيد لكلمة ثابتة مثل اسم النشاط بخط خاص.
أخطاء شائعة في المواقع العربية
- خط القالب الافتراضي لا يدعم العربية، فيعرض المتصفح خطًا بديلًا من النظام يختلف من جهاز لآخر.
- عناوين بخط زخرفي ثقيل يصعب قراءته على شاشة صغيرة.
- تباعد أسطر ضيق: الحروف العربية بنقاطها وحركاتها تحتاج مسافة بين الأسطر أكبر قليلًا مما يحتاجه النص اللاتيني عادة.
- خطان عربيان مختلفان جدًا في الصفحة نفسها بلا سبب واضح.
اختبار سريع قبل الاعتماد
- اكتب فقرة حقيقية من موقعك بالخط، بحجم 16 بكسل، واقرأها على جوال متوسط.
- اكتب رقم هاتف أردنيًا وسعرًا بالدينار وتاريخًا، وانظر إلى شكل الأرقام.
- اكتب كلمة إنجليزية داخل جملة عربية، مثل اسم منتج، وانظر هل تتناسق.
- جرب الوزن الخفيف على خلفية ملونة. بعض الأوزان الرفيعة تختفي على الشاشات الصغيرة.
الأسئلة الشائعة
هل خطوط Google العربية مجانية للاستخدام التجاري؟
خطوط هذه الخدمة مقدمة كخطوط مفتوحة، لكن راجع رخصة كل خط في صفحته قبل استخدامه، خصوصًا إن نويت تعديله أو استخدامه في شعار مسجل.
هل أستضيف الخط على موقعي أم أستخدمه من Google Fonts؟
كلاهما ممكن. الاستضافة الذاتية تمنحك تحكمًا أكبر في الملفات، والخدمة أسهل في البداية. المهم في الحالتين عدد الأوزان وحجم الملفات.
هل أستخدم خطًا مختلفًا للنسخة الإنجليزية؟
إن كان الخط العربي يحتوي حروفًا لاتينية مناسبة، يكفيك خط واحد. وإن لم تعجبك حروفه اللاتينية، فاختر خطًا لاتينيًا متناسقًا معه.
كم وزنًا أحتاج؟
لمعظم المواقع الصغيرة: وزن عادي للنص، ووزن أثقل للعناوين، وربما وزن متوسط للأزرار. أكثر من ذلك نادرًا ما يلاحظه الزائر.
إن كان موقعك يحمّل خطوطًا كثيرة أو كان شكل النص العربي فيه غير مريح، أرسل لنا رابطه ونقترح عليك خطًا وأوزانًا تناسب نشاطك.
المصادر
- https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000
- https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700
- https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400..700
- https://developers.google.com/fonts/docs/getting_started
- https://web.dev/articles/font-best-practices
- https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display