لطالما استعار تصميم الويب مبادئ وتعريفات من عالم التصميم الجرافيكي والطباعة. هذا صحيح بشكل خاص عندما يتعلق الأمر بطباعة الويب والطريقة التي نحصل بها على حروف على صفحات الويب الخاصة بنا. هذه المتوازيات ليست دائمًا ترجمات من 1 إلى 1 ، ولكن يمكنك بالتأكيد أن ترى أين تأثر أحد الانضباط في الآخر. وهذا واضح بشكل خاص عندما تفكر في العلاقة بين مصطلح الطباعة التقليدي "الرائد" و خاصية CSS المعروفة باسم "ارتفاع الخط".
الغرض من القيادة
عندما كان الناس يستخدمون يدويًا الحروف المعدنية أو الخشبية من أجل إنشاء الطباعة للصفحة المطبوعة ، تم وضع قطع رقيقة من الرصاص بين الخطوط الأفقية للنص من أجل إنشاء تباعد بين تلك الخطوط. إذا كنت ترغب في مساحة أكبر ، فستقوم بإدخال أجزاء أكبر من الرصاص. هذه هي الطريقة التي صاغ مصطلح "الرائدة". إذا نظرت إلى المصطلح "الرائد" في كتاب عن تصميم المطبوعات والمبادئ ، فستقرأ شيئًا لتأثير - "المسافة بين خطوط الأساس لخطوط الكتابة المتتالية".
الرائدة في تصميم الويب
في التصميم الرقمي ، لا يزال يستخدم المصطلح "باد" للإشارة إلى التباعد بين أسطر النص. تستخدم العديد من البرامج هذا المصطلح بالتحديد ، على الرغم من أنه من الواضح أن الرصاص الفعلي لا يستخدم في هذه البرامج. هذا مثال عظيم على الأشكال الجديدة لتصميم أفكار الاقتراض من الأفكار التقليدية ، على الرغم من أن التنفيذ الدقيق لهذا المبدأ قد تغير.
عندما يتعلق الأمر بتصميم الويب ، لا توجد خاصية CSS لـ "القيادة". بدلاً من ذلك ، تسمى خاصية CSS التي ستتعامل مع هذا العرض المرئي للنص خط الطول. إذا كنت تريد أن يكون للنص مساحة إضافية بين أسطر النص الأفقية ، فيمكنك استخدام هذه الخاصية. على سبيل المثال ، لنفترض أنك ترغب في زيادة ارتفاع السطر لجميع الفقرات داخل العنصر
سيكون هذا الآن 1.5 أضعاف ارتفاع الخط العادي ، استنادًا إلى حجم الخط الافتراضي للصفحة (والذي يكون عادةً 16 بكسل).
متى تستخدم خط الطول
كما هو مفصّل أعلاه ، يكون ارتفاع الخط مناسبًا لاستخدامه في تباعد أسطر النص في الفقرات أو كتل النص الأخرى. إذا كان هناك مسافة صغيرة جدًا بين السطور ، يمكن أن يصبح النص مختلطًا ويصعب قراءته على المشاهدين على موقعك. وبالمثل ، إذا كانت المسافات متباعدة جدًا على الصفحة ، فسيتم انقطاع التدفق العادي للقراءة وسيواجه القراء مشكلة في نصك لهذا السبب. هذا هو السبب في أنك تريد العثور على مقدار مناسب من تباعد خط الطول للاستخدام. يمكنك أيضًا اختبار تصميمك مع المستخدمين الفعليين للحصول على تعليقاتهم حول سهولة قراءة الصفحة .
عندما لا تستخدم خط الطول
لا تخلط بين ارتفاع الخط والحشو أو الهوامش التي ستستخدمها لإضافة مسافة بيضاء إلى تصميم صفحتك ، بما في ذلك أسفل العنوان أو الفقرات. هذا التباعد لا يؤدي ، وبالتالي لا يتم التعامل معه عن طريق ارتفاع الخط.
إذا كنت ترغب في إضافة مسافة ضمن عناصر نصية معينة ، فيمكنك استخدام الهوامش أو الحشو. بالعودة إلى مثال CSS السابق الذي استخدمناه ، يمكننا إضافة هذا:
main p {line-height: 1.5؛ الهامش السفلي: 24 بكسل ؛ } هذا ما يزال له ارتفاع خط 1.5 بين أسطر النص لفقرات صفحتنا (تلك الموجودة داخل العنصر
في جميع الحالات تقريبًا ، سيعرض ذلك نفس CSS السابق.
لنفترض أنك تريد إضافة تباعد أسفل عناصر القائمة التي كانت داخل قائمة بفئة "قائمة الخدمات" ، يمكنك استخدام الهوامش أو الحشو للقيام بذلك ، وليس ارتفاع الخط. لذلك سيكون هذا مناسبًا.
.services-menu li {