الدرس الرابع: Typography (الخطوط) في UI/UX
الخطوط من أكثر العناصر تأثيرًا في التصميم. قد يكون تصميمك جميلًا بالألوان، لكن إذا كانت الخطوط غير مناسبة فسيبدو غير احترافي.
ما هو Typography؟
Typography هو فن تنظيم النصوص بحيث تكون:
- سهلة القراءة.
- مريحة للعين.
- مرتبة.
- متناسقة.
لماذا الخط مهم؟
لأن المستخدم يقرأ المحتوى قبل أن يتفاعل معه.
إذا كان الخط صغيرًا جدًا أو غير واضح، فقد يغادر المستخدم التطبيق.
أنواع الخطوط
1. Sans Serif (الأكثر استخدامًا)
بدون زوائد في أطراف الحروف.
أمثلة:
- Inter
- Poppins
- Roboto
- Open Sans
يُستخدم في معظم التطبيقات الحديثة.
2. Serif
له زوائد في أطراف الحروف.
أمثلة:
- Times New Roman
- Georgia
يُستخدم غالبًا في الكتب أو الصحف، وليس الخيار الأول لواجهات التطبيقات.
أفضل الخطوط العربية
إذا كنت تصمم واجهات باللغة العربية، فهذه من أفضل الخيارات:
- Cairo
- IBM Plex Sans Arabic
- Tajawal
- Alexandria
- Noto Sans Arabic
أحجام الخطوط القياسية
| العنصر | الحجم |
|---|---|
| عنوان رئيسي (H1) | 32–40px |
| عنوان فرعي (H2) | 24–28px |
| عنوان قسم (H3) | 20–22px |
| نص عادي | 16px |
| وصف صغير | 14px |
| ملاحظات | 12px |
لا تجعل كل النصوص بنفس الحجم، حتى يستطيع المستخدم التمييز بين العناوين والمحتوى.
وزن الخط (Font Weight)
- Thin (100)
- Light (300)
- Regular (400)
- Medium (500)
- SemiBold (600)
- Bold (700)
استخدم Bold للعناوين وRegular للنصوص العادية.
المسافة بين السطور (Line Height)
إذا كانت السطور متقاربة جدًا تصبح القراءة متعبة.
مثال جيد:
- حجم الخط: 16px
- Line Height: 24px
المسافة بين الحروف (Letter Spacing)
غالبًا لا تحتاج لتغييرها كثيرًا، لكن يمكن استخدامها للعناوين أو الشعارات إذا لزم الأمر.
المحاذاة
في الواجهات العربية:
- النصوص تكون محاذاة إلى اليمين.
- لا تخلط بين محاذاة اليمين واليسار في نفس القسم إلا عند وجود سبب واضح.
قاعدة هرم النصوص
رتّب النصوص بهذا الشكل:
- عنوان كبير.
- عنوان فرعي.
- نص أساسي.
- ملاحظات أو معلومات إضافية.
هذا يساعد المستخدم على فهم المحتوى بسرعة.
أخطاء شائعة
❌ استخدام أكثر من نوعين من الخطوط في نفس المشروع.
❌ كتابة فقرات طويلة بخط صغير جدًا.
❌ استخدام Bold لكل النصوص.
❌ ترك مسافات غير متساوية بين العناصر.
مثال عملي
صمم شاشة تسجيل دخول تحتوي على:
- عنوان: مرحبًا بك (32px، Bold)
- وصف: سجل الدخول للمتابعة (16px، Regular)
- حقلا إدخال للبريد الإلكتروني وكلمة المرور.
- زر: تسجيل الدخول (18px، SemiBold)
حاول أن تكون المسافات بين العناصر متساوية، مثل 16 أو 24 بكسل.
واجب اليوم
في Figma، أنشئ صفحة بسيطة تحتوي على:
- عنوان رئيسي.
- عنوان فرعي.
- فقرة قصيرة.
- زر.
ثم جرّب تغيير:
- حجم الخط.
- وزن الخط.
- المسافة بين السطور.
وشاهد كيف يؤثر ذلك على شكل التصميم.
ما تعلمته اليوم
✅ معنى Typography.
✅ كيفية اختيار الخط المناسب.
✅ أفضل الخطوط العربية والإنجليزية.
✅ أحجام الخطوط القياسية.
✅ أوزان الخطوط.
✅ المسافات بين السطور والحروف.
✅ أخطاء Typography الشائعة.
الدرس الخامس (من أهم الدروس)
في الدرس القادم سنتعلم Layout & Spacing، وستتعرف على:
- نظام الشبكات (Grid System).
- الهوامش (Margins).
- الحشوات (Padding).
- المحاذاة (Alignment).
- المسافات البيضاء (White Space).
- كيفية جعل أي تصميم يبدو احترافيًا حتى لو كان بسيطًا.
هذا الدرس يُعد من أهم أسرار المصممين المحترفين، لأنه المسؤول عن ترتيب العناصر وإعطاء التصميم مظهرًا منظمًا وسهل الاستخدام.
تعليقات
إرسال تعليق