حجم الخط هو أحد الجوانب المهمة لتصميم صفحة الويب. يؤثر على تصور المستخدم للنص ويمكن استخدامه لتسليط الضوء على العناوين والعناوين الفرعية وعناصر المحتوى المهمة الأخرى.
يوفر هتمل طرقا مختلفة لتعيين حجم الخط باستخدام سمة النمط. يسمح لك بتعيين حجم الخط بالبكسل أو النسب المئوية أو الكلمات الرئيسية مثل "صغير" و "متوسط" و "كبير".
على سبيل المثال ، لتعيين حجم الخط بالبكسل ، يمكنك استخدام الكود التالي:
نموذج النص
إذا كنت تفضل استخدام النسب المئوية ، فسيبدو الرمز كما يلي:
نموذج النص
بالإضافة إلى ذلك ، يمكنك تعيين حجم الخط باستخدام الكلمات الرئيسية. على سبيل المثال:
نموذج النص
يعتمد اختيار حجم الخط على المفهوم المرئي لمشروعك ومتطلبات المستخدم. يتيح لك استخدام الحجم المناسب إنشاء محتوى أكثر جمالية وقابلة للقراءة.
- أمثلة على أحجام خطوط أتش تي أم أل
- أحجام الخطوط للعناوين ح1-ح6
- أحجام الخطوط للفقرات
أمثلة على أحجام خطوط أتش تي أم أل
يحدد حجم الخط من 1 إلى 7.
فيما يلي أمثلة على استخدام أحجام خطوط هتمل المختلفة:
| الحجم | مثال بناء الجملة | مثال على العرض |
|---|---|---|
| 1 | هذا النص له حجم 1 | هذا النص له حجم 1 |
| 2 | هذا النص له حجم 2 | هذا النص له حجم 2 |
| 3 | هذا النص له حجم 3 | هذا النص له حجم 3 |
| 4 | هذا النص له حجم 4 | هذا النص له حجم 4 |
| 5 | هذا النص له حجم 5 | هذا النص له حجم 5 |
| 6 | هذا النص له حجم 6 | هذا النص له حجم 6 |
| 7 | هذا النص له حجم 7 | هذا النص له حجم 7 |
.
أحجام الخطوط للعناوين ح1-ح6
ح1-ح6 يتم استخدام الرؤوس لتنظيم بنية الصفحة والإشارة إلى أهمية المحتوى. قد تختلف أحجام الخطوط لكل عنوان ، ومن المهم مراعاة معناها السياقي عند الاختيار.
ح1 يستخدم الرأس عادة لرأس الصفحة الرئيسية. وعادة ما يكون أكبر حجم الخط ويجذب انتباه القراء. الاستخدام السليم لـ ح1 يساعد محركات البحث على فهم موضوع الصفحة ويحسن محسنات محركات البحث.
ح2 غالبا ما يستخدم الرأس للعناوين الفرعية التي تفصل الأقسام الرئيسية للصفحة. ال ح2 الخط عادة ما يكون أصغر قليلا من ح1 ، لكنه لا يزال يجذب الانتباه.
ح3 رأس يستخدم لتقسيم المحتوى إلى أقسام فرعية أصغر. حجم خط ح3 عادة ما يكون أصغر من حجم ح2 ، ويتوافق مع أهمية هذا القسم.
ح4 يمكن استخدام الرأس لعناوين أقسام الصفحة التي هي أقسام فرعية من ح3. ال ح4 الخط عادة ما يكون أصغر من ح3 الخط ويخلق تباينا واضحا بين عناوين المستويات المختلفة.
ح5 و ح6 يحتفظ الرأس بأحجام الخطوط الخاصة به ، ولكن يتم استخدامه بشكل أقل تكرارا. يمكن استخدامها لعناوين وقوائم إضافية لإنشاء طبقة إضافية من الهيكل.
أحجام الخطوط للفقرات
عند إنشاء فقرات نصية على صفحة ويب ، من المهم اختيار حجم الخط المناسب لضمان سهولة القراءة والبنية المرئية الجيدة.
لتحديد حجم الخط.
يوفر هتمل عدة طرق لتعيين حجم الخط للفقرات:
- هو ضعف كبير.
- يعني حجم الخط في 10 نقاط.
- يعني زيادة حجم الخط بنسبة 20 ٪ من الحجم الافتراضي.
نموذج التعليمات البرمجية لتعيين حجم الخط لفقرة:
| الطريق | مثال | الوصف |
|---|---|---|
| القيم النسبية | | ضبط حجم الخط على 1.2 ضعف حجم النص المحيط. |
| القيم المطلقة | | ضبط حجم الخط على 16 بكسل. |
| قيم النسبة المئوية | | تعيين حجم الخط إلى 20٪ أكبر من الحجم الافتراضي. |
عند اختيار حجم خط للفقرات ، ضع في اعتبارك أن الحجم الصغير جدا أو الكبير جدا قد يجعل من الصعب قراءته أو يبدو غير مريح على صفحة الويب. من المستحسن اختيار حجم يتوافق مع التصميم العام للصفحة وهو مناسب لمعظم الزوار للقراءة.
باستخدام أحجام خطوط مختلفة للفقرات ، يمكن لمطوري الويب إنشاء تركيبات مرئية فريدة وجذابة على صفحاتهم.