حجم النص في CSS: دليل وحدات القياس (PX, REM, EM, VH)

في هذا الدرس، سنتناول خاصية font-size، ولكن الأهم من الخاصية نفسها هو فهم "وحدات القياس". لماذا نستخدم أحياناً px وأحياناً rem؟ وما الفرق بينهما؟ وكيف نجعل النص يكبر ويصغر تلقائياً مع حجم شاشة الموبايل؟ سنغوص في رياضيات CSS (بشكل مبسط) لنفهم كيف يقرأ المتصفح الأحجام، وكيف تبني موقعاً متجاوباً (Responsive) يحترم إعدادات المستخدم.

1. خاصية حجم الخط (font-size)

الخاصية المسؤولة عن تكبير وتصغير النصوص في CSS هي font-size. بدون تحديد هذه الخاصية، يمتلك كل متصفح (كروم، فايرفوكس، سفاري) حجماً افتراضياً للنصوص.

الحجم الافتراضي (The Magic 16px)

معلومة يجب حفرها في ذاكرتك: الحجم الافتراضي للنص في معظم المتصفحات هو 16px.

إذا كتبت فقرة <p> ولم تعطها حجماً، ستظهر بطول 16 بيكسل.
هذا الرقم (16) هو الأساس الذي سنبني عليه كل حساباتنا في الوحدات النسبية لاحقاً.

مثال أساسي


h1 {
    font-size: 32px; /* تحديد حجم ثابت */
}

p {
    font-size: 18px;
}

2. الوحدة المطلقة (PX): الدقة والجمود

البيكسل (Pixel) واختصاره px، هو الوحدة الأكثر شهرة وفهماً. هي وحدة "مطلقة" (Absolute)، أي أنها ثابتة لا تتغير.

كيف يعمل البيكسل؟

الشاشة التي تنظر إليها الآن مكونة من ملايين النقاط الصغيرة المضيئة. عندما تقول font-size: 20px، فأنت تأمر الشاشة بحجز ارتفاع قدره 20 نقطة لهذا الحرف.

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

نصيحة: استخدم px للحدود (Borders) والظلال، لكن حاول تجنبه في النصوص الرئيسية (Body Text) في المواقع الحديثة، واستبدله بـ rem.

3. الوحدات النسبية (REM): الحل السحري للتجاوب

كلمة REM هي اختصار لـ Root EM. هذه هي الوحدة المفضلة لكل مطوري الويب المحترفين اليوم.

مبدأ عمل REM (النسبة للجذر)

بدلاً من تحديد حجم ثابت، الـ rem يقول للمتصفح: "اجعل هذا الخط يمثل نسبة من حجم خط الجذر (HTML)".

الجذر (Root) هو وسم <html>.
افتراضياً، حجم خط الـ html هو 16px.
إذن: 1rem = 16px.

الحسبة الرياضية:

2rem = 2 × 16 = 32px.
0.5rem = 0.5 × 16 = 8px.
1.5rem = 1.5 × 16 = 24px.

لماذا REM أفضل من PX؟

لأنه يحترم إعدادات المستخدم! إذا دخل شخص ضعيف البصر إلى إعدادات المتصفح وغير الحجم الافتراضي من 16px إلى 24px:

النص المكتوب بـ px سيظل صغيراً ولن يتغير.
النص المكتوب بـ 1rem سيكبر تلقائياً ليصبح 24px، لأن الـ rem يعتمد على "الجذر" الذي غيره المستخدم.

استخدام REM في التصميم


html {
    font-size: 16px; /* القيمة الافتراضية */
}

h1 {
    font-size: 2rem; /* تعني 32px */
}

p {
    font-size: 1rem; /* تعني 16px */
}

small {
    font-size: 0.875rem; /* تعني 14px */
}

اختر - إذا كان حجم الخط الأساسي للمتصفح 16px، فكم يساوي 3rem؟
(أ) 16px. (ب) 32px. (ج) 48px. (د) 30px.

الإجابة: (ج) 48px. (لأن 3 ضرب 16 يساوي 48).

4. الفرق الخطير بين REM و EM

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

مشكلة التراكم في EM

REM (Root EM): تنظر دائماً إلى "كبير العائلة" (وسم html) وتحسب النسبة منه. هي ثابتة ومستقرة.
EM: تنظر إلى "الأب المباشر" للعنصر. وهنا تكمن الخطورة!

مثال الكارثة (The Compounding Problem):

تخيل قائمة ul حجم خطها 1.5em، بداخلها قائمة أخرى ul بحجم 1.5em.

القائمة الأولى: 1.5 × 16 = 24px.
القائمة الثانية (الابن): لن تكون 24px! بل ستكون 1.5 × (حجم أبيها 24px) = 36px!
القائمة الثالثة (الحفيد): 1.5 × 36 = 54px!

بينما لو استخدمت rem، ستكون جميع القوائم بحجم 24px لأنها تنظر للجذر فقط.

مقارنة الكود: REM vs EM


/* استخدام REM: آمن ومستقر */
.safe-text {
    font-size: 1.2rem; /* دائماً 19.2px */
}

/* استخدام EM: يعتمد على الأب */
.parent {
    font-size: 20px;
}

.child {
    /* ستحسب 1.5 بالنسبة للـ 20px الخاصة بالأب */
    /* النتيجة: 30px */
    font-size: 1.5em; 
}

5. وحدات إطار العرض (VW & VH): نصوص مرنة

ماذا لو أردت نصاً عملاقاً يملأ نصف الشاشة دائماً، سواء كنت على هاتف صغير أو شاشة سينما؟ هنا نستخدم وحدات الـ Viewport.

معنى VW و VH

VW (Viewport Width): 1vw = 1% من عرض الشاشة الحالية.
VH (Viewport Height): 1vh = 1% من ارتفاع الشاشة الحالية.

مثال: إذا كتبت font-size: 10vw، فهذا يعني أن حجم الخط سيكون دائماً 10% من عرض نافذة المتصفح. إذا قمت بتصغير النافذة بيدك، سيصغر الخط فوراً!

متى نستخدمها؟

تستخدم غالباً في العناوين الرئيسية الضخمة (Hero Section Headlines). لا تستخدمها في نصوص الفقرات (Paragraphs) أبداً، لأنها قد تصبح صغيرة جداً جداً على شاشات الموبايل لدرجة استحالة قراءتها.

مثال على نص متجاوب بـ VW


h1 {
    /* هذا الخط سيتغير حجمه كلما غيرت حجم النافذة */
    font-size: 5vw; 
}

6. النسبة المئوية (%) والكلمات المفتاحية

هناك طرق أخرى أقل شيوعاً ولكن من المهم معرفتها.

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

تعمل تماماً مثل em. تحسب النسبة بناءً على حجم خط العنصر الأب.

font-size: 100%; = نفس حجم الأب (1em).
font-size: 200%; = ضعف حجم الأب (2em).
تستخدم غالباً في ضبط حجم html ليكون الأساس لـ REM.

الكلمات المفتاحية (Keywords)

يمكنك استخدام كلمات مثل: xx-small, small, medium, large, xx-large.

نادراً ما تستخدم في التصميم الدقيق لأنها تختلف قليلاً من متصفح لآخر، لكن medium تعادل عادة 16px.

جدول المقارنة (متى أستخدم ماذا؟)

لتسهيل الأمر عليك، إليك هذا الدليل السريع لاختيار الوحدة المناسبة.

الوحدة	النوع	الاستخدام الموصى به	ملاحظات هامة
rem	نسبية (للجذر)	كل النصوص (Body, Headings)	الخيار الأفضل للمواقع المتجاوبة وسهولة الوصول.
px	مطلقة (ثابتة)	الحدود (Borders)، الظلال (Shadows)	تجنبها في النصوص لأنها لا تحترم إعدادات المستخدم.
em	نسبية (للأب)	حالات نادرة (مثل أيقونة بجانب نص)	احذر من مشكلة التراكم (Compounding) عند التداخل.
vw / vh	نافذة العرض	العناوين العملاقة فقط	لا تستخدمها للنصوص الصغيرة، ستصبح غير مقروءة في الموبايل.

خلاصة الدرس: إذا كنت محتاراً، اجعل rem صديقك الصدوق لجميع أحجام الخطوط، واستخدم px للحدود والمسافات الدقيقة جداً.

تعلم احجام النصوص (وحدات القياس) Css