فن الخطوط

لماذا التايبوجرافي هو أهم عنصر في التصميم؟

لو شيلت كل الصور والأيقونات والألوان من أي تطبيق أو موقع، هتلاقي إن ٩٥٪ من المحتوى هو نص. النص هو الطريقة الأساسية اللي المستخدم بيتفاعل بيها مع المنتج — بيقرأ التعليمات، بيفهم الأزرار، بيتصفح المحتوى.

التايبوجرافي مش بس اختيار خط حلو. هو نظام كامل بيشمل:

• اختيار الخطوط المناسبة
• تحديد الأحجام والأوزان
• ضبط المسافات بين السطور والحروف
• بناء تسلسل بصري واضح
• ضمان قابلية القراءة على كل الأجهزة

التايبوجرافي الممتاز غير مرئي — المستخدم بيقرأ المحتوى بسلاسة من غير ما يحس بمجهود. التايبوجرافي السيء بيخلي المستخدم يحس بإرهاق ويسيب التطبيق.

تشريح الحروف (Type Anatomy)

قبل ما تختار خطوط، لازم تفهم المصطلحات الأساسية:

المصطلحات اللاتينية

• Baseline: الخط اللي الحروف بتقف عليه
• X-height: ارتفاع الحروف الصغيرة (زي x)
• Cap height: ارتفاع الحروف الكبيرة
• Ascender: الجزء اللي بيطلع فوق الـ x-height (زي حرف b)
• Descender: الجزء اللي بينزل تحت الـ baseline (زي حرف g)
• Serif: الزوائد الصغيرة على أطراف الحروف
• Kerning: المسافة بين حرفين محددين
• Leading: المسافة بين السطور
• Tracking: المسافة الموحدة بين كل الحروف

المصطلحات العربية

الخطوط العربية ليها خصائص مختلفة:

• خط الأساس مش مستقيم دايمًا — الحروف العربية بتتحرك فوق وتحت
• النقط والتشكيل بتحتاج مساحة إضافية فوق وتحت الحروف
• الاتصال بين الحروف بيأثر على العرض والشكل
• ارتفاع السطر (Line Height) في العربي محتاج يكون أكبر من الإنجليزي بسبب النقط والتشكيل

أنواع الخطوط (Font Classifications)

خطوط Serif

الخطوط اللي فيها زوائد صغيرة على أطراف الحروف. بتوحي بالكلاسيكية والرسمية والمصداقية. أمثلة: Times New Roman، Georgia، Merriweather.

في العربية، الخطوط النسخية (Naskh) هي المُعادل — بتناسب القراءة الطويلة والمحتوى الرسمي.

خطوط Sans-Serif

خطوط بدون زوائد — نظيفة وعصرية. هي الخيار الأول لتصميم الواجهات الرقمية لأنها واضحة على الشاشات. أمثلة: Inter، Roboto، SF Pro.

في العربية، خطوط الكوفي العصرية هي المُعادل — زي Noto Kufi Arabic وIBM Plex Arabic وCairo.

خطوط Monospace

كل حرف بياخد نفس العرض. بتُستخدم للأكواد البرمجية والأرقام والبيانات التقنية. أمثلة: Fira Code، JetBrains Mono.

خطوط Display

خطوط مميزة مصممة للعناوين الكبيرة بس — مش للنص العادي. بتكون معبّرة ومميزة. استخدمها بحذر وبحجم كبير.

التسلسل البصري (Typographic Hierarchy)

التسلسل البصري هو إنك تخلي المستخدم يفهم ترتيب المعلومات من غير ما يفكر. بتعمل ده عن طريق التلاعب في:

١. الحجم (Size)

الفرق في الحجم هو أقوى أداة لبناء التسلسل:

• Display/Hero: ٤٨-٧٢px — للعناوين الرئيسية في الصفحة
• H1: ٣٢-٤٠px — عنوان الصفحة
• H2: ٢٤-٣٠px — عناوين الأقسام
• H3: ٢٠-٢٤px — عناوين فرعية
• Body: ١٦-١٨px — النص العادي
• Small: ١٢-١٤px — النصوص المساعدة والتعليقات
• Caption: ١٠-١٢px — أصغر نص مقبول

قاعدة مهمة: الفرق بين كل مستوى لازم يكون واضح — على الأقل ٤px فرق أو نسبة ١.٢٥ بين المستويات.

٢. الوزن (Weight)

أوزان الخط بتتراوح من Thin (١٠٠) لـ Black (٩٠٠):

• Regular (400): للنص العادي
• Medium (500): للعناصر اللي محتاجة تبرز قليلاً
• SemiBold (600): للعناوين الفرعية والأزرار
• Bold (700): للعناوين الرئيسية والعناصر المهمة

نصيحة: ما تستخدمش أكتر من ٣ أوزان في التصميم الواحد. التنوع الزيادة بيشتت.

٣. اللون (Color)

مش كل النصوص لازم تكون بنفس اللون:

• نص أساسي: لون غامق وواضح (نسبة تباين ٧:١ أو أعلى)
• نص ثانوي: رمادي متوسط (للتواريخ والوصف)
• نص معطّل: رمادي فاتح (للعناصر غير المتاحة)

اختيار الخطوط (Font Selection)

معايير اختيار الخط

لما تختار خط لمشروعك، فكر في:

1. القابلية للقراءة: هل الخط واضح في الأحجام الصغيرة؟ هل الحروف المتشابهة مميزة عن بعض (I, l, 1)؟
2. تعدد الأوزان: الخط المثالي لازم يكون فيه على الأقل ٤ أوزان (Regular, Medium, SemiBold, Bold)
3. دعم اللغات: لو المنتج ثنائي اللغة، لازم الخط يدعم العربي والإنجليزي
4. الأداء: حجم ملف الخط بيأثر على سرعة التحميل. خطوط Google Fonts مُحسّنة كويس
5. الترخيص: تأكد إن الخط مجاني للاستخدام التجاري أو عندك ترخيص

خطوط عربية مُوصى بيها لـ UI

• Noto Kufi Arabic: من Google — عصري ونظيف، متعدد الأوزان، ممتاز للواجهات
• IBM Plex Arabic: تصميم احترافي، يدعم الكتابة التقنية
• Cairo: خط مصري عصري، مناسب للعناوين والنص
• Tajawal: خط سعودي نظيف وهادي
• Readex Pro: مصمم خصيصًا للقراءة الرقمية

خطوط إنجليزية مُوصى بيها لـ UI

• Inter: الخط الأكتر شعبية في تصميم الواجهات — مصمم خصيصًا للشاشات
• SF Pro / SF Arabic: خط آبل الرسمي — مش متاح خارج منتجات آبل
• Roboto: خط جوجل الافتراضي — واضح ومتعدد الاستخدامات
• DM Sans: خط هندسي أنيق — مناسب للتطبيقات العصرية

التوفيق بين الخطوط (Font Pairing)

استخدام خطين مع بعض بيدي التصميم تنوع وعمق. لكن لازم يكون فيه تباين مع تناغم.

قواعد التوفيق

1. Serif + Sans-Serif: التركيبة الكلاسيكية الآمنة — Serif للعناوين و Sans-Serif للنص أو العكس
2. نفس العائلة: استخدم أوزان مختلفة من نفس الخط — أسهل طريقة وبتشتغل دايمًا
3. تباين واضح: لو الخطين شبه بعض كتير، المستخدم هيحس إن فيه خطأ مش تعمّد
4. حد أقصى خطين: في أغلب مشاريع UI، خط واحد بأوزان مختلفة كافي. لو احتجت اتنين، ده الحد الأقصى

تركيبات مُجرّبة

• Cairo (عناوين) + Noto Kufi Arabic (نص): تركيبة عربية ممتازة
• Inter (عناوين) + Noto Sans Arabic (نص): لمشاريع ثنائية اللغة
• خط واحد فقط: Inter أو Noto Kufi Arabic بأوزان مختلفة — أسهل وأكتر اتساقًا

الخطوط العربية — تحديات خاصة

تصميم الواجهات بالعربي فيه تحديات فريدة محتاج تاخد بالك منها:

اتجاه القراءة (RTL)

النص العربي بيُقرأ من اليمين لليسار. ده مش بس بيأثر على النص — بيأثر على التخطيط كله:

• القوائم والأزرار بتتعكس
• الأيقونات الاتجاهية (أسهم) لازم تتعكس
• أرقام التليفون والتواريخ بتفضل من اليسار لليمين

ارتفاع السطر

الخطوط العربية محتاجة Line Height أكبر من الإنجليزية (١.٧ - ٢.٠ بدل ١.٥). السبب إن النقط والتشكيل فوق وتحت الحروف محتاجين مساحة.

أحجام الخطوط

الخطوط العربية بتبان أصغر من الإنجليزية بنفس الحجم. ممكن تحتاج تزود الحجم ١-٢px في النسخة العربية.

المحتوى المختلط

لما يكون عندك نص عربي فيه كلمات إنجليزية أو أرقام، لازم الخط يتعامل مع الاتجاه الثنائي (BiDi) بشكل سليم.

المسافات والتفاصيل الدقيقة

ارتفاع السطر (Line Height)

• عناوين: ١.١ - ١.٣ (المسافة قليلة لأن العناوين قصيرة)
• نص عادي: ١.٥ - ١.٧٥ (مسافة مريحة للقراءة)
• نص عربي: ١.٧ - ٢.٠ (مسافة أكبر بسبب النقط)

طول السطر (Line Length)

السطر المثالي للقراءة هو ٥٠-٧٥ حرف في الإنجليزية و٤٠-٦٠ حرف في العربية. السطر الطويل جدًا بيخلي العين تتوه لما ترجع لبداية السطر الجديد.

في تصميم الويب، ده معناه إن عرض عمود النص لازم يكون محدود — مش بعرض الشاشة. max-width: 65ch قاعدة ممتازة.

المسافة بين الحروف (Letter Spacing)

• العناوين الكبيرة: ممكن تقلل المسافة شوية (letter-spacing: -0.02em) عشان تبان مُحكمة
• النص العادي: سيبه زي ما هو — الخط المُصمم كويس مش محتاج تعديل
• النص بالحروف الكبيرة (ALL CAPS): زوّد المسافة (letter-spacing: 0.05em) عشان يبقى مقروء

أخطاء شائعة في التايبوجرافي

١. أحجام كتير

لو عندك ١٠ أحجام مختلفة في التصميم، المستخدم مش هيقدر يميز التسلسل. ٥-٧ أحجام كفاية.

٢. تباين ضعيف

العنوان لازم يكون واضح إنه عنوان — مش مجرد أكبر بـ ٢px من النص العادي.

٣. سطور طويلة جدًا

النص اللي بيمتد لعرض الشاشة كلها مُرهق جدًا. حدد عرض العمود.

٤. تجاهل الخط العربي

لو المشروع عربي، ما تكتفيش بخط إنجليزي يدعم العربي بشكل ثانوي. اختار خط عربي كخط أساسي.

٥. خطوط كتير

خطين هو الحد الأقصى. كل خط إضافي بيأثر على الأداء والاتساق البصري.

تمرين عملي

صمّم Type Scale كاملة لمشروع عربي:

1. اختار خط عربي واحد من القائمة اللي فوق
2. حدد ٦ أحجام (Display, H1, H2, H3, Body, Small)
3. اختار ٣ أوزان (Regular, SemiBold, Bold)
4. اضبط Line Height لكل حجم
5. صمّم صفحة مقال وهمية تستخدم فيها كل المستويات
6. افحص القابلية للقراءة على الموبايل والديسكتوب

لما تعمل ده، هتلاقي إن التايبوجرافي لوحده بيبني ٨٠٪ من شكل التصميم — حتى قبل ما تحط أي ألوان أو صور.