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

أي خط تختار لواجهتك؟

خط تجوال (Tajawal): بأوزان من 200 إلى 900 للمواقع التسويقية والهويات الرقمية. تجنّب 200 و300 في النصوص الصغيرة.
خط المراعي (Almarai): أوزان من 300 إلى 800 بفتحات واسعة نسبيًا داخل الحروف. خيار عملي لصفحات الخدمات والمتاجر حين تكفي أوزان قليلة.
خط آي بي إم بلكس سانس العربي (IBM Plex Sans Arabic): أوزان من 100 إلى 700، منها 500 و600 المفيدان لعناصر التنقل. يناسب لوحات التحكم والتطبيقات والتوثيق التقني.
خط نوتو سانس عربي (Noto Sans Arabic): للمواقع المتعددة اللغات، إذ يغطي العربية والفارسية والأردية واللاتينية في ملف متغير للسماكة والعرض.
خط القاهرة (Cairo): للعناوين والواجهات ذات الفراغات المفتوحة، في ملف متغير واحد يغطي السماكة من 200 إلى 1000 ويضم محورًا للميل.
خط نوتو نسخ عربي (Noto Naskh Arabic): للمقالات الطويلة والمدونات التي تريد لها طابع النسخ، في ملف متغير من 400 إلى 700.

نصائح تقنية لخط عربي سريع وواضح

قدّم الخط بصيغة WOFF2 من خادمك، فهي أخف من TTF، واحفظ نص الرخصة مع ملفات المشروع.
إذا استعملت ملفًا متغيرًا، فصرّح بنطاق أوزانه في font-weight داخل @font-face، مثل 200 1000 لخط القاهرة، فيستعمل المتصفح الملف نفسه لكل الأوزان بدل التغليظ الاصطناعي.
أضف font-display: swap حتى يظهر النص قبل اكتمال تحميل الخط.
ضع lang="ar" dir="rtl" على عنصر html، واستعمل الخصائص المنطقية مثل margin-inline-start بدل اليمين واليسار.
اجعل ارتفاع السطر بين 1.7 و1.9 في النص العربي، ولا تستعمل letter-spacing عليه، لأنه يقطع الوصل بين الحروف.

للمشاريع التي تجمع لغتين، راجع الخطوط العربية والإنجليزية، ولمحتوى الفيديو خطوط المونتاج والفيديو. وتصفح الخطوط العصرية بلا زوائد، أو اقرأ دليل اختيار الخط العربي.

أسئلة شائعة

هل أحتاج إلى خط عربي إذا كان للنظام خط افتراضي؟

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

هل تصلح للنصوص المشكولة على الموقع؟

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