أفضل الخطوط العربية لمواقع فريمر
الخط أول شي يحدد إذا الموقع العربي يبان احترافي أو مترجم. هذي الخطوط اللي أستخدمها وأنصح فيها، وكيف تختار بينها.
الخط أول شي يحدد إذا الموقع العربي يبان احترافي أو مترجم. وفي العربي هذا القرار أصعب من الإنجليزي، لأن كثير من الخطوط "تدعم العربية" على الورق، لكن حروفها العربية مرسومة كإضافة، مو كأساس.
في هذا المقال أشاركك الخطوط اللي أستخدمها وأنصح فيها لمواقع فريمر، وكيف تختار بينها، وأخطاء شائعة تخرّب شكل أي خط مهما كان جميل.
قبل ما تختار: خمسة أسئلة
هل الخط مصمم للعربية من الأساس؟ افتح الخط واكتب جملة عربية طويلة. إذا الحروف تبان صغيرة أو غريبة جنب الإنجليزي، أو الوصلات بين الحروف مو ناعمة، فهو خط إنجليزي بدعم عربي شكلي.
كم وزن متوفر؟ تحتاج على الأقل وزنين: عادي للنص وعريض للعناوين. والأفضل أربعة أوزان أو أكثر عشان تبني تسلسل واضح.
كيف شكل الحروف اللاتينية والأرقام؟ أغلب المواقع العربية فيها كلمات إنجليزية وأرقام. خط عربي ممتاز بحروف لاتينية ضعيفة بيخرّب كل سطر فيه كلمة مثل 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. الاثنين آمنين، واضحين، ويشتغلون مع أغلب المشاريع.
وإذا تبي تشوف خطوط مطبقة على مواقع حقيقية، كل قوالبي العربية مبنية على خطوط مختارة للعربية من الأساس.
