الخطوط والنصوص في CSS: font-family والأحجام

أغلب ما يفعله زائر موقعك هو القراءة. لذلك فإن اختيار الخط وحجمه والمسافة بين الأسطر يصنع فرقاً كبيراً بين صفحة مريحة يقرؤها حتى آخرها، وصفحة متعبة يغلقها بعد سطرين. في هذا الدرس ستتعلم خصائص CSS الخاصة بالخطوط والنصوص، مع نصائح خاصة بالنص العربي.

اختيار الخط: font-family

body {
  font-family: Tahoma, Arial, sans-serif;
}

لاحظ أننا كتبنا عدة خطوط مفصولة بفواصل. هذه تسمى قائمة احتياطية (Fallback): المتصفح يجرّب الخط الأول، فإن لم يجده على جهاز الزائر انتقل للثاني، وهكذا.

تخيّلها مثل طلبك في مطعم: «أريد عصير مانجو، فإن لم يوجد فبرتقال، فإن لم يوجد فأي عصير». والكلمة الأخيرة sans-serif هي «أي عصير»: نوع عام من الخطوط موجود دائماً.

الأنواع العامة الأشهر:

• sans-serif: خطوط بسيطة بلا زوائد، مريحة على الشاشات.
• serif: خطوط بزوائد صغيرة في أطراف الحروف، تشبه خطوط الكتب المطبوعة.
• monospace: كل الحروف بنفس العرض، وتُستخدم لعرض الكود.

الأسماء التي فيها مسافات

إذا كان اسم الخط فيه مسافة، ضعه بين علامتي تنصيص: font-family: "Times New Roman", serif;

خطوط من الإنترنت: Google Fonts

لا تعتمد على الخطوط المثبتة على جهاز الزائر فقط. موقع Google Fonts يقدم مئات الخطوط المجانية، منها خطوط عربية جميلة مثل Cairo و Tajawal و IBM Plex Sans Arabic. تختار الخط من الموقع، فيعطيك سطر <link> تضعه في <head>:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap">

ثم تستخدمه في CSS باسمه:

body {
  font-family: "Cairo", sans-serif;
}

لا تكثر من الخطوط

خط أو خطان للموقع كله يكفيان. كل خط إضافي، وكل سمك منه، ملف يحمّله الزائر فيبطئ الصفحة. والتصميم الأنيق غالباً يعتمد على خط واحد بأحجام وأوزان مختلفة.

حجم الخط ووحداته

h1 { font-size: 2rem; }
p  { font-size: 18px; }

أشهر ثلاث وحدات:

الوحدة	معناها
px	بكسل: حجم ثابت ودقيق
rem	نسبة إلى حجم خط الصفحة الأساسي (غالباً 16px). 2rem = 32px
em	نسبة إلى حجم خط العنصر الأب

لماذا يفضّل المحترفون rem؟ لأن بعض المستخدمين، خاصة كبار السن وضعاف البصر، يكبّرون حجم الخط الافتراضي من إعدادات المتصفح. مع rem يكبر موقعك معهم تلقائياً، أما px فقد يتجاهل رغبتهم.

سمك الخط ونمطه

.title { font-weight: 700; }   /* عريض */
.note  { font-weight: 400; }   /* عادي */
.quote { font-style: italic; } /* مائل */

font-weight يقبل أرقاماً من 100 (رفيع جداً) إلى 900 (سميك جداً)، أو الكلمتين normal (تساوي 400) و bold (تساوي 700). لكن الخط نفسه يجب أن يدعم هذا السمك، وإلا اختار المتصفح أقرب سمك متاح.

الخط المائل والعربية

أغلب الخطوط العربية ليس لها نسخة مائلة حقيقية، فيميلها المتصفح صناعياً بشكل غير جميل. لتمييز كلمة عربية استخدم السمك أو اللون بدلاً من الميل.

ارتفاع السطر

line-height تحدد المسافة بين أسطر الفقرة، وهي من أهم خصائص راحة القراءة:

p {
  line-height: 1.8;
}

القيمة 1.8 بدون وحدة تعني «1.8 ضعف حجم الخط». الحروف العربية فيها نقاط وتشكيل فوق الحرف وتحته، لذلك تحتاج مسافة أكبر من الإنجليزية؛ وقيمة بين 1.7 و 2 مريحة للنص العربي. موقعنا هذا مثلاً يستخدم 1.9.

محاذاة النص وتزيينه

h1   { text-align: center; }          /* توسيط */
p    { text-align: justify; }         /* ضبط الطرفين */
a    { text-decoration: none; }       /* إزالة الخط تحت الرابط */
.old { text-decoration: line-through; } /* خط في منتصف النص */

قيم text-align: start و end و center و justify. واستخدم start بدلاً من right أو left، لأنها تعني «بداية السطر» حسب اتجاه الصفحة: اليمين في العربية، واليسار في الإنجليزية. هكذا يعمل تنسيقك صحيحاً في الاتجاهين.

وهناك أيضاً letter-spacing للمسافة بين الحروف، لكن لا تستخدمها مع العربية، لأنها تقطع اتصال الحروف ببعضها.

جرّب بنفسك

جرّب تغيير line-height إلى 1.2 ولاحظ كيف يصبح النص العربي مزدحماً، ثم أعده. وجرّب font-weight بقيم مختلفة، و text-align: center للفقرة:

جرّب بنفسكCSS

محرر الكود (CSS)body { font-family: Tahoma, Arial, sans-serif; color: #3c4658; } h1 { font-size: 1.8rem; font-weight: 700; color: #141826; } p { font-size: 1.1rem; line-height: 1.9; } .note { font-weight: 700; color: #5b5bf0; } a { text-decoration: none; color: #5b5bf0; } .old { text-decoration: line-through; color: gray; }

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• نسيان النوع العام في آخر font-family: إذا لم يجد المتصفح أي خط من قائمتك، سيختار خطاً افتراضياً قد لا يناسب تصميمك. أنهِ القائمة دائماً بـ sans-serif أو serif.
• سطور متلاصقة: line-height صغير يجعل النص العربي متعباً جداً. ابدأ من 1.7 فأكثر.
• نص صغير جداً على الموبايل: حجم أقل من 16px للنص الأساسي يجبر الزائر على التكبير بأصابعه.

اختبر نفسك

سؤال

إذا كان حجم الخط الأساسي للصفحة 16px، فكم يساوي 2rem؟

2px16px32px

سؤال

لماذا نكتب أكثر من خط في font-family؟

ليستخدم المتصفح كل الخطوط معاًلتكبير حجم الخطكبدائل إذا لم يتوفر الخط الأول

الخلاصة

• font-family بقائمة احتياطية تنتهي بنوع عام مثل sans-serif، و Google Fonts لخطوط إضافية.
• font-size بوحدة rem غالباً، لتحترم إعدادات المستخدم.
• font-weight للسمك، وتجنّب الخط المائل و letter-spacing مع العربية.
• line-height بين 1.7 و 2 يجعل النص العربي مريحاً.
• text-align: start بدل right و left، و text-decoration لتزيين النص.