استخدام أحجام الخط القابلة للقراءة

يتم تشغيل هذه القاعدة عندما يكتشف PageSpeed Insights أن النص الوارد في الصفحة صغير لدرجة لا يمكن أن يكون مؤهلاً بسببها.

نظرة عامة

ويمكن تحديد حجم الخط من خلال أربع وحدات شائعة وهي: وحدات البكسل (px)، والنقاط (pt)، ووحدات تركيز النص (em)، والنسبة المئوية (%).

  • وحدات البكسل هي "بكسل CSS" وتختلف باختلاف حجم الجهاز وكثافته.
  • يتم تحديد النقاط بالنسبة إلى وحدات بكسل. وحدة البكسل الواحدة تساوي 0.75 نقطة*.
  • وحدات EM والنسبة المئوية تعد وحدات "نسبية"؛ نظرًا لأنها تعتمد على الحجم والخصائص المستنبطة من الخط المستخدم. وتساوي وحدة EM الواحدة نسبة 100%.

* راجع الملاحظات الإضافية.

علاوة على ذلك، يؤثر إطار العرض في كيفية ضبط الخطوط على أجهزة الجوّال. ويتم الضبط على قيمة أقل في الصفحة التي لا تتضمن إطار عرض تمت تهيئته بشكل سليم على أجهزة الجوّال، وهو ما يتسبب غالبًا في أن يصبح النص الذي يظهر على الصفحة غير مؤهل نظرًا لصغر حجمه.

التوصيات

أولاً، يمكنك تهيئة إطار عرض للتأكد من أنه سيتم ضبط الخطوط كما هو متوقع عبر أجهزة متنوعة. بعد تهيئة إطار عرض، يمكنك تنفيذ التوصيات الإضافية التالية.

  1. استخدم حجم خط أساسي يتألف من 16 بكسل CSS. واضبط الحجم عند اللزوم بناءً على خصائص الحجم المستخدم.
  2. استخدم أحجامًا نسبية مع الحجم الأساسي لتحديد الضبط المطبعي.
  3. يحتاج النص إلى مساحة عمودية بين أحرفه وقد يحتاج إلى الضبط مع كل خط. والتوصية العامة هي استخدام الإعداد الافتراضي للمتصفح line-height الذي يبلغ 1.2em.
  4. قيِّد عدد الخطوط المستخدم والضبط المطبعي: يؤدي العدد الكبير للخطوط وأحجامها إلى تنسيقات صفحات فوضوية ومعقدة إلى حد كبير.

على سبيل المثال، يحدد مقتطف CSS التالي حجم خط أساسي يتألف من 16 بكسل CSS، بفئة CSS "صغير" وحجم خط بنسبة 75% من الخط الأساسي (12 بكسل CSS) وبفئة CSS "كبير" يتميز بحجم خط بنسبة 125% من الخط الأساسي (20 بكسل CSS):

body {
  font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}

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

مزيد من المعلومات

تتطلب مواصفة CSS 2.1 قراءة متأنية لاستيعاب كيفية تحديد وحدات الطول. وتتضمن هذه المواصفة المزيد من الوحدات التي لم يتم ذكرها هنا: البوصة والسنتيمتر والملليمتر والبيكا. أما الشيء الذي يسهل الإخفاق فيه فهو أن بوصة CSS ليست مساوية دائمًا للبوصة الفعلية.

يتم تحديد الوحدات المجردة بالنسبة إلى بعضها البعض. وحدة البكسل الواحدة تساوي 75. نقطة، ووحدة النقطة الواحدة تساوي 1/72 من البوصة، والبوصة الواحدة تساوي 2.54 سنتيمتر وما إلى ذلك. إلا أنه يُترك تحديد كيفية "إرساء" هذه الوحدات للجهاز. على سبيل المثال، عند الطباعة على الورقة، يتم إرساء البوصة الواحدة على البوصة الفعلية، ويجب أن تكون جميع الوحدات الأخرى نسبية مع البوصة الفعلية. إلا أنه عند ظهور إرساء الأجهزة على هاتف جوّال، يتم إرساء الأجهزة مع ما يُعرف باسم "بكسل مرجعي". يتم تحديد وحدة البكسل CSS الواحدة وفقًا لوحدة البكسل المرجعية هذه، ويتم ضبط جميع الوحدات الأخرى، بما في ذلك البوصة والسنتيمتر وما إلى ذلك، بالنسبة إلى وحدة بكسل CSS. إلا أن وحدة بوصة CSS الواحدة على الهاتف الجوّال عادة ما تظهر بحجم أصغر من البوصة الفعلية.

ونحن نوصي بتحديد أحجام الخط باستخدام وحدات بكسل لهذا السبب. قد ينخدع بعض المصممين ومطوِّري البرامج عند مشاهدة البوصات والنقاط المستخدمة؛ فهي أبعاد مادية، ولكنها لا تمثل الأحجام الفعلية بالضرورة. ويمكن التفكير في وحدة بكسل دائمًا لتغيير الحجم وفقًا للجهاز الذي يتم عرضها عليه.

وفي النهاية، يكون لكل خط سماته الخاصة وهي: الحجم والمسافات وهكذا. وافتراضيًا يعرض المتصفح كل خط على 16 بكسل (وحدات بكسل CSS). ويعد هذا الإعداد الافتراضي مناسبًا لمعظم الحالات، إلا أنه قد يحتاج إلى الضبط مع خط محدد، أي يمكن تعيين الحجم الافتراضي على أقل من أو أعلى من ليتناسب مع السمات المختلفة للخط. وبعد تعيين حجم الخط الافتراضي، يجب تحديد الخطوط الأكبر والأصغر بالنسبة إلى الحجم الافتراضي باستخدام وحدات بكسل. ويمكن بعد ذلك استخدامها في ضبط حجم النص مع النوع الأساسي والثانوي وغيره من أنواع المحتوى الذي يظهر على الصفحة.

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