مناقشة مختصرة حول ما هو حجم الخط المناسب لصفحات الويب؟

في هذا العصر الذي يتميز بمئات العروض، غالبًا ما يحتاج مصممو الويب إلى مراعاة تجربة التصفح للعملاء المختلفين.

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

12 بكسل؟ 14 بكسل؟ 15 بكسل؟ أم لا ينبغي لنا استخدام وحدة بكسل على الإطلاق؟

أصل المشكلة هو أن جميع وحدات حجم الخط (px، pt، em) الموجودة على الشاشة هي وحدات نسبية، ولا يمكنها وحدها تحديد الحجم الفعلي للنص. علاوة على ذلك، يعتمد إدراك الناس الأساسي لحجم النص على منظور العيون، والذي لا يعتمد فقط على الحجم المادي للنص، ولكن يعتمد أيضًا على بعده عن العين البشرية.

الحجم المادي

أولاً، افترض أن حجم النص الفعلي الذي نريد تحقيقه، على سبيل المثال، تم ضبطه على 16 بكسل على شاشة مقاس 17 بوصة بدقة 1280 * 1024، ويبلغ ارتفاعه 4.32 ملم تقريبًا، ونحن نخطط لجعل نص الويب أقرب إلى هذا على معظم الشاشات. الحجم، فما حجم الخط الذي يجب عرضه بدقة مختلفة؟

الخطوة 1: حساب الدقة الرئيسية للمستخدم وحجم الشاشة المقابل.

للتحويل بين الحجم الفعلي والدقة، قم أولاً بحساب الدقة وحجم الشاشة المقابل. يمكن الحصول على توزيع قرارات المستخدم من السجلات الإحصائية للموقع. نظرًا لأن كل إعداد دقة قد يتوافق مع عدة شاشات بأحجام مختلفة، ولا يمكن الحصول على حجم الشاشة من خلال صفحة الويب، يتعين علينا إجراء تحليل إحصائي لسوق الشاشات الحالي: للحصول على دقة معينة، قم بحساب نطاقات حجم الشاشة المحتملة، من الأصغر إلى الأكبر، الحجم السائد نسبيًا (أو استخدم منتصف النطاق باعتباره الحجم السائد). كما هو موضح في الصورة أدناه ——

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

الخطوة 2: حساب العرض الفعلي لأحجام الشاشة السائدة لكل دقة

لا تشتمل نسب العرض إلى الارتفاع للشاشات اليوم على الشاشات القياسية 4:3 والشاشات العريضة 16:10 فحسب، بل تشتمل أيضًا على نسب أكثر انتظامًا من أجل مقارنة الشاشات ذات نسب العرض إلى الارتفاع المختلفة، ويتم استخدام الدقة الأفقية للإحصائيات. استخدم الحجم السائد ونسبة العرض إلى الارتفاع (على افتراض أن طول وعرض البكسلات متماثلان) لحساب عرض الشاشة (بوصة)، ثم تحويله إلى متري (ملليمتر). اتجاه حجم الشاشة. بالاشتراك مع توزيع المستخدم لكل دقة، تظهر النتائج كما هو موضح في الشكل أدناه (كل نقطة في الصورة تتوافق مع دقة الوضوح، المحور الأفقي هو عدد البكسلات في الاتجاه الأفقي للشاشة، والمحور الرأسي هو العرض الفعلي للشاشة، ويشير حجم الفقاعة إلى استخدام هذه الدقة عدد المستخدمين تشير الفقاعة الزرقاء إلى شاشة قياسية، ويشير اللون الأرجواني إلى شاشة عريضة): أكبر ثلاث فقاعات هي 1024*768 و1280*1024. 1280*800.

الخطوة 3: حساب حجم الخط على شاشات مختلفة

اقسم العرض الفعلي للشاشة على عرض البكسل للحصول على عرض كل بكسل. ثم قم بتقسيم هذا الرقم على الحجم الفعلي المحدد للنص للحصول على حجم الخط المطلوب بدقة مختلفة. على سبيل المثال، لعرض نص مربع بحجم 4.32 مم، تكون أحجام الخطوط التالية مطلوبة عند كل دقة (يتم حسابها بشكل منفصل لأجهزة الكمبيوتر المحمولة وأجهزة الكمبيوتر المكتبية):

أحجام الخطوط المطلوبة بدقة مختلفة

يمكن ملاحظة أن أحجام أجهزة الكمبيوتر المحمولة وأجهزة الكمبيوتر المكتبية مختلفة تمامًا، من أجل الراحة، يتم استخدام الحجم السائد أو متوسط ​​الحجم لكل دقة لحساب حجم الخط المطلوب لحجم الخط المحدد في كل دقة. (الصورة التالية تزيل تلك الدقة التي يتم استخدامها بشكل أساسي فقط على أجهزة الكمبيوتر المحمولة)، مع أخذ 4.32 مم و3.77 مم و3.25 مم كأمثلة (خطوط بحجم 16 و14 و12 بدقة 17 بوصة بدقة 1280*1024):

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

نظرًا لأن بعض الخطوط الصينية لا تظهر بشكل جيد في الأرقام غير الزوجية عند عدم تشغيل Cleartype، فمن المستحسن عمومًا استخدام أرقام زوجية مثل 12 و14 و16 و18 و22 بكسل. أي حدد أقرب رقم زوجي لدقة معينة. على سبيل المثال: يتم استخدام 14 بكسل للشاشات ذات الدقة الأفقية الأقل من 1100، ويستخدم 16 بكسل للشاشات التي تتراوح من 1100 إلى 1500، ويستخدم 18 بكسل للشاشات التي تزيد عن 1500، وهكذا.

المسافة إلى العين البشرية

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

من الناحية الكمية: نظرًا لأن حجم النص h (4 ~ 5 مم) صغير جدًا بالنسبة للمسافة d (30 ~ 60 سم) بين العين البشرية والنص، فيمكن اعتبار أن زاوية المشاهدة θ متناسبة مع h وعكسيًا يتناسب مع د (θ≈tgθ=h/ د). بمعنى آخر، سيظهر النص الذي له نفس الحجم بنصف الحجم فقط عندما يكون على بعد قدمين منه.

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

استخدم JS لضبط حجم الخط تلقائيًا ضمن درجات دقة مختلفة

على سبيل المثال، معرف القسم الذي يوجد به النص الأساسي لصفحة الويب هو المحتوى ——

ملاحظة: لضمان إمكانية تغيير حجم النص في كل متصفح، تستخدم وحدة حجم الخط em بدلاً من px. وبشكل عام، تكون الإعدادات الافتراضية للمتصفح هي 1em=16px، و0.875em1em1.125em هي 1416. 18 بكسل.

يرجى ملاحظة أنه عند استخدام تغيير حجم الخط: من الأفضل استخدام النسب المئوية بدلاً من أحجام الخطوط الثابتة لوحدات حجم الخط مثل العناوين الموجودة داخل div بحيث يمكن تغيير حجمها بشكل متزامن مع النص.

المرفق: البيانات الرئيسية المذكورة في الرسوم البيانية في هذه المقالة

تم نشره لأول مرة على هذا الموقع: http://www.mhzx1.com