الدرس 1 من 8

سلّم الأحجام

هدف الدرس

عناوين تتدرّج أحجامها بوضوح

01

الشرح

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

وتبني سلّم الأحجام بنسبة ثابتة لا بأرقام عشوائية، فتختار حجم نصّ الفقرات، ثم تضربه في نسبة مثل 1.25 أو 1.333 لكل درجة أعلى، فتخرج أحجام متناسقة يرتاح لها القارئ وإن لم يعرف السبب.

وتكفي ثلاث درجات لمعظم الصفحات، لأن الزيادة عليها تُضعف الفرق بين العناوين بدل أن تقوّيه.

02

المطلوب

اجعل h1 أكبر من h2، وh2 أكبر من h3، واجعل حجم h1 لا يقلّ عن حجم h3 مضروبًا في 1.6.

الفحوص

5 فحوص
  1. حجم h1 أكبر من حجم h2
  2. حجم h2 أكبر من حجم h3
  3. حجم h3 أكبر من حجم الفقرة
  4. حجم h1 يبلغ 1.6 ضعف حجم h3 على الأقل
  5. الأحجام بوحدات نسبية (rem أو em)
03

تلميحات

0/3
دروس المسارأتممت 0 من 8

تتعلّم في هذا المسار تدرّج أحجام العناوين ووحدات القياس وطول السطر واتجاه النصّ، لأن النصّ هو أكثر ما يقرؤه الناس في أي واجهة.

مستواه مبتدئ، وفيه 8 دروس مجموع مدّتها ساعة ونصف.

index.html
المعاينة
index.html100%
–/5

اضغط «تشغيل وتصحيح» ليبدأ الفحص.

تجد 5 فحوص في بطاقة «المطلوب».

دروس المسارأتممت 0 من 8

تتعلّم في هذا المسار تدرّج أحجام العناوين ووحدات القياس وطول السطر واتجاه النصّ، لأن النصّ هو أكثر ما يقرؤه الناس في أي واجهة.

مستواه مبتدئ، وفيه 8 دروس مجموع مدّتها ساعة ونصف.