حجم خط مرن وملائم لكل الشاشات

الحمد لله الذي علَّم بالقلم، علَّم الإنسان ما لم يعلم، والصلاة والسلام على خير معلِّم الناس الخير سيدنا محمد - صلَّى الله عليه وسلم … أما بعد ،،

يرجى العلم أن هذا المقال مترجم بتصرف من المقال بعنوان Responsive Font Size (Optimal Text at Every Breakpoint) ولقراءة المقال الأصلي يمكنك ذلك من الرابط

إن التصميم المرن (Responsive design) لا يقتصر فقط على هيكل وبنية صفحة الويب، حجم الخط أيضا يمكن أن يكون مرن وتفاعلي.

على الشاشات الصغيرة مثل شاشة الموبايل مساحة العرض أقل، وبالتالي من المنطقي استخدام حجم خط صغير - دون الإخلال بوضوح النص وسهولة قراءته، ولعل أنسب حجم خط للشاشات الصغيرة هو 16 بكسل.

بينما على الشاشات الأكبر مثل التابلت والكمبيوتر يتوفر لديك مزيد من المساحة يمكنك استغلالها في عرض حجم أكبر للخطوط، حيث يتراوح حجم الخط المناسب بين 18 إلى 20 بكسل.

بناء على ما سبق، يمكن جعل حجم الخط تفاعلى بناء على مقاس الشاشة كالتالي

تثبيت حجم مناسب لكل نقطة توقف (Breakpoint)

في هذه الطريقة نقوم باختيار حجم مناسب لكل "نقطة توقف" عند التعامل مع التصميم المرن في ملفات التنسيق (CSS)، كما في الكود التالي

body {
    font-size: 16px;
}
@media (min-width:768px) {
    body {
        font-size: 18px;
    }
}
@media (min-width:1024px) {
    body {
        font-size: 19px;
    }
}
@media (min-width:1280px) {
    body {
        font-size: 20px;
    }
}

بالرغم أن الطريقة السابقة تحقق الهدف، لكن يوجد بها مشكلتين:

• حجم الخط قد يكون ملائم عند "نقطة توقف" معينة لكن ما بين نقاط التوقف قد يكون حجم الخط أكبر أو أقل من المناسب.
• هذه الطريقة تتطلب كتابة أكواد كثيرة في أماكن متفرقة بناء على كل نقطة توقف، مما يؤثر على جودة الكود المكتوب وسهولة تعديله.

لحسن الحظ هناك طريقة أخرى أكثر بساطة

جعل حجم الخط مرن و انسيابي

بدلا من تثبيت حجم خط لكل نقطة توقف، يمكن كتابة واستخدام معادلة حسابية لحساب حجم الخط بناء على اتساع الشاشة، ويتم تحقيق ذلك باستخدام الدالة ()calc الموجودة في ملفات التنسيق (CSS) كالتالى

body {
    font-size: calc(15px + 0.390625vw);
}

المعادلة السابقة تقوم بحساب حجم الخط 15 بكسل ويضاف عليها 0.00390625% من حجم الشاشة.

الرقم السابق تم اختياره بعناية بحيث يحقق أفضل حجم مثالي لكل نقطة توقف، كالتالي

• عند اتساع 320px يكون حجم الخط 16px (مثال موبايل ايفون 4 و5)
• عند اتساع 768px يكون حجم الخط 18px (جهاز لوحي "آيباد" وضع رأسي)
• عند اتساع 1024px يكون حجم الخط 19px (جهاز لوحي "آيباد" وضع أفقي)
• عند اتساع 1280px يكون حجم الخط 20px
• عند اتساع 1536px يكون حجم الخط 21px
• عند اتساع 1920px يكون حجم الخط 23px
• عند اتساع 2560px يكون حجم الخط 25px

لاحظ معي كيف أن هذه الطريقة أكثر بساطة وقوة من السابقة.

تريد مثال على هذه الطريقة ؟ موقعي (الذي تتصفحه الآن) يستخدم نفس هذه الطريقة ليحقق حجم خط مرن وتفاعلي، جرب أن تعدل حجم الشاشة في متصفحك لتشاهد النتيجة بنفسك!

معلومة أخيرة

عند استخدام الطريقة السابقة في ضبط حجم الخط بشكل مرن، يرجى مراعاة استخدام وحدة القياس rem وليس px عند ضبط القياسات المخصصة مثل العناوين H1 و H2 وغيرها

h1 {
    font-size: 1.8rem;
}
h2 {
    font-size: 1.5rem;
}

استخدام حجم الخط بالطريقة السابقة يساعد على الحفاظ على نفس النسب بين أحجام الخطوط وبعضها، مما يجعلها تبدو بأفضل حجم على الرغم من اختلاف شاشات عرضها.