أسلوب الخط

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

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

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

حجم النص

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

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

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

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

يمكنك استخدام الاستعلامات عن الوسائط لتغيير السمة 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 مطلقًا.

طول السطر

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

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

أي طول من 45 إلى 75 حرفًا يُعتبر على نطاق واسع طول سطر مُرضٍ لصفحة تحتوي على عمود واحد على وجه نص serif في حجم نص. يعتبر السطر المكون من 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 حتى إذا كنت تستضيف ملفات الخطوط بنفسك.

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

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

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

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

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

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

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

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

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

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

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

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

التحقّق من استيعابك

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