أسلوب الخط

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

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

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

حجم النص

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

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

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

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

يمكنك استخدام الاستعلامات عن الوسائط لتغيير السمة 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 أكبر. ولكن إذا كنت تستخدم قيم 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;
}

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

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

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

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

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

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

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

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

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

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