أسلوب الخط

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

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

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

حجم النص

من الصعب معرفة حجم النص المناسب على الويب.

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

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

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

يمكنك استخدام طلبات البحث عن الوسائط لتغيير السمة 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);
}

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

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

تقييد النص

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

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

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

يتقلّص حجم النص ويتزايد الآن بما يتناسب مع شاشة المستخدم، ولكن لن ينخفض حجم النص أبدًا عن 1rem أو يتجاوز 2rem.

طول السطر

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

في كتابه الكلاسيكي The Elements of Typographic Style، ذكر "روبرت برينغورست" ما يلي حول طول السطر (أو قياسه):

أي شيء من 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 أكبر. ولكن إذا كنت تستخدم قيمًا كبيرة لسطور النص الطويلة، سيكون من الصعب على عين القارئ الانتقال من نهاية سطر إلى بداية السطر التالي.

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 حتى إذا كنت تستضيف ملفات الخطوط بنفسك.

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

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

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

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

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

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

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

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

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

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

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

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

التحقّق من فهمك

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