أفضل الخطوط العربية لمواقع فريمر
الخط هو أول ما يحدد إن كان الموقع العربي يبدو احترافياً أم مترجماً. هذه الخطوط التي أستخدمها وأنصح بها، وكيف تختار بينها.
الخط هو أول ما يحدد إن كان الموقع العربي يبدو احترافياً أم مترجماً. وفي العربية يكون هذا القرار أصعب منه في الإنجليزية، لأن كثيراً من الخطوط "تدعم العربية" على الورق، لكن حروفها العربية مرسومة كإضافة، وليست أساساً.
في هذا المقال أشاركك الخطوط التي أستخدمها وأنصح بها لمواقع فريمر، وكيف تختار بينها، وأخطاء شائعة تفسد شكل أي خط مهما كان جميلاً.
قبل أن تختار: خمسة أسئلة
هل الخط مصمم للعربية من الأساس؟ افتح الخط واكتب جملة عربية طويلة. إذا بدت الحروف صغيرة أو غريبة بجانب الإنجليزية، أو لم تكن الوصلات بين الحروف ناعمة، فهو خط إنجليزي بدعم عربي شكلي.
كم وزناً يتوفر؟ تحتاج إلى وزنين على الأقل: عادي للنص، وعريض للعناوين. والأفضل أربعة أوزان أو أكثر لبناء تسلسل واضح.
كيف تبدو الحروف اللاتينية والأرقام؟ معظم المواقع العربية تحتوي على كلمات إنجليزية وأرقام. وخط عربي ممتاز بحروف لاتينية ضعيفة سيفسد كل سطر فيه كلمة مثل Framer أو CMS.
هل هو متوفر في فريمر مباشرة؟ يحتوي فريمر على مكتبة Google Fonts مدمجة، وأي خط خارجها يجب أن ترفعه بنفسك.
ما رخصته؟ خصوصاً إذا كان الموقع لعميل. فالخط المجاني للاستخدام الشخصي ليس بالضرورة مجانياً للمواقع التجارية.
الخطوط التي أنصح بها
1. خط ثمانية (Thmanyah Sans)
هذا الخط الذي أستخدمه في معظم قوالبي. هادئ، وبدون تباين في سماكة الخطوط، ومصمم للشاشات. وميزته أنه عائلة كاملة: نسخة Sans للواجهات، ونسخة Serif Text للمقالات الطويلة، ونسخة Serif Display للعناوين.
مجاني للاستخدام الشخصي والتجاري، بما في ذلك المواقع. وهو غير موجود في مكتبة فريمر، لذلك تحمّله من موقع ثمانية الرسمي وترفعه.
يناسب: الاستوديوهات، والشركات الناشئة، والمواقع التحريرية.
2. خط بلكس العربي (IBM Plex Sans Arabic)
خط تقني ومتوازن، وأقوى ما فيه أن حروفه اللاتينية من عائلة IBM Plex الأصلية. أي أن المواقع ثنائية اللغة تبدو متناسقة دون الحاجة إلى البحث عن خط إنجليزي مطابق.
يناسب: الشركات، والاستشارات، والمنتجات التقنية.
3. خط ألكسندريا (Alexandria)
خط هندسي بشخصية واضحة، وأوزانه العريضة ممتازة للعناوين الكبيرة. يمنح الموقع طابعاً حديثاً وجريئاً دون أن يكون مزعجاً.
يناسب: عناوين صفحات الهبوط، والوكالات، والعلامات الجريئة.
4. خط ريدكس برو (Readex Pro)
خط مريح جداً للقراءة، بفتحات حروف واسعة تجعله واضحاً حتى بالأحجام الصغيرة على الجوال.
يناسب: النصوص الطويلة، والتطبيقات، والواجهات المليئة بالمعلومات.
5. خط تجوال (Tajawal)
من أكثر الخطوط العربية انتشاراً، بفضل بساطته وتوفر أوزان كثيرة (من الخفيف جداً إلى الأسود). اختيار آمن، لكن انتشاره يجعله أقل تميّزاً.
يناسب: المشاريع التي تحتاج إلى خط موثوق دون مخاطرة.
6. خط القاهرة (Cairo)
خط بزوايا واضحة وطابع عصري، ومتوفر كخط متغيّر (Variable)، أي أنك تستطيع اختيار أي وزن بين الأوزان بدقة.
يناسب: التقنية، والرياضة، والمحتوى الشبابي.
7. خط نوتو الكوفي (Noto Kufi Arabic)
من عائلة Noto من جوجل، ومصمم ليكون متسقاً مع مئات اللغات. خيار ممتاز إذا كان الموقع متعدد اللغات فعلاً، وليس عربياً وإنجليزياً فقط.
يناسب: المؤسسات، والجهات الحكومية، والمواقع متعددة اللغات.
8. خط أميري (Amiri)
خط نسخي كلاسيكي، مستوحى من الخط المطبعي العربي التقليدي. لا يناسب الواجهات، لكنه جميل للاقتباسات والعناوين في المواقع الثقافية والأدبية.
يناسب: المدونات الأدبية، ودور النشر، والمحتوى الثقافي.
كل الخطوط من 2 إلى 8 مجانية ومتوفرة مباشرة في فريمر عبر Google Fonts.
ثلاث تركيبات جاهزة
إذا أردت خطين، فهذه تركيبات أثق بها:
العناوين | النص | الطابع |
|---|---|---|
خط Alexandria | خط IBM Plex Sans Arabic | حديث وجريء |
خط ثمانية Serif Display | خط ثمانية Sans | تحريري وأنيق |
خط Readex Pro | خط Readex Pro | بسيط ومتناسق |
والقاعدة نفسها: لا أكثر من خطين للموقع كله.
كيف تضيف الخط في فريمر؟
خطوط Google: اختر أي نص، وافتح قائمة الخطوط في اللوحة اليمنى، وابحث عن اسم الخط مباشرة.
خط خارجي مثل خط ثمانية: من القائمة نفسها، افتح تبويب Custom واضغط Upload Fonts. ينصح فريمر بصيغة woff2 للحصول على أفضل أداء، وارفع فقط الأوزان التي ستستخدمها فعلاً.
وبعد ذلك لا تطبّق الخط على كل عنصر يدوياً. عرّفه في Text Styles مرة واحدة، فيتحدث الموقع كله تلقائياً. شرحت هذه الطريقة في كيف تخصص قالب Framer.
أخطاء شائعة تفسد الخط العربي
تباعد الحروف (Letter Spacing). الحروف العربية متصلة، وأي تباعد يفصلها أو يشوّه الاتصال بينها. كثير من القوالب الإنجليزية تضيف تباعداً سالباً للعناوين، وأول ما يجب فعله عند تحويلها إلى العربية هو إعادته إلى صفر.
ارتفاع السطر (Line Height). تحتاج العربية إلى مسافة أكبر بين السطور مقارنة بالإنجليزية، بسبب النقاط والحركات والحروف النازلة. للنصوص الطويلة، ابدأ من 1.6 إلى 1.8.
الحجم. يبدو الخط العربي أصغر من الإنجليزي بالحجم نفسه. إذا كان نص الموقع 16px بالإنجليزية، فجرّب 17 أو 18 بالعربية.
الخط المائل. لا يوجد خط مائل في العربية. استخدام Italic يُنتج حروفاً مشوهة، وللتأكيد استخدم الوزن العريض أو لوناً مختلفاً.
الخطوط الكثيرة. كل خط إضافي يبطئ الموقع ويضعف الهوية. وغالباً يكفي خط واحد بأوزان مختلفة.
الخلاصة
لا يوجد خط "أفضل" بشكل مطلق، بل يوجد خط يناسب شخصية مشروعك، وجمهورك، ونوع المحتوى.
وإذا كنت متردداً، فابدأ بخط ثمانية أو IBM Plex Sans Arabic. كلاهما آمن وواضح ويناسب معظم المشاريع.
هل تريد موقعاً جاهزاً بهويتك دون أن تقضي وقتك في التخصيص؟ اطّلع على باقة تخصيص القوالب.
وإذا أردت رؤية الخطوط مطبقة على مواقع حقيقية، فكل قوالبي العربية مبنية على خطوط مختارة للعربية من الأساس.
