يعد تعيين حجم الخط الصحيح على صفحات الويب عنصرا مهما في التصميم والتأثير على القارئ. يجب أن يكون مطورو الويب قادرين على التحكم في أحجام الخطوط لإنشاء تجربة قراءة ممتعة وتحسين تجربة المستخدم.
يوفر هتمل عدة طرق لتعيين أحجام الخطوط لمحتوى النص. تتمثل إحدى الطرق الأكثر شيوعا في استخدام سمة النمط ، والتي تتيح لك تعيين خصائص نمط مختلفة ، بما في ذلك حجم الخط.
على سبيل المثال ، لتعيين حجم الخط إلى 16 بكسل ، يمكنك استخدام الكود التالي: النمط="حجم الخط: 16 بكسل؛"
يمكنك أيضا استخدام وحدات القياس النسبية ، مثل النسب المئوية أو م. تحدد النسب المئوية حجم الخط بالنسبة إلى حجم الخط المحدد للعنصر الأصل. على سبيل المثال ، نمط الرمز= " حجم الخط: 120٪"; تعيين حجم الخط إلى 20 ٪ أكبر من العنصر الأصل.
تشير وحدة القياس إم أيضا إلى حجم العنصر الأصل. نمط الرمز= "حجم الخط: 1.5 م ؛" سيحدد حجم الخط مساويا لأحجام خط ونصف للعنصر الأصل.
يعد اختيار حجم الخط الصحيح خطوة مهمة في إنشاء صفحة ويب. معرفة أساسيات تحديد أحجام الخطوط في هتمل ، يمكنك إنشاء صفحات ويب جذابة وقابلة للقراءة لجمهورك.
- لماذا حجم الخط مهم?
- استخدام أحجام الخطوط المطلقة
- استخدام أحجام الخطوط النسبية
- مزيج من أحجام الخطوط في هتمل
لماذا حجم الخط مهم?
يساعد حجم الخط الصحيح على تحسين قابلية قراءة النص وجعله في متناول مجموعة واسعة من المستخدمين. يمكن أن يتسبب حجم الخط الصغير جدا في صعوبة القراءة ويؤدي إلى تجربة مستخدم غير مرضية. من ناحية أخرى ، يمكن أن يجذب حجم الخط الكبير جدا الانتباه المفرط ويزيد من سوء الجماليات العامة للتصميم.
بالإضافة إلى ذلك ، فإن اختيار حجم الخط المناسب له تأثير على إدراك المحتوى. يمكن أن تستخدم العناوين الرئيسية حجم خط كبير لتسليط الضوء على النقاط الرئيسية وجذب انتباه القارئ. في الوقت نفسه ، يمكن تصميم محتوى النص باستخدام حجم خط أصغر للحفاظ على سهولة القراءة داخل الفقرات والفقرات.
لا تنس أن حجم الخط مهم أيضا للتصميم سريع الاستجابة. سيساعد حجم الخط المناسب في تحسين إمكانية القراءة على أنواع مختلفة من الأجهزة مثل الهواتف الذكية والأجهزة اللوحية وأجهزة الكمبيوتر.
يعد استخدام حجم الخط الصحيح خطوة مهمة لإنشاء تصميم ويب جذاب وقابل للقراءة وفعال.
استخدام أحجام الخطوط المطلقة
لتعيين حجم الخط المطلق في هتمل ، يمكنك استخدام سمات النمط وحجم الخط. يتيح لك ذلك تحديد حجم الخط بشكل صريح بالبكسل أو النقاط أو البوصات أو وحدات القياس الأخرى. أمثلة على استخدام أحجام الخطوط المطلقة:
مثال 1:
هذا نص بحجم خط 12 بكسل
المثال 3:
| هذا نص بحجم خط أكبر مرة ونصف من حجم العنصر الأصل | |
يرجى ملاحظة أن أحجام الخطوط المطلقة لا تأخذ في الاعتبار إعدادات المستخدم والقدرة على توسيع الصفحة. لذلك ، قد يؤدي استخدامها إلى أن يكون النص صغيرا جدا أو كبيرا بالنسبة لبعض المستخدمين.
يمكن استخدام وحدات القياس التالية لتعيين أحجام الخطوط النسبية:
وحدة القياس
الوصف
من م
حجم الخط يساوي حجم الخط الحالي للعنصر الذي يتم تطبيقه عليه. على سبيل المثال ، تتوافق القيمة 1 م مع حجم الخط الأساسي للعنصر.
ريم
حجم الخط يساوي حجم الخط الأساسي للعنصر الجذر (على سبيل المثال). يتيح لك استخدام حركة العين السريعة إنشاء واجهات قابلة للتطوير مع مراعاة حجم خط أساسي واحد فقط.
%
يتم تعيين حجم الخط كنسبة مئوية من حجم الخط الأساسي للعنصر. على سبيل المثال ، تتوافق قيمة 100 ٪ مع حجم الخط الأساسي للعنصر ، وتضاعف قيمة 200 ٪ ، وما إلى ذلك.
أمثلة على استخدام أحجام الخطوط النسبية: