تصميم خطوط متجاوب ومرن باستخدام ميزات Baseline CSS

Miriam Suzanne

تاريخ النشر: 16 ديسمبر 2025

تصميم الويب سريع الاستجابة هو أسلوب لإنشاء مواقع إلكترونية تبدو جيدة وتعمل بشكل جيد على مجموعة من المتصفحات المختلفة وأبعاد إطار العرض والأجهزة وإعدادات المستخدم المفضّلة. عند تطبيقها على الطباعة، يكون الاهتمام الأساسي غالبًا هو تعديل font-size استنادًا إلى عرض المتصفّح، ما قد يؤثر أيضًا في قيم المسافات، مثل line-height وmargin.

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

• توفير إعدادات font-size تلقائية مفضّلة على جميع المواقع الإلكترونية
• تكبير أو تصغير المواقع الإلكترونية بشكل فردي

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

التفاوض على سعر أساسي font-size استنادًا إلى الإعدادات المفضّلة للمستخدم

تتمثل الخطوة الأولى في تحديد أي طباعة على الإنترنت في التفاوض على حجم خط مبدئي استنادًا إلى font-size المفضّلة لدى المستخدم. سيتم استخدام هذا الحجم لمعظم النص على الصفحة، كما سيتم استخدامه كأساس لأحجام الخطوط الأخرى، مثل العناوين. أبسط خيار هنا هو منح المستخدم التحكّم الكامل باستخدام 1em، بدون أي تعديلات. عندما لا تحدّد أي قيمة أخرى لـ font-size، يشير 1em إلى الإعداد المفضّل لدى المستخدم. على الجانب الآخر من الطيف، سيؤدي ضبط font-size بوحدات بكسل أو وحدات مطلقة أخرى (وحتى وحدات مرتبطة بإطار العرض) إلى تجاهل إعدادات المستخدم تمامًا، وهو أمر يجب تجنُّبه.

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

الخيار الأول: احتساب عامل مضاعف استنادًا إلى الافتراضات

أحد الحلول الشائعة هو تحديد font-size معدَّل بوحدات em أو %، وذلك بالنسبة إلى font-size التلقائي للمستخدم. بشكل عام، تبدأ هذه الطريقة بافتراض أنّ المتصفّحات توفّر قيمة تلقائية 16px، وأنّ معظم المستخدمين سيتركون هذه القيمة التلقائية كما هي. إذا كنت تعتقد أنّ حجم الخط 20px سيكون أفضل لموقعك الإلكتروني، فإنّ استخدام font-size بقيمة 1.25em أو 125% سيؤدي عادةً إلى النتيجة المطلوبة:

html {
  /* 20px preferred, 16px expected: 20/16 = 1.25 */
  font-size: 1.25em;
}

يمكنك أيضًا استخدام دالة calc() هنا لعرض العمليات الحسابية، ولكن عليك معرفة المعادلة، وهي الحجم المستهدف مقسومًا على الحجم المتوقع مضروبًا في 1em:

html {
  font-size: calc(20 / 16 * 1em);
}

سيتمكّن المستخدمون الذين لديهم إعدادات مفضّلة أكبر أو أصغر من التأثير في النتيجة، لأنّ الإعداد التلقائي أصبح الآن مرتبطًا بإعداداتهم المفضّلة، أي 1.25 مرة من إعداداتهم المفضّلة في هذه الحالة. ولكن قد يكون الأمر غريبًا إذا كنت أنت والمستخدم تطلبان كلاً من الإعدادات التلقائية 20px، وكانت النتيجة 25px، أي أنّ أوقات العرض التلقائية المعدَّلة مضروبة في 1.25 مرة أخرى، وهو حجم لم يطلبه أحد.

الخيار الثاني: السماح لـ clamp() بإنجاز المهمة

يتضمّن الأسلوب الأكثر دقة دوال مقارنة CSS، بدون أي عمليات حسابية. بدلاً من افتراض أنّ 1em يساوي 16px، وإجراء عمليات تحويل غير موثوقة من px إلى em، يمكنك اعتبار 1em متغيّرًا يشير إلى إعدادات المستخدم المفضّلة. بغض النظر عن قيمة البكسل التي يمثّلها 1em، سيعرض font-size بقيمة max(1em, 20px) دائمًا الحجم الأكبر من حجم الخط المفضّل لديك (20px) وحجم الخط المفضّل لدى المستخدم (1em). يتيح ذلك للمستخدم اختيار أحجام خط أكبر، ولكن ليس أصغر.

من خلال التبديل إلى الدالة clamp()، يمكنك السماح للمستخدم بتغيير الحجم في كلا الاتجاهين عندما يكون الحجم المفضّل لديه بعيدًا جدًا عن الحجم التلقائي الذي اخترته. على سبيل المثال، سيتم تلقائيًا ضبط font-size بقيمة clamp(1em, 20px, 1.25em) على 20px طالما أنّ هذه القيمة أكبر من القيمة التلقائية للمستخدم، ولكن ليس أكثر من 125% من القيمة التلقائية.

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

من خلال ضبط هذا الحجم كعنصر font-size أساسي في العنصر html، يمكنك الآن الإشارة إلى 1rem في أي مكان على الموقع الإلكتروني، باعتباره الحجم الأساسي المتفق عليه.

إضافة ميزة التجاوب

لجعل هذا font-size متوافقًا مع إطار العرض، يمكنك إضافة نقاط توقّف لطلب الوسائط (أو طلب الحاوية). على سبيل المثال، يمكنك تغيير القيمة المحصورة استنادًا إلى حجم الشاشة:

html {
  font-size: clamp(1em, var(--base-font-size, 16px), 1.25em);
  @media (width > 30em) { --base-font-size: 18px; }
  @media (width > 45em) { --base-font-size: 20px; }
}

الخيار الآخر هو إضافة وحدات إطار العرض أو الحاوية إلى القيمة الأساسية الثابتة:

html {
  font-size: clamp(1em, 16px + 0.25vw, 1.25em);
}

تمثّل الوحدات vw (عرض إطار العرض) أو vi (الحجم المضمّن لإطار العرض) %1 من إجمالي إطار العرض، أي الجزء من المتصفّح الذي يعرض موقعك الإلكتروني. وبالمثل، تمثّل الوحدتان cqw وcqi% 1 من حاوية inline-size على الصفحة. لمزيد من التفاصيل، يمكنك الاطّلاع على العرض التوضيحي لطلبات البحث عن الحاويات والوحدات.

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

تتمثّل الميزة الرئيسية لتحديد حجم الخط بشكل مرن في أنّه لا حاجة إلى حساب نقاط التوقف أو تحديدها يدويًا، ما يؤدي إلى توفير نتيجة مستوفاة في أي حجم معيّن. ما عليك سوى ضبط نقطة البداية (16px) ومعدّل التغيير (ستوفّر 0.25vw زيادة في 0.25px لكل زيادة في font-size في إطار العرض)، وربما الحدّين الأدنى والأقصى للقيم.100px عندما يكون عرض نافذة العرض 1000px، سيكون عرض font-size إما 16px + 2.5px أو 18.5px، ولكن يتم التعامل مع عملية الحساب هذه بالكامل من خلال المتصفّح. هذا هو الأسلوب المستخدَم في العرض التوضيحي، حيث يتم استخدام وحدات cqi لعرض مدى التجاوب المستند إلى الحاوية. عند استخدامها في العنصر الجذر (html)، حيث لا يوجد حاوية محدّدة، تظل وحدات cqi تشير إلى حجم إطار العرض.

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

تحذير: لا تعني تغييرات إطار العرض دائمًا الشيء نفسه.

على الرغم من أنّ طلبات البحث عن الوسائط ووحدات vi يتم تطبيقها بطرق مختلفة، يستند كلا الأسلوبين إلى القياس نفسه لمنطقة العرض. إذا كان عرض إطار العرض 600px، سيكون 100vw مساويًا 600px، وسيتم تطبيق الأنماط داخل طلب البحث عن الوسائط (width > 500px).

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

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

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

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

وبالمثل، لا يوفّر حساب 1vw أو حساب 100vw font-size التلقائي للمستخدم.

إنّ استخدام وحدات قياس مرتبطة بإطار العرض أو الحاوية بمفردها في font-size يؤدي دائمًا إلى إزعاج المستخدم. عندما يكون font-size متوافقًا تمامًا مع الحاوية، لا يمكن أن يكون متوافقًا أيضًا مع الإعدادات التلقائية أو التعديلات التي يجريها المستخدم. حتى مع أفضل النوايا والضمانات، يجب تجنُّب سلب المستخدمين font-size نهائيًا. وهذا لا يؤدي إلى ترك انطباع سيئ لدى المستخدم فحسب، بل يمكن أن يخالف أيضًا إرشادات تسهيل الاستخدام التي غالبًا ما يفرضها القانون. على وجه التحديد، يتطلّب البند 1.4.4 من إرشادات تسهيل استخدام محتوى الويب أنّه "يمكن تغيير حجم النص بدون استخدام تكنولوجيا مساعدة بنسبة تصل إلى 200%".

كيفية التأكّد من أنّ قيم font-size تستجيب للتكبير/التصغير

لضمان استجابة font-size المرتبط بإطار العرض للتكبير، يجب تطبيق القيمة المرتبطة بإطار العرض كتعديل على قيمة أخرى. يمكن إجراء ذلك في CSS باستخدام الدالة calc() أو أي دالة رياضية أخرى تقبل العمليات الحسابية، مثل min() وmax() وclamp(). تستند قيمة font-size البالغة calc(16px + 1vw) إلى حجم إطار العرض، بالإضافة إلى الحجم الحالي (المرتبط بالتكبير) لوحدة البكسل. في حين أنّ وحدة vw لن تتأثر بالتكبير، ستتأثر القيمة الأساسية.

والنتيجة هي font-size يستجيب لحجم إطار العرض وإعدادات التكبير/التصغير لدى المستخدم. إذا قام المستخدم بتكبير 200%، سيتم عرض القيمة الأساسية بحجم أكبر مرتين (32px)، بينما ستبقى القيمة المتجاوبة بدون تغيير. سيمنحك إطار العرض 1000px في البداية font-size يبلغ 16px + 10px = 26px، ولكن عند التكبير بمقدار 200%، لن يزداد حجم الخط إلا إلى 42px، أي أكثر بقليل من 160%. قد لا تبدو هذه مشكلة كبيرة، ولكن كلما كان font-size يستند إلى إطار العرض، كلما أصبحت ميزة التكبير والتصغير أقل فعالية.

على الشاشات الصغيرة، سيأتي font-size بشكل أساسي من قيمة البكسل الأساسية، وسيتجاوب بشكل جيد مع التكبير. ولكن على الشاشات الأكبر حجمًا، يصبح حجم إطار العرض جزءًا أكبر من حجم الخط المعروض، ما يجعل التكبير أقل فعالية. يصبح ذلك خطيرًا بشكل خاص عندما يتعذّر على التكبير بنسبة% 500 (الحد الأقصى في معظم المتصفحات) توفير الزيادة بنسبة% 200 في حجم الخط المطلوب بموجب معيار WCAG 1.4.4، ولكن حتى قبل ذلك، قد يكون من المحبط أن يصبح التكبير غير فعّال.

في الحافة اليسرى للرسم البياني (عرض 0 لمنطقة العرض)، يكون التكبير/التصغير 500% فعّالاً تمامًا. ومع ذلك، تنخفض هذه الفعالية بسرعة مع زيادة حجم المتصفّح، وتصبح وحدات إطار العرض (غير القابلة للتكبير) عاملاً أكبر في font-size. عندما يكون عرض المتصفّح 2040px، لا يمكن أن يؤدي التكبير بمقدار 500% إلى زيادة حجم الخط إلا بمقدار 200%. بعد هذه النقطة، لن يكون من الممكن تكبير الخط 200% بفعالية.

من خلال نقل هذه العملية الحسابية إلى دالة clamp()، مع الحدّين الأدنى والأقصى للقيم، يمكنك فرض حدود تضمن إمكانية تكبير النص. وفقًا لماكسويل بارفيان:

إذا كان الحد الأقصى لحجم الخط أقل من أو يساوي 2.5 مرة الحد الأدنى لحجم الخط، سيجتاز النص دائمًا معيار النجاح 1.4.4 من إرشادات WCAG، على الأقل على جميع المتصفحات الحديثة.

بما أنّ طلبات البحث @media و@container تستند إلى القياسات نفسها التي تستند إليها الوحدات vw وcqw، ينطبق المنطق نفسه عند استخدام نقطة توقّف لتغيير حجم الخط. عندما تكون الزيادة في الحجم كبيرة جدًا، يصبح التكبير أو التصغير غير فعّال. يمكنك تجربة طريقة تفاعل هذه القيم في التمثيل المرئي التالي:

كيفية التأكّد من أنّ قيم font-size تستجيب للإعدادات التلقائية للمستخدم

ومع ذلك، لا يستجيب calc(16px + 1vw) لإعدادات الخط التلقائي للمستخدم. لتحقيق ذلك، يمكنك ضبط قيمة أساسية أو دنيا وقصوى باستخدام وحدات em أو rem بدلاً من px. عند وضع كل ذلك معًا، ستحصل على نتيجة مألوفة تتطابق مع العرض التوضيحي المرتبط:

html {
  font-size: clamp(1em, 17px + 0.24vw, 1.125em);
}

يُرجى ملاحظة ما يلي:

• يستخدم الحدّ الأدنى والحدّ الأقصى وحدات em، والتي تستند إلى إعدادات المستخدم المفضّلة (وتتجاوب مع التكبير).
• يتم الحفاظ على الحد الأدنى من قيمة vw الإضافية، حتى لا يتأثر التكبير بشكل كبير.
• الحجم الأقصى (1.125em) أقل بكثير من 2.5 مرة من الحد الأدنى (1em)، ما يضمن إمكانية تحقيق قيمة font-size فعالة تبلغ 200% دائمًا.

مقاييس أسلوب الخط مع pow()

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

• ‫xx-small: 3/5 (0.6)
• x-small: 3/4 (0.75)
• ‫small: 8/9 (0.89)
• ‫medium: 1 (المقاس الأساسي الذي يتم ضرب المقاسات الأخرى به)
• large: 6/5 (1.2)
• x-large: 3/2 (1.5)
• xx-large: 2/1 (2)
• xxx-large: 3/1 (3)

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

html {
  /* musical ratios */
  --minor-second: calc(16/15);
  --major-second: calc(9/8);
  --minor-third: calc(6/5);
  --major-third: calc(5/4);
  --perfect-fourth: calc(4/3);
  --augmented-fourth: sqrt(2);
  --perfect-fifth: calc(3/2);
  --major-sixth: calc(5/3);

  /* the golden ratio*/
  --golden-ratio: calc((1 + sqrt(5)) / 2);
}

ولكن، لا تحتاج إلى أدوات خارجية لإنشاء مقياسك الخاص في CSS، إذ يمكن للدالة الجديدة pow() إنشاء مقياسك نيابةً عنك، مع تحديد 1rem كحجم أساسي خاص بك.

html {
  /* choose a ratio */
  --scale: 1.2;

  /* generate the scale using pow() */
  --xx-small: calc(1rem * pow(var(--scale), -0.5));
  --x-small: calc(1rem * pow(var(--scale), -0.25));
  --small: calc(1rem * pow(var(--scale), -0.125));
  --medium: 1rem;
  --large: calc(1rem * pow(var(--scale), 1));
  --x-large: calc(1rem * pow(var(--scale), 2));
  --xx-large: calc(1rem * pow(var(--scale), 3));
  --xxx-large: calc(1rem * pow(var(--scale), 4));

  /* change the ratio for different viewport sizes */
  @media (width > 50em) {
    --scale: var(--perfect-fourth);
  }
}

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

تتيح وظائف وعناصر CSS القابلة لإعادة الاستخدام تكثيف هذه المنطقية بشكل أكبر، بينما تسهّل الأدوات المضمّنة الأخرى، مثل progress()، إنشاء مقاييس تتكيّف بسلاسة من قيمة إلى أخرى. ولكنّ هذه الميزات لا تنطبق على هذا العرض التوضيحي.

الاستجابة لحجم الحاويات داخل الصفحة

يمكنك إجراء كل هذه العمليات الحسابية في طلبات البحث عن الحاويات باستخدام الوحدة cqi بدلاً من vw أو vi، ولكن من المفيد أيضًا ترك font-size الخاص بالمستخدم في مكانه على العنصر html، حتى تتمكّن كل حاوية من إعداد النوع من الرجوع إلى إعدادات المستخدم المفضّلة هذه كـ 1rem. في العرض التوضيحي، ستجد أنّه يتم تطبيق مقياس الكتابة بالكامل على body بدلاً من العنصر الأساسي html للكتابة العامة، ثم تتم إعادة الضبط استنادًا إلى حجم الحاوية لكل عنصر يتضمّن السمة type-set.

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

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