Уеб дизайнът винаги е заимствал принципи и дефиниции от света на графичния и печатния дизайн. Това е особено вярно, когато става въпрос за уеб типография и начина, по който получаваме форма на писмо в нашите уеб страници. Тези паралели не винаги са от 1 до 1 превод, но със сигурност можете да видите къде една дисциплина е повлияла на другата. Това е особено очевидно, когато разгледате връзката между традиционния типографски термин "водещ" и CSS собствеността, известни като "височина на линията".
Целта на водещия
Когато хората използваха ръчно метални или дървени букви, за да създадат типография за отпечатана страница, тънки парчета олово бяха поставени между хоризонтални линии на текст, за да се създаде разстояние между тези линии. Ако искате по-голямо пространство, ще вмъкнете по-големи парчета олово. По този начин се използва терминът "водещ". Ако погледнете термина "водещ" в книга за типографския дизайн и принципите, той ще прочете нещо, което се дължи на "разстоянието между базовите линии на последователни линии от типа".
Водещ в уеб дизайна
В цифровия дизайн водещият термин все още се използва за отразяване на разстоянието между редовете на текста. Много програми използват този точен термин, въпреки че очевидно оловото очевидно не се използва в тези програми. Това е чудесен пример за нови форми на дизайн, които заемат идеи от традиционните, въпреки че точното прилагане на този принцип се е променило.
Когато става въпрос за уеб дизайн, няма собственост на CSS за "водещ". Вместо това собствеността на CSS, която ще се справи с този визуален дисплей на текста, се нарича височина на линията. Ако искате текстът ви да има допълнително пространство между хоризонталните линии на текста, ще използвате това свойство. Например, да речем, че искате да увеличите височината на реда за всички параграфи в елемента
Това сега е 1,5 пъти нормалната височина на линията, въз основа на стандартния размер на шрифта на страницата (което обикновено е 16px).
Кога да използвате височина на линията
Както е описано по-горе, височината на линията е подходяща да се използва за разполагане на линиите от текстове в параграфи или други блокове от текст. Ако има малко пространство между линиите, текстът може да се обърка и да се чете трудно за зрителите в сайта ви. По същия начин, ако линиите са разположени твърде отдалечено на страницата, нормалният поток от четене ще бъде прекъснат и читателите ще имат проблеми с текста ви по тази причина. Ето защо искате да намерите подходящото разстояние между редовете и височината, които да използвате. Можете също така да тествате дизайна си с действителните потребители, за да получите обратна информация относно четливостта на страницата .
Когато не използвайте височина на линията
Не бъркайте височината на линиите с подложките или полетата, които бихте използвали, за да добавите междинно пространство към дизайна на вашата страница, включително под заглавието или параграфите. Това разстояние не е водещо и следователно не се обработва с височина на линията.
Ако искате да добавите интервал под определени текстови елементи, бихте използвали полета или подложка. Връщайки се към предишния пример за CSS, който използвахме, бихме могли да добавим следното:
основна p {линия-височина: 1.5; долна граница: 24px; } Това все пак ще има височината от 1,5 линии между редовете на текста за параграфите на нашата страница (тези в елемента
В почти всички случаи това ще се покаже същото като предишния CSS.
Да речем, че искате да добавите разстояние под елементите от списъка, които са били в списък с клас "services-menu", бихте използвали полета или подложка, за да направите това, НЕ височината на редовете. Така че това би било подходящо.
.services-менюто li {