يلعب اختيار الخطوط وأحجامها دورا مهما في تصميم الويب. إنها تخلق جوا ولها تأثير على سهولة قراءة النص. ومع ذلك ، تظل مسألة أحجام الخطوط التي تم تعيينها بواسطة المعيار مفتوحة.
تختلف أحجام الخطوط القياسية اعتمادا على نظام التشغيل والمتصفح ، مما يخلق صعوبات لمطوري الويب. ومع ذلك ، هناك بعض التوصيات التي تساعدك على تحديد أحجام الخطوط.
تتمثل إحدى التوصيات في استخدام وحدات القياس النسبية ، مثل النسب المئوية أو م. يتيح لك ذلك تكييف أحجام الخطوط مع دقة الشاشة والأجهزة المختلفة ، مما يوفر إمكانية قراءة أفضل للنص.
بالإضافة إلى ذلك ، تجدر الإشارة إلى أن حجم الخط الأمثل يعتمد على الطباعة والأبعاد الخطية وسياق النص. على سبيل المثال ، غالبا ما تستخدم أحجام الخطوط الكبيرة للعناوين لجذب انتباه القارئ ، وتستخدم الخطوط المتوسطة أو الصغيرة للفقرات والعناوين الوسيطة لضمان سهولة القراءة.
نتيجة لذلك ، يعد اختيار أحجام الخطوط عملية موضوعية وذاتية تعتمد على مهمة المطور وتفضيلاته. من المهم إيجاد توازن بين الجماليات والوظائف لضمان أقصى قدر من سهولة قراءة النص على موقع الويب الخاص بك.
- أحجام الخطوط في المعيار
- أحجام الخطوط للعناوين
- أحجام الخطوط للنص الرئيسي
- أحجام الخطوط للفقرات
- أحجام الخطوط للقوائم
- أحجام الخطوط للروابط
- أحجام الخطوط للتعليق والحواشي السفلية
أحجام الخطوط في المعيار
لا يحدد معيار هتمل أحجام خطوط محددة يجب استخدامها في صفحات الويب. بدلا من ذلك ، يمكن لمطوري مواقع الويب الاختيار من بين عدة أحجام خطوط محددة مسبقا أو استخدام كس لتحديد الأحجام بشكل صريح.
ومع ذلك ، هناك عدد من أحجام الخطوط المقبولة عموما والتي تستخدم على نطاق واسع في تصميم الويب:
- خط صغير: عادة ما يساوي حوالي 12 بكسل في الارتفاع;
- الخط العادي: عادة ما يساوي حوالي 16 بكسل في الارتفاع;
- خط كبير: عادة ما يساوي حوالي 20 بكسل في الارتفاع;
- خط كبير جدا (كبير جدا): عادة ما يساوي حوالي 24 بكسل في الارتفاع;
- خط ضخم: عادة ما يساوي حوالي 32 بكسل في الارتفاع.
وبالإضافة إلى ذلك ، كس يسمح لك لتحديد أحجام الخطوط في وحدات مختلفة من القياس ، مثل بكسل (بكسل) ، النسب المئوية ( ٪ ) ، إم (إم) ، وهلم جرا. يتيح ذلك للمطورين إنشاء تصميم أكثر مرونة واستجابة.
في النهاية ، يعتمد اختيار أحجام الخطوط في تصميم الويب على الاحتياجات المحددة للمشروع وتفضيلات المطور. ومع ذلك ، عند اختيار أحجام الخطوط ، يجب مراعاة سهولة القراءة وإمكانية الوصول للمستخدمين.
أحجام الخطوط للعناوين
توفر معايير الويب استخدام أحجام خطوط مختلفة للعناوين. كل رأس له حجم مجموعة خاصة به ، والتي يمكن تغييرها فقط إذا لزم الأمر. يوجد أدناه جدول بأحجام خطوط لمستويات رأس مختلفة:
| مستوى الرأس | حجم الخط |
|---|---|
| ح1 | 32 بكسل |
| ح2 | 24 بكسل |
| ح3 | 18 بكسل |
| إتش 4 | 16 بكسل |
| إتش 5 | 14 بكسل |
| اتش 6 | 12 بكسل |
أحجام الخطوط هذه قياسية ويوصى باستخدامها في تطوير الويب. فهي تساعد على إنشاء نمط وهيكل موحد على الصفحة ، مما يحسن تصور المستخدم للمحتوى.
أحجام الخطوط للنص الرئيسي
يتم تحديد أحجام الخطوط للنص الرئيسي وفقا للمعيار ويتم تنظيمها من أجل ضمان سهولة قراءة المعلومات على صفحات الويب وقابليتها للقراءة.
تتضمن قيم الخطوط الأكثر شيوعا للنص الرئيسي ما يلي:
- 10 بكسل هو خط صغير يستخدم للفت الانتباه إلى معلومات إضافية أو عناصر مساعدة.
- 12 بكسل هو خط يستخدم عادة للعناوين والأوصاف عند الحاجة إلى عرض نص أكثر تعبيرا.
- 14 بكسل هو حجم الخط القياسي للنص الرئيسي. هذا هو الحجم الذي يوفر أفضل مزيج من سهولة القراءة وسهولة القراءة.
- 16 بكسل هو خط كبير يستخدم لتمييز المحتوى الرئيسي أو في الحالات التي تتطلب زيادة سهولة القراءة.
- 18 بكسل هو خط كبير جدا يستخدم لجذب أقصى قدر من الاهتمام للمعلومات أو ، إذا لزم الأمر ، التركيز بشكل خاص على النص.
يعتمد اختيار حجم الخط للنص الرئيسي على نوع المعلومات المعروضة على صفحة الويب ، وكذلك على تصميمها وأسلوبها.
بالإضافة إلى ذلك ، يجب ألا يغيب عن البال أنه يمكن للمستخدم تغيير حجم الخط المحدد في إعدادات متصفحه. لذلك ، من الأفضل استخدام وحدات القياس النسبية (على سبيل المثال ، النسب المئوية أو م) لضمان القدرة على التكيف ومرونة عرض النص.
وبالتالي ، يجب أن يعتمد اختيار حجم الخط الأمثل للنص الرئيسي على سهولة قراءته وقابليته للقراءة والامتثال لتصميم صفحة الويب.
أحجام الخطوط للفقرات
تحدد معايير الويب أحجام الخطوط الموصى بها لعرض الفقرات على صفحات الويب. تم تصميم هذه الأبعاد لضمان سهولة قراءة النص ويجب تطبيقها عند تصميم صفحات الويب.
يوضح الجدول 1 أحجام الخطوط الموصى بها للفقرات بالبكسل والقيم المقابلة بالوحدات النسبية لـ م و ريم.
| حجم الخط (بكسل) | حجم الخط (م) | حجم الخط (ريم) |
|---|---|---|
| 12 | 0.75 | 0.75 |
| 14 | 0.875 | 0.875 |
| 16 | 1 | 1 |
| 18 | 1.125 | 1.125 |
| 24 | 1.5 | 1.5 |
الجدول 1: أحجام الخطوط الموصى بها للفقرات.
عند استخدام أحجام الخطوط المحددة ، ستحقق الفقرات الموجودة على صفحات الويب توازنا مثاليا بين حجم الخط وسهولة قراءة النص. يمكن تحديد حجم الخط بالبكسل أو وحدات إم أو وحدات ريم في رمز كس في الخصائص المقابلة.
باستخدام أحجام الخطوط الموصى بها ، يمكن للمطورين إنشاء صفحات ويب بنص يمكن قراءته جيدا وتوفير تجربة قراءة ممتعة للمستخدمين.
أحجام الخطوط للقوائم
وفقا للمعايير ، يجب استخدام خطوط بأحجام معينة لإنشاء قوائم بصفحات الويب. بالنسبة للقوائم النقطية ، يوصى باستخدام حجم خط 16 بكسل. هذا يضمن عرضا واضحا إلى حد ما للنص ، مع عدم خلق ضغط غير ضروري على عيون المستخدم.
بالنسبة للقوائم المرقمة ، يوصي المعيار باستخدام حجم خط 18 بكسل. هذا يسمح لك بتمييز الترقيم وجعله أكثر وضوحا. يضمن حجم 18 بكسل أيضا قراءة جيدة للنص داخل القائمة.
ومع ذلك ، ضع في اعتبارك أنه يمكن تغيير أحجام الخطوط باستخدام أنماط كس اعتمادا على التصميم المحدد لصفحة الويب. يمكن للمستخدمين أيضا ضبط أحجام الخطوط في متصفحاتهم وفقا لتفضيلاتهم واحتياجاتهم.
أحجام الخطوط للروابط
تعتمد أحجام الخطوط للروابط على السياق وأسلوب التصميم المستخدم. عادة ما يتم استخدام أحد أحجام الخطوط التالية للروابط:
- 10 بكسل-للروابط الصغيرة التي يمكن تضمينها في النص
- 12 بكسل هو حجم الخط القياسي للروابط ، وهو سهل القراءة ولا يسبب صعوبات عند التنقل
- 14 بكسل-للروابط المحركة أو تلك التي تحتاج إلى تسليط الضوء عليها بشكل منفصل
من المهم أن تضع في اعتبارك أنه يمكن تغيير أحجام الخطوط للروابط باستخدام أوراق الأنماط المتتالية (كس) وتعتمد على إعدادات المستخدم. يجب أن تضع في اعتبارك أيضا إمكانية الوصول إلى النص وقابليته للقراءة على الأجهزة والشاشات المختلفة.
لاختيار حجم الخط الأمثل للروابط ، يوصى بالرجوع إلى دليل تصميم المحتوى وأسلوب الموقع ، وكذلك للاختبار على أجهزة مختلفة ومع مستخدمين مختلفين.
أحجام الخطوط للتعليق والحواشي السفلية
لا يحدد المعيار أحجام خطوط محددة للتعليقات التوضيحية والحواشي السفلية ، حيث قد تختلف حسب التفضيلات والتصميم. ومع ذلك ، لضمان سهولة القراءة والأسلوب المتسق ، يوصى باتباع إرشادات معينة:
- التوقيعات: بالنسبة لعناوين الأقسام أو العناوين الكبيرة ، يوصى باستخدام خط أكبر ، على سبيل المثال ، 16-20 بكسل. هذا يساعد على تسليط الضوء على الأقسام ويجعل المعلومات أكثر تنظيما.
- الحواشي السفلية: بالنسبة للحواشي السفلية أو الملاحظات النصية ، عادة ما يتم استخدام خط مقترن: يمكن أن يستخدم النص العادي 12-14 بكسل ، ويمكن أن تستخدم الحواشي السفلية حوالي 10 بكسل. تساعد اختلافات الحجم هذه في جعل الحواشي السفلية أقل إزعاجا للقراءة ، ولكنها لا تزال قابلة للقراءة بدرجة كافية.
من الأفضل اختيار الخطوط التي يسهل قراءتها على أجهزة مختلفة وشاشات مختلفة. لا يعني حجم الخط الكبير دائما إمكانية قراءة أفضل ، ويمكن أن يؤدي الحجم الصغير جدا إلى حدوث صعوبات لبعض المستخدمين. لذلك ، من المهم إجراء الاختبار والانتباه إلى سهولة قراءة النص قبل تحديد حجم الخط النهائي للتعليقات التوضيحية والحواشي السفلية.