دليل شامل لـ font-size في CSS: كيفية التحكم في حجم النص بفعالية

تُعد خاصية font-size في CSS الأداة الأساسية التي تُمكّنك من التحكم في حجم النص على صفحات الويب. إن فهم كيفية استخدام هذه الخاصية وقيمها المتعددة أمر بالغ الأهمية لإنشاء تصميمات ويب متجاوبة وجذابة بصريًا.

.container {
  font-size: 33px;
}

تستقبل هذه الخاصية عدة أنواع من القيم، تشمل: الكلمات المفتاحية (absolute-size و relative-size)، ووحدات الطول (مثل البكسل px ووحدات em و rem)، بالإضافة إلى النسب المئوية.

.container {
  font-size: xx-large;
}

لكن السؤال الأهم هو: أي نوع من هذه القيم يجب أن تختار ولماذا؟ هذا ما سيتناوله هذا المقال بالتفصيل. سنستعرض كيفية استخدام خاصية font-size والفروقات الجوهرية بين قيمها المتعددة، لكي تتمكن في المرة القادمة من اتخاذ القرار الصائب عند تعديل حجم خطوط نصوصك.

قيم الكلمات المفتاحية (Keyword Values)

تنقسم قيم الكلمات المفتاحية التي يمكنك استخدامها مع حجم الخط إلى نوعين رئيسيين: كلمات مفتاحية مطلقة الحجم (absolute-size) وكلمات مفتاحية نسبية الحجم (relative-size).

الكلمات المفتاحية المطلقة الحجم (Absolute-Size Keywords)

تُستخدم الكلمات المفتاحية المطلقة الحجم لتحديد حجم الخط بناءً على مقياس ثابت يحدده المتصفح. على سبيل المثال، يستخدم الكود التالي الكلمة المفتاحية small لتحديد حجم النص في HTML:

.childElement {
  font-size: small;
}

تتوفر المزيد من خيارات الكلمات المفتاحية المطلقة الحجم، وهي:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• xxx-large

تُحدد قيمة كل كلمة مفتاحية مطلقة الحجم بناءً على حجم الخط الافتراضي للمتصفح، والذي يكون عادةً medium.

الكلمات المفتاحية النسبية الحجم (Relative-Size Keywords)

تُعد الكلمات المفتاحية نسبية الحجم خيارًا آخر يستحق النظر، ولديك خياران للاختيار من بينهما: smaller و larger.

.parentElement {
  font-size: smaller;
}

يعتمد حجم الخط للعنصر الذي يستخدم كلمة مفتاحية نسبية الحجم (سواء larger أو smaller) على حجم خط العنصر الأب الخاص به. بعبارة أخرى، يؤثر حجم خط العنصر الأب على حجم خط العنصر الابن. على سبيل المثال، إذا تم تطبيق الكلمة المفتاحية smaller على عنصر ابن، فسيصبح حجم خطه أصغر نسبيًا لحجم خط العنصر الأب.

وحدات الطول (Length Values)

تقبل خاصية font-size عدة قيم مختلفة لوحدات الطول. سنستكشف ثلاثًا منها: البكسل (px) ووحدات em و rem. بغض النظر عن اختيارك، يجب أن تكون قيمة الطول التي تستخدمها موجبة دائمًا.

.parentElement {
  font-size: 60px;
}

البكسل (Pixels – px)

البكسل (px) هي وحدة طول مطلقة. هذا يعني أنها لا تتأثر بالعناصر الأخرى، مثل العنصر الأب أو حجم نافذة المتصفح. ونتيجة لذلك، تُعد البكسلات دقيقة للغاية: تحدد العدد الدقيق للبكسلات التي تحتاجها للعنصر، وهذا ما تحصل عليه عادةً. ومع ذلك، قد تكون هناك اختلافات طفيفة في العرض بين المتصفحات المختلفة. كما في المثال السابق، حيث يتم تحديد حجم الخط بشكل مباشر بقيمة البكسل.

وحدات em

بينما يمكنك اعتبار البكسلات وحدات ثابتة، فإن قيم em متغيرة. وذلك لأن وحدات em هي وحدة طول نسبية. يعتمد حجم خط العنصر الذي يستخدم قيمة em على حجم خط العنصر الأب الخاص به.

ولكن، إذا لم تقم بتعيين حجم خط للعنصر الأب، أو لأي عنصر أعلى في شجرة DOM، فسيتم حساب قيمة em باستخدام حجم الخط الافتراضي للمتصفح (والذي غالبًا ما يكون 16px).

لنجعل هذه الفكرة أكثر وضوحًا. لنفترض أن العنصر الأب تم تعيين حجم خطه إلى 30px، وتم تعيين العنصر الابن إلى 2em. في هذه الحالة، سيكون حجم الخط النهائي للعنصر الابن هو 60px (2 مضروبًا في 30px).

يمكن أن تتسبب قيم em في مشكلة تعرف بتأثير التراكم (compounding effect)، والذي يظهر عندما يكون لديك عدة عناصر متداخلة تستخدم قيم em؛ حيث تتراكم قيم حجم الخط وتصبح أكبر فأكبر مع كل مستوى تداخل، مما قد يؤدي إلى نتائج غير متوقعة في التصميم.

وحدات rem

هنا يأتي دور وحدات rem، التي تم ابتكارها لمعالجة مشكلة التراكم التي تواجهها وحدات em. تذكر أن قيم em نسبية للعنصر الأب، بينما قيم rem نسبية لحجم الخط الخاص بالعنصر الجذري (html).

هذا يعني أنه يمكنك تطبيق قيمة rem على أي عنصر، ولن يتأثر بحجم خط العنصر الأب، مما يتجنب تأثير التراكم الذي رأيناه سابقًا. النقطة الرئيسية هنا هي أن حجم خط العنصر الأب لا يؤثر على حجم خط العناصر الأبناء عند استخدام وحدات rem، مما يوفر تحكمًا أكبر وقابلية صيانة أفضل للتصميم.

النسب المئوية (Percentages)

تُقدم النسب المئوية طريقة أخرى لتعيين حجم الخط بشكل نسبي لحجم خط العنصر الأب. يعتمد العنصر الذي يستخدم قيمة مئوية على العنصر الأب لتحديد حجم خطه. يجب أن تكون القيمة المئوية موجبة دائمًا. إليك مثالًا يوضح ذلك:

.parent {
  font-size: 20px;
}
.child {
  font-size: 150%; /* هذا سيجعل حجم الخط 1.5 * 20px = 30px */
}

كما رأيت، عندما يتعلق الأمر بحجم الخط، لديك العديد من الخيارات لتناسب احتياجاتك وتفضيلاتك في تصميم الويب.

الخلاصة التقنية

إن اختيار الوحدة المناسبة لتحديد حجم الخط في CSS يعتمد بشكل كبير على طبيعة المشروع ومتطلباته. فبينما توفر وحدات البكسل (px) دقة مطلقة وثباتًا، إلا أنها قد لا تكون الخيار الأمثل للتصميمات المتجاوبة التي تتطلب مرونة في التكيف مع أحجام الشاشات المختلفة. في المقابل، تُقدم وحدات em و rem حلولًا أكثر ديناميكية. تُعد وحدات rem الخيار المفضل في معظم الحالات الحديثة لتطوير الويب، نظرًا لقدرتها على تجنب مشكلة التراكم التي تواجهها وحدات em، وتوفير أساس ثابت (العنصر الجذري html) لجميع أحجام الخطوط، مما يسهل إدارة التصميم المتجاوب ويحسن من إمكانية الصيانة. أما النسب المئوية، فتقدم مرونة جيدة عندما يكون التناسب مع العنصر الأب هو المطلوب. لذا، يُنصح بتقييم كل وحدة بناءً على سياق الاستخدام لضمان أفضل تجربة للمستخدم وأسهل عملية تطوير.