التسلسل الهرمي للخطوط: كيف تبني تسلسلاً يُقرأ فعلاً

معظم المقالات عن التسلسل الهرمي للخطوط تصفه بدلاً من أن تبنيه. تقول إن العناوين يجب أن تبدو مهمة وإن النص الأساسي يجب أن يبدو هادئاً. كلام عديم الفائدة حين يكون المطلوب: "اختر خمسة أحجام وثلاثة أوزان وتباعداً بين السطور يصمد في الصفحة الرئيسية ومقال ولوحة إعدادات". الوصف ليس نظاماً. النظام هو ما يُشحن.

هذه المقالة هي البناء نفسه. نسب حقيقية، أرقام حقيقية، ترتيب القرارات، وأنماط الفشل التي تقتل معظم التسلسلات قبل الإطلاق.

ما هو التسلسل الهرمي للخطوط فعلاً

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

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

المستويات الخمسة التي يحتاجها تقريباً كل نظام

معظم الأنظمة العاملة تستقر على خمسة مستويات: H1 وH2 وH3 والنص الأساسي والنص الصغير. الزيادة تصنع ضجيجاً. والنقصان يسطّح الصفحة.

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

اختر نسبة مقياس والتزم بها

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

الثالثة الكبرى (1.25). ضيقة وكثيفة. الأفضل لواجهات البيانات الكثيفة وأدوات الإدارة. من أساس 16px: 16، 20، 25، 31، 39، 49، 61. ظاهرة لكنها لا تكون دراماتيكية أبداً.

الرابعة التامة (1.333). حصان العمل. قوية بما يكفي للمحتوى التحريري ومتحفظة بما يكفي للمنتجات. من أساس 16px: 16، 21، 28، 37، 50، 67. الخيار الافتراضي لمعظم المواقع التسويقية.

النسبة الذهبية (1.618). تحريرية، تعبيرية، شبه مسرحية. الأفضل لصفحات الهبوط وتخطيطات المجلات. من أساس 16px: 16، 26، 42، 68، 110. الـH1 يتعالى على النص الأساسي، وهذا هو المقصود.

أدوات مثل type-scale.com تولّد الجدول لأي أساس ونسبة في ثانية. اختر واحدة، دوّن الأرقام، واشحن. التبديل في منتصف المشروع إعادة هيكلة تمس كل صفحة.

الوزن هو المحور الثاني وليس الأول

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

النظام العامل يحتاج ثلاثة أوزان. عادي للنص الأساسي، متوسط للتأكيد والتسميات، وعريض أو شبه عريض للعناوين. الوزن الرابع قرار علامة تجارية وليس متطلب نظام.

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

التباعد بين السطور هو الرافعة الصامتة للتسلسل

التباعد بين السطور هو المسافة العمودية بين السطور، من خط الأساس إلى خط الأساس. تسميه CSS بـline-height. وهو أكثر الروافع ظلماً في التسلسل الهرمي للخطوط.

التباعد الضيق في العنوان يبدو واثقاً وكثيفاً. التباعد الواسع في النص الأساسي يبدو هادئاً ومقروءاً. والعكس يقلب التسلسل. نص أساسي عند 1.2 يُقرأ كجدار. وعنوان 64px عند 1.6 يُقرأ كزينة.

القيم الافتراضية العاملة. العناوين (H1، H2): من 1.1 إلى 1.2. العناوين الفرعية (H3): من 1.2 إلى 1.3. النص الأساسي: من 1.5 إلى 1.7. التعليقات: من 1.4 إلى 1.5. النص الأكبر يحتاج تباعداً أقل، والأصغر يحتاج أكثر. المحتوى الطويل يحتاج تباعداً أكبر من الواجهات. لوحة تحكم عند 1.4 تبدو كثيفة، وهذا صحيح.

التباعد بين الحروف للعرض لا للنص الأساسي

الكيرننغ هو المسافة بين أزواج حروف محددة، ويُضبط عند مقياس الشعار أو العنوان. أما التباعد بين الحروف (tracking) فهو المسافة عبر كل الحروف في سطر، ويُضبط بانتظام. ليسا الرافعة نفسها.

التباعد بين الحروف أداة تسلسل فقط عند الأطراف. التباعد الضيق في عنوان كبير (من -0.02em إلى -0.04em) يجعله يبدو ثابتاً وحاسماً. التباعد الواسع في تسميات صغيرة بحروف كبيرة (من +0.05em إلى +0.1em) يجعل التسمية تبدو مقصودة. كلاهما يشير إلى دور الخط.

منطقة الخطر هي النص الأساسي. تغيير التباعد في النص الأساسي يضر بالقراءة دون أي فائدة للتسلسل. اتركه عند الصفر. أسرع علامة على مصمم لا يفهم التباعد هي عنوان رئيسي في الهيرو مضبوط على +0.1em لأنه "يبدو تحريرياً". لا يبدو كذلك. يبدو زينة.

المسافات بين المستويات جزء من التسلسل

المسافة العمودية حول كل مستوى ترتّبه بقدر ما يفعل الحجم والوزن. H2 بمسافة 80px فوقه و24px تحته يُقرأ كبداية قسم جديد. وH2 نفسه بمسافة 24px فوقه وتحته يُقرأ كفاصل فقرة.

القاعدة: المسافة فوق تساوي تقريباً ضعف المسافة تحت. العنصر ينتمي إلى المحتوى الذي تحته. المواصفات المبدئية: فوق H2: من 64 إلى 96px، تحت H2: من 16 إلى 24px. فوق H3: من 32 إلى 48px، تحت H3: من 8 إلى 16px. انضباط المساحة البيضاء بأهمية الخط نفسه. مقياس مثالي مع مسافات مهملة يُقرأ مسطحاً.

ترتيب القرارات لبناء تسلسل من الصفر

تخطَّ خطوة وسيبدو التسلسل جيداً بمعزل عن غيره لكنه ينهار داخل منتج حقيقي.

1. اختر الحجم الأساسي. 16px للشاشة. 18px للمواقع التحريرية الثقيلة. لا تنزل عن 16px للنص الأساسي أبداً.
2. اختر نسبة المقياس. الثالثة الكبرى للواجهات الكثيفة، الرابعة التامة للاستخدام العام، النسبة الذهبية للمحتوى التحريري.
3. ولّد جدول الأحجام. اشتق كل مستوى من النسبة. قرّب إلى بكسلات صحيحة. دوّنه.
4. اختر ثلاثة أوزان. عادي، متوسط، عريض أو شبه عريض. لا أكثر.
5. اضبط التباعد بين السطور لكل مستوى. ضيق للعناوين، واسع للنص الأساسي.
6. اضبط المسافات لكل مستوى. نسبة 2 إلى 1 بين الأعلى والأسفل في كل عنوان.
7. اضبط التباعد بين الحروف للأطراف فقط. ضيق للعرض، واسع للنص الصغير بحروف كبيرة. صفر للنص الأساسي.
8. تحقق على ثلاث شاشات حقيقية. هيرو صفحة رئيسية، مقال طويل، لوحة واجهة كثيفة. إن صمد في الثلاث فاشحنه.

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

أين تفشل معظم التسلسلات

ستة أنماط فشل تقتل تسلسلات أكثر من أي شيء آخر.

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

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

العنوان الفرعي العائم. مسافة متساوية فوقه وتحته تتركه لا ينتمي لأي قسم. قلّص المسافة تحته ليلتصق بالنص الذي يليه.

الـH1 الهارب. استخدام H1 هيرو سطح المكتب داخل كل صفحة محتوى يكسر الإيقاع. اضبط رمز H1 لسطح المكتب ورمز H1 لصفحات المحتوى. الاسم نفسه، قيمتان.

نص أساسي بحجم 14px. ما دون 16px يكسر القراءة ويعصر المستويات الأصغر في مدى 2px. 16px كحد أدنى. استخدم 13 إلى 14px للتعليقات والتسميات فقط.

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

التسلسل في ظروف 2026

الخطوط المتغيرة هي الخيار الافتراضي الصحيح الآن. ملف واحد بحجم 80KB يقدم العادي والمتوسط وشبه العريض والعريض من محور واحد. خطان متغيران يغطيان النظام كله. يشرح دليل اقتران الخطوط كيف تختارهما.

ملخصات الذكاء الاصطناعي تقرأ الوسوم الدلالية لا البصرية. صفحة فيها H1 ثم div منسّق ليبدو كـH2 ثم H3 تُحلَّل خطأً. يجب أن يتطابق التسلسل البصري مع HTML الدلالي. H1 واحد لكل صفحة، دون تخطي مستويات. يغطي شرح مبادئ تصميم الويب الجانب الدلالي.

قائمة تدقيق التسلسل

احفظها. شغّلها قبل الإطلاق. أي "لا" تُصلح قبل الشحن.

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

الأسئلة الشائعة

ما الفرق بين التسلسل البصري والتسلسل الهرمي للخطوط؟

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

ما أفضل نسبة لمقياس الخطوط؟

الرابعة التامة (1.333) هي الخيار الافتراضي الأكثر أماناً. تعطي تبايناً واضحاً دون أن تصبح مسرحية. استخدم الثالثة الكبرى (1.25) للواجهات الكثيفة وأدوات الإدارة. واستخدم النسبة الذهبية (1.618) للمحتوى التحريري وصفحات الهبوط حيث يجب أن يهيمن الهيرو.

كيف أصلح تسلسلاً يبدو مسطحاً؟

ثلاث خطوات بالترتيب. زد تباين الحجم أولاً. H1 على الأقل ضعف H2، وH2 على الأقل 1.5 ضعف النص الأساسي. أضف تباين الوزن ثانياً. لا مستويين متجاورين بالوزن نفسه. شدّ إيقاع المسافات ثالثاً بنسبة 2 إلى 1 بين الأعلى والأسفل في كل عنوان. إن بقيت الصفحة مسطحة، فالتخطيط يحمّل نفسه أكثر من اللازم ويحتاج قصاً في النطاق قبل أي عمل إضافي على الخطوط.

ابنِ التسلسل ثم ثق به

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

الفخ هو معاملة التسلسل كلمسة تلميع في الميل الأخير. هو العمود الفقري. ابنه أولاً، تحقق على شاشات حقيقية، وثّقه كرموز، ودع كل قرار آخر يُبنى عليه. إن أردت فريقاً يبني نظام الخطوط والتسلسل وواجهة المنتج كمشروع واحد بدل ثلاثة، وظّف Brainy. نختار النسبة، نكتب الرموز، ونشحن النظام على منتج حقيقي.