هشرحلك كل حاجة عن الخطوط: أنواعها، إزاي نتحكم فيها، اختيار الخط للمشروع، مواقع تحميل/اختيار الخطوط، دورها في الـ UI/UX، أمثلة توضيحية مرتبة من السهل للصعب، وبالأخير 10 أسئلة اختيار من متعدد للتثبيت، وكمان عناوين للبحث لو حابب تتعمق. نبدأ.
كل أسلوب ليه وظيفة وجو مختلف.
بيأثر على التركيز والقراءة.
نسخة مائلة تستخدم للتأكيد أو الاقتباس. مهم تستخدم مائل مصمم (True Italic) مش مجرد ميل بالـ transform.
بالمقياس px أو rem/em للويب. خلي الحجم مناسب للقراءة (جسم النص عادة 16px للويب).
يوزع الحروف، مهم للعناوين ولتحسين قابلية القراءة في خطوط صغيرة.
مهم جداً — نص ضيق السطور يصعب قراءته. للعنصر النصي: line-height ≈ 1.4–1.6 جيد للنص الطويل.
لكل حالة استخدام؛ النص المبرر يحتاج تحكم بالـ hyphenation لتجنب مسافات كبيرة.
التباين مع الخلفية مهم لسهولة القراءة ونسب الوصول (WCAG).
مفيد للقراءة على صور أو للتأثير البصري، لكن لا تفرط.
ضبط المسافة بين زوج حرفين معينين (مثلاً A V). مهم للعناوين الكبيرة.
بعض الخطوط تدعم optical sizes (Caption, Text, Display) للتأكد من وضوح في كل حجم.
تحديد بدائل لو الخط الرئيسي ماتفعلش على جهاز المستخدم.
قواعد عملية
نص طويل (محتوى) → خط واضح ومقروء (Serif للطباعة أو Sans-serif للشاشات). عنوان جريء → Display أو Slab أو Sans-bold.
تأكد من الـ x-height، وضوح الحروف، وفصل بين الأحرف المهمة (1 vs l vs I).
الخط لازم يعكس شخصية البراند (جدي، مرح، رسمي، عصري).
عادة 1–2 عائلة خطوط كافية (مثلاً: Sans للعناوين + Serif للمحتوى أو العكس). لا تزيد كثير.
لو مشروع متعدد اللغات — تأكد إن الخط يدعم اللغات المطلوبة (Latin + Arabic أو Cyrillic).
اقرأ رخصة الاستخدام (تجاري أو مجاني أو يتطلب شراء).
اختار صيغ WOFF2/WOFF للويب، وتقليل أحجام الملفات، استخدم font-display: swap لتقليل FOIT.
شاشات مختلفة، أنظمة تشغيل، وبعض المتصفحات.
مصدر للخطوط العربية
خطوط عربية مجانية
خطوط عربية شائعة
تأكد من الترخيص قبل الاستخدام
مرتبة من السهل للصعب
خط نَسخ واضح مع مسافة مناسبة بين الأسطر يسهل القراءة للنصوص الطويلة.
نص عادي (وزن 400). لو العنوان طويل، ازود letter-spacing شوية لتحسين القراءة.
استخدام أوزان مختلفة للعناوين والنصوص يخلق هرمية بصرية واضحة.
لو اللوجو أو الموقع فيه عربي وإنجليزي: اختار Arabic + Latin زي El Messiri للـ Arabic وMontserrat للـ Latin بحيث الـ x-height والأجواء متوافقة.
عنوان كبير على بانر — راجع الكيرنين بين الأزواج (AV, To) عشان مايبقاش فيه فراغات غير متناسقة، واستخدم optical kerning لو الخط يدعم.
كلها من ملف واحد
font-family: 'Custom Font', sans-serif;
خط بديل لو الخط الأساسي اتأخر
لويب أبلكيشن ضخم: استخدم Variable Font بوزن متغير بدل ملفات متعددة، قدم تحميلات مسبقة للـ critical fonts، استخدم font-display: swap، وأضف fallback fonts متشابهة في الـ stack.
شرح بالتفصيل الممل
الخط يؤثر مباشرة على سرعة قراءة المستخدم وراحته. نص صغير مع x-height صغير ودينتي/ضيق في الحروف = تعب للعين.
line-height المناسب مهم على الموبايل لأن الشاشات أصغر.
الحجم، الوزن، والتباين اللوني بيحددوا مين الأهم: العناوين الكبيرة، العناوين الفرعية، النص الأساسي، الملاحظات الصغيرة.
استخدم نظام قياسات ثابت (مثلاً: H1=48px, H2=36px, Body=16px) عبر الـ design system.
نص أساسي (Body)
نص ثانوي صغير (Small)
الخط يرسل شعور: خطوط Sans → عصري، خطوط Serif → رسمي/مؤسسة. اختيار الخط لازم يتماشى مع رسالة المنتج.
خطوط Sans-serif نظيفة تعطي إحساس بالحداثة
خطوط Serif تعطي إحساس بالرصانة والثقة
اختر خطوط واضحة واغلب نصوص مهمة بخط لا يقل عن 16px للويب، ونسب تباين كافية بين النص والخلفية.
تأكد من دعم خطوط لعمى الألوان؟ (رغم إنه لون مش متعلق بالخط، لكن السياق البصري ككل مهم).
حجم: 16px، تباين: 4.5:1
حجم: 12px، تباين: 2.1:1
تحميل خطوط ثقيلة ممكن يخرب تجربة (FOIT — Flash of Invisible Text). استخدم تقنيات مثل font-display: swap، preload للـ critical font، وVariable Fonts لتقليل عدد الملفات.
Fallback مهم: لو الخط الأساسي اتأخر، المستخدم لازم يبص على نسخة بديلة مش للغلط.
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: swap;
}
font-family: 'MyFont', 'Arial', sans-serif;
لو الموقع متعدد لغات، لازم الخط يدعم جميع الأحرف (Arabic, Latin, Cyrillic). الخط الفقير بالدعم ممكن يكسر التصميم.
نفس الخط يدعم كل اللغات الثلاث
لون الخط وحجمه في الـ microcopy (مثلاً: تعليمات الحقول، أخطاء الفورم) يؤثر على وضوح الإرشاد. استخدم وزن أخف/لون مركزي لعدم سرقة الانتباه من المحتوى الرئيسي.
يجب أن يكون بين 3 و 20 حرف
كلمة المرور ضعيفة جداً
صمم Type Scale (نظام أحجام): Modular scale أو 8pt grid. يحافظ على الاتساق ويخلي التعديلات أسهل.
البريد الإلكتروني غير صالح
نص الخطأ بلون أحمر ووزن 600 بحجم أصغر من العنوان، مع أيقونة لانتباه → واضح ومباشر.
استخدم وزن غامق وحجم أكبر من النص العادي، مع نص قصير وواضح (مثلاً: "اشتري الآن") — font-weight 700 يعمل فرق.
© 2025 جميع الحقوق محفوظة. سياسة الخصوصية | شروط الاستخدام
نص ثانوي بحجم أصغر وline-height أكبر شوية لتخفيف الازدحام.
أرقام/علامات صغيرة تستخدم Monospace أو وزن مختلف للتمييز عن النص العادي.
10 أسئلة اختيار من متعدد — للتأكد من الفهم
Cheat sheet
ملاحظة: فاكر الوصولية — نص لا يقل 16px للويب كنقطة بداية، ونسب تباين حسب WCAG.
لو عايز تتوسّع بعد كده، ابحث عن المواضيع دي:
Hierarchy, Contrast, Scale
Oldstyle, Transitional, Modern
Hinting, Rasterization, Subpixel Rendering
axes, axis-compatibility, tools
preload, font-display, FOIT/FOUT strategies
Multilingual Typesetting (Arabic, Indic, CJK)
glyphs, kerning, hinting, metrics
Legal Considerations
Type for Small UI vs Display
Readability Studies