بناء سلّم الخطوط

01لماذا نستخدم سلّمًا

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

كما يسرّع السلّم تسليم العمل للمطورين، إذ يتسلمون عددًا قليلًا من الأنماط المسماة بدل عشرات القيم المنفردة.

02اختر حجمًا أساسيًا ونسبة

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

مثال بحجم أساسي 16 بكسل ونسبة 1.25، مع التقريب إلى أعداد صحيحة:

• النص الأساسي: 16 بكسل
• الدرجة 1: 16 × 1.25 = 20 بكسل
• الدرجة 2: 20 × 1.25 = 25 بكسل
• الدرجة 3: 25 × 1.25 ≈ 31 بكسل
• الدرجة 4: 31.25 × 1.25 ≈ 39 بكسل

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

03اضبط ارتفاع السطر لكل حجم

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

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

04أحجام متجاوبة وسماكة وتسمية

العناوين الكبيرة التي تناسب الحاسوب قد تفيض على الهاتف. تتيح الدالة <code>;clamp()</code>; في CSS أن ينمو الحجم بسلاسة بين حد أدنى وحد أقصى:

مثال: يتغير حجم الخط تدريجيًا مع عرض الشاشة، لكنه لا ينخفض عن الحد الأدنى ولا يتجاوز الحد الأقصى الموضّحين في هذه القيمة: <code>;clamp(1.75rem, 1.2rem + 2vw, 2.5rem)</code>;

السماكة محور ثانٍ. استخدم سماكتين أو ثلاثًا، مثل العادي والمتوسط والعريض، لتعمل مع الحجم دون الحاجة إلى أحجام إضافية كثيرة.

1. اختر حجم النص الأساسي والنسبة.
2. أنشئ خمسة إلى سبعة أحجام وقرّبها.
3. خصّص ارتفاع سطر لكل حجم.
4. سمِّ الأنماط حسب دورها، مثل العنوان والتعليق.
5. طبّق clamp() على أكبر الأحجام.

بعد تحديد الأحجام، أعطها أسماء تصف وظيفتها لا قيمتها بالبكسل. تبقى أسماء مثل العرض والعنوان الأول والعنوان الثاني والنص والنص الصغير والتعليق صالحة عند تغيّر الحجم، أما اسم مثل 25px-bold فلا يصلح.

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

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

05المصادر

• MDN Web Docs. clamp() - CSS: Cascading Style Sheets. https://developer.mozilla.org/en-US/docs/Web/CSS/clamp