فن الطباعة

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

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

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

حجم النص

من الصعب تحديد حجم النص المناسب على الويب.

إذا كان أحد المستخدمين يستعمل شاشة صغيرة، من المحتمل أن تكون الشاشة قريبة جدًا من عينيه، أي على بُعد ذراع.

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

مع ذلك، على الرغم من أنّه لا يمكنك معرفة مدى بعد المستخدم عن الشاشة، يمكنك محاولة استخدام أحجام نصوص من المفترض أن تكون مناسبة. استخدِم أحجام نصوص أصغر للشاشات الأصغر وأحجام نصوص أكبر للشاشات الأكبر.

يمكنك استخدام طلبات البحث عن الوسائط لتغيير السمة font-size عندما يصبح حجم الشاشة أكبر.

@media (min-width: 30em) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 40em) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 50em) {
  html {
    font-size: 175%;
  }
}

@media (min-width: 60em) {
  html {
    font-size: 200%;
  }
}

تغيير حجم النص

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

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

من المهم عدم استخدام vw بمفرده في تعريف حجم الخط.

html {
  font-size: 2.5vw;
}

في حال إجراء ذلك، لن يتمكّن المستخدم من تغيير حجم النص. سيكون النص قابلاً لتغيير الحجم إذا أضفت وحدة نسبية، مثل em أو rem أو ch. تُعدّ دالة CSS calc() مثالية لذلك.

html {
  font-size: calc(0.75rem + 1.5vw);
}

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

ولكن الآن، من المحتمل أن يصبح النص صغيرًا جدًا على الشاشات الضيقة وكبيرًا جدًا على الشاشات العريضة.

تثبيت النص

من المحتمل أنّك لا تريد أن يتقلّص النص ويتوسّع بشكل كبير. يمكنك التحكّم في موضعَي بدء وتوقّف تغيير الحجم باستخدام الدالة clamp() في CSS. يؤدي ذلك إلى "تثبيت" تغيير الحجم على نطاق معيّن.

تشبه الدالة clamp() الدالة calc()، ولكنها تأخذ ثلاث قيم. القيمة الوسطى هي القيمة نفسها التي تمرّرها إلى calc(). تحدّد القيمة الافتتاحية الحدّ الأدنى للحجم، وفي هذه الحالة 1rem حتى لا يقل عن حجم الخط المفضّل لدى المستخدم. تحدّد القيمة الختامية الحد الأقصى للحجم.

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

سيتم الآن تصغير حجم النص وتكبيره بما يتناسب مع شاشة المستخدم، ولكن لن يكون حجم النص أصغر من 1rem أو أكبر من 2rem.

طول السطر

الويب ليس وسيلة طباعة، ولكن يمكننا الاستفادة من دروس عالم الطباعة وتطبيقها على الويب.

في كتابه الكلاسيكي عناصر أسلوب الطباعة، كتب روبرت برينغهيرست ما يلي عن طول السطر (أو القياس):

يُعدّ أي عدد من الأحرف يتراوح بين 45 و75 حرفًا طول سطر مناسبًا لصفحة ذات عمود واحد تم ضبطها على خط ذي عوارض في حجم نص. يُعدّ السطر الذي يتضمّن 66 حرفًا (بما في ذلك الأحرف والمسافات) مثاليًا على نطاق واسع. بالنسبة إلى العمل في أعمدة متعددة، يكون المتوسط الأفضل هو 40 إلى 50 حرفًا.

لا يمكنك ضبط طول السطر مباشرةً في CSS. ما مِن سمة line-length. ولكن يمكنك منع النص من أن يصبح عريضًا جدًا من خلال وضع حدّ لعرض الحاوية. الموقع max-inline-size هو الخيار الأمثل لذلك.

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

article {
  max-inline-size: 700px;
}

article {
  max-inline-size: 66ch;
}

سيؤدي استخدام وحدات ch للعرض إلى التفاف الأسطر الجديدة عند الحرف رقم 66 بهذا الحجم للخط.

ارتفاع السطر

على الرغم من عدم توفّر السمة line-length في CSS، تتوفّر السمة line-height.

يمكن أن تحتوي أسطر النص الأقصر على قيم line-height أكبر. ولكن إذا كنت تستخدم قيم line-height كبيرة لأسطر طويلة من النص، سيصعب على القارئ الانتقال من نهاية سطر إلى بداية السطر التالي.

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

استخدِم قيمًا بدون وحدات في تعريفات line-height. يضمن ذلك أن يكون ارتفاع السطر مرتبطًا بـ font-size.

line-height: 24px;

line-height: 1.5;

المجموعات والمقياس

تذكَّر أن تمنح الأولوية للتسلسل الهرمي أثناء إنشاء واجهات المستخدم لتحسين الوضوح وتدفّق الصفحات. يمكن تحقيق ذلك من خلال مقياس أسلوب الخط المضمّن في نظام التصميم.

خطوط الويب

الخط الطباعي هو بمثابة صوت لكلماتك. لفترة طويلة، لم تتوفّر على الويب سوى خيارات قليلة جدًا للخطوط. كانت خطوط النظام هي الخيارات الوحيدة المتاحة. ولكن يمكنك الآن اختيار خط ويب يتناسب مع أسلوب المحتوى.

استخدِم @font-face لإخبار المتصفحات بمكان العثور على ملفات خطوط الويب. استخدِم woff2 كتنسيق خط الويب. وهي متوافقة بشكل جيد وتوفّر أفضل تحسينات في الأداء.

@font-face {
  font-family: Roboto;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
  font-family: Roboto, sans-serif;
}

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

تحميل الخط

يمكنك أن تطلب من المتصفّحات البدء في تنزيل ملف خط في أقرب وقت ممكن. أضِف عنصر link إلى head في مستندك يشير إلى ملف خط الويب. تطلب السمة rel التي تحمل القيمة preload من المتصفّح منح الأولوية لهذا الملف. تخبر السمة as التي تتضمّن القيمة font المتصفّح بنوع الملف، بينما تتيح لك السمة type تحديد نوع الملف بشكل أكثر دقة.

<link href="/fonts/roboto-regular.woff2" type="font/woff2"
  rel="preload" as="font" crossorigin>

يجب تضمين السمة crossorigin حتى إذا كنت تستضيف ملفات الخطوط بنفسك.

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

الحل الوسط الجيّد هو الانتظار لفترة قصيرة قبل عرض أي نص. إذا تم تحميل خط الويب قبل انتهاء هذا الوقت، سيتم عرض النص باستخدام خط الويب بدون أي تغييرات في المحتوى. إذا لم يتم تحميل خط الويب بعد انتهاء الوقت، يتم عرض النص باستخدام خط النظام حتى يتمكّن المستخدم على الأقل من قراءة المحتوى.

استخدِم القيمة font-display في swap إذا كنت لا تزال تريد أن يحلّ خط الويب محلّ خط النظام عند تحميل خط الويب في النهاية.

body {
  font-family: Roboto, sans-serif;
  font-display: swap;
}

استخدِم قيمة font-display تساوي fallback إذا كنت تريد الالتزام بخط النظام بعد عرض النص.

body {
  font-family: Roboto, sans-serif;
  font-display: fallback;
}

الخطوط المتغيّرة

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

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

وهذا يعني أنّ حجم ملف واحد من الخطوط المتغيرة أكبر من حجم ملف واحد من الخطوط العادية، ولكن من المحتمل أن يكون حجم ملف واحد من الخطوط المتغيرة أصغر من حجم ملفات متعددة من الخطوط العادية. إذا كنت تستخدم الكثير من الأوزان المختلفة، يمكن أن يمنحك الخط المتغير تحسّنًا كبيرًا في الأداء.

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

بعد أن أتقنت استخدام النص المتجاوب، حان الوقت للتعرّف على الصور المتجاوبة.

اختبِر معلوماتكَ

اختبر معلوماتك حول أسلوب الخط