لتتحكم في حجم خطوط صفحتك هناك أربع طرق-أذكرها إجمالا ثم أفصل-:

  1. باستخدام البيكسل
  2. بالنسبة المئوية
  3. بالتناسب
  4. بالكلمات(keywords)

والآن مع التفاصيل:

1- بالبيكسل:

body
{
font-size:  14px;
}

2- بالنسبة المئوية:

body
{
font-size:  14px;
}
h1
{
font-size:  150%;
}

لاحظ حجم ال(body) يبقى بوحدة البيكسل،والتغير يكون في العناصر الأخرى،وفي هذا المثال حجم ال(h1) يمثل 150% من حجم ال(body) الأساسي وهو 14 بيكسل.

3- بالتناسب: بمعنى أن حجم ال(h1)يمثل بمرة ونصف من الحجم الأساسي للـ(body)
1.5*14 بيكسل=21 بيكسل

body
{
font-size:  14px;
}
h1
{
font-size:  1.5em;
}

4- بالكلمات:

body
{
font-size: small;
}

(يعني تكتب حجم الخط: كبير(large)-وسط(medium)-صغير(small)-صغير جدا(x-small),...الخ)، وللمزيد حول الكلمات المتاحة ارجع لموضوع "طرق التحكم بالخط".

طيب والسؤال الآن أين الوصفة السحرية؟؟
ومافائدتها؟؟

أولاً نبدأ بالوصفة:

1- اختر كلمة للتحكم بالخط(يفضل صغير(small) أو وسط(medium)واجعلها لتخصيص ال(body) وستكون هي الخط الافتراضي للصفحة.
2- حدد حجم الخط لأي عنصر آخر غير الـ(body) مثل الـ(p) والـ(h1) وغيرهما بالطرق الأخرى(إما الثانية أو الثالثة)

وما الجديد مع هذه الوصفة؟؟
عندما ترتبط أحجام خطوط صفحتك بالحجم الافتراضي للصفحة الذي خصصناه في الـ(body)؛فإنك بكل سهولة وسلاسة فقط بتغييرك حجم خط الـ(body) فإنك عمليا تغير كل أحجام خطوط العناصر المرتبطة بالـ(body).
فمثلا إذا أردت أن تكبر خطوط الموقع قليلا فما عليك سوى أن تغير حجم خط الـ(body) من small إلى medium على سبيل المثال.
وكذلك لو أراد المتصفح أن يكبر حجم الصفحة فالعملية ستكون أكثر سهولة واحترافية.