اختيار الخطوط العربية للواجهات
لماذا يهم اختيار الخط
الحروف العربية تتصل وتتغيّر أشكالها بحسب موضعها، لذلك يضرّ الخط الضعيف بالقراءة أسرع مما يفعله الخط اللاتيني الضعيف. كما يحدد الخط شخصية الواجهة كلها، فاختره بقصد وبمعايير.
قد ينجح خط أنيق في ملصق ويفشل في شاشة إعدادات. نص الواجهة قصير ومتكرر ويُقرأ بسرعة، لذلك الوضوح أهم من الطابع.
خمسة معايير
- الوضوح بالأحجام الصغيرة. اختبر التعليقات وخلايا الجداول وتسميات الحقول، وليس العناوين وحدها.
- مدى الأوزان. العائلة ذات الأوزان المتعددة تتيح بناء التسلسل البصري دون خلط الخطوط.
- الانسجام مع الخط اللاتيني. قارن ارتفاع الحرف الصغير وتباين الخطوط والوزن جنبًا إلى جنب في سطر ثنائي اللغة.
- دعم التشكيل. إذا كان المحتوى قد يتضمن الحركات، فتأكد أنها تستقر بوضوح ولا تتصادم.
- حجم الملف. قد تكون الخطوط العربية ثقيلة، فراجع ما يضيفه كل وزن إلى الصفحة.
عائلات وأنماط
من العائلات مفتوحة المصدر الشائعة للواجهات: Noto Sans Arabic وIBM Plex Sans Arabic وCairo وTajawal وAlmarai. افحص كل واحدة بنفسك فالتغطية والأوزان تختلف.
في المنتج ثنائي اللغة تكون العائلة الواحدة التي تغطي الكتابتين بداية مريحة، لأن أوزانها وأحجامها مصممة لتعمل معًا. وإذا جاءت الكتابتان من عائلتين مختلفتين فطابق بينهما في الوزن والحجم الظاهري ثم افحصهما في أسطر نصية حقيقية.
تصاميم النسخ هي عادةً الخيار الأكثر أمانًا للنصوص الطويلة. أما التصاميم الهندسية أو الكوفية فتناسب غالبًا النصوص البارزة كالعناوين، لكنها قد تُتعب العين في الفقرات الطويلة.
قواعد تقنية
- لا تضف <code>;letter-spacing<;/code>; إلى النص العربي أبدًا. فهو يقطع اتصال الحروف ويشوّه شكل الكلمة.
- قلّص الخط إلى الحروف التي تحتاجها (subset) وقدّمه بصيغة WOFF2.
- صرّح باللغة بالخاصية <code>;lang<;/code>; ليختار المتصفح أشكال الحروف والخطوط العربية المناسبة.
- حمّل الأوزان التي تستخدمها فقط، واضبط <code>;font-display<;/code>; ليبقى النص ظاهرًا أثناء تحميل الخط.
اختبر سلوك الخط البديل كذلك. فإذا تعذّر تحميل الخط العربي يختار المتصفح خطًا آخر وقد يتغير التخطيط. اختر خطًا بديلًا بنسب مشابهة وضعه في قائمة الخطوط بعد العائلة الأساسية.
تحقق من الترخيص قبل الإطلاق. فتراخيص المصادر المفتوحة تختلف، وقد يحتاج الخط المستخدم في تطبيق أو ملف PDF إلى شروط تختلف عن الخط المستخدم في صفحة ويب.
اختبر الخيار النهائي دائمًا بمحتوى عربي حقيقي وليس بنص تجريبي.
المصادر
- Google Fonts. Noto Sans Arabic. https://fonts.google.com/noto/specimen/Noto+Sans+Arabic
- MDN Web Docs. font-display. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
صيغ هذا الدليل بمساعدة الذكاء الاصطناعي اعتمادًا على معايير ومراجع عامة. وللنص الدقيق لأي معيار، ارجع إلى المصادر المذكورة أعلاه.