Веб-дизайн всегда заимствовал принципы и определения из мира графического и полиграфического дизайна. Это особенно верно, когда дело доходит до веб-типографики и способа, которым мы получаем буквы на наших веб-страницах. Эти параллели не всегда являются переводами 1: 1, но вы наверняка можете увидеть, где одна дисциплина повлияла на другую. Это особенно очевидно, когда вы рассматриваете связь между традиционным типографским термином «ведущий» и свойством CSS, известным как «высота строки».
Цель ведения
Когда люди использовали ручную работу над металлическими или деревянными буквами, чтобы создать типографику для печатной страницы, тонкие кусочки свинца помещались между горизонтальными строками текста, чтобы создать промежуток между этими строками. Если бы вы хотели больше места, вы бы вставили большие куски свинца Так появился термин «ведущий». Если бы вы посмотрели термин «ведущий» в книге о типографском дизайне и принципах, он бы прочел что-то вроде «расстояния между базовыми линиями последовательных линий типа».
Лидер в веб-дизайне
В цифровом дизайне термин «ведущий» по-прежнему используется для обозначения расстояния между строками текста. Многие программы используют этот точный термин, хотя фактическое руководство явно не используется в этих программах. Это отличный пример новых форм дизайна, позаимствовавших идеи у традиционных, хотя точная реализация этого принципа изменилась.
Когда дело доходит до веб-дизайна, не существует CSS-свойства для «лидерства». Вместо этого свойство CSS, которое будет обрабатывать это визуальное отображение текста, называется line-height. Если вы хотите, чтобы ваш текст имел дополнительное пространство между горизонтальными строками текста, вы должны использовать это свойство. Например, если вы хотите увеличить высоту строки для всех абзацев внутри элемента <main> вашего сайта , вы можете сделать это следующим образом:
main p {
line-height: 1.5;
}
Теперь это будет в 1,5 раза больше обычной высоты строки, исходя из размера шрифта страницы по умолчанию (который обычно составляет 16 пикселей).
Когда использовать Line-Height
Как подробно описано выше, высоту строки целесообразно использовать для размещения строк текста в абзацах или других блоках текста. Если между строками слишком мало места, текст может быть перепутан и труден для чтения посетителями вашего сайта. Точно так же, если строки расположены слишком далеко друг от друга на странице, нормальный процесс чтения будет прерван, и по этой причине у читателей возникнут проблемы с вашим текстом. Вот почему вы хотите найти подходящее количество межстрочного интервала для использования. Вы также можете проверить свой дизайн с реальными пользователями, чтобы узнать их мнение о читабельности страницы .
Когда не использовать Line-Height
Не путайте высоту строки с отступами или полями, которые вы бы использовали, чтобы добавить пробелы в дизайн вашей страницы, в том числе под заголовком или абзацами. Этот интервал не является ведущим, и поэтому он не обрабатывается высотой строки.
Если вы хотите добавить пространство под определенными текстовыми элементами, вы должны использовать поля или отступы. Возвращаясь к предыдущему примеру CSS, который мы использовали, мы могли бы добавить это:
main p {
line-height: 1.5;
нижнее поле: 24px;
}
Это все равно будет иметь 1,5-строчную высоту между строками текста для абзаца нашей страницы (те, что находятся внутри элемента <main>). Эти же абзацы также будут иметь 24 пикселя свободного пространства под каждым из них, что позволяет создавать визуальные разрывы, которые позволяют читателям легко идентифицировать один абзац из другого и облегчают чтение веб-сайта. Вы также можете использовать свойство padding вместо полей здесь:
main p {
line-height: 1.5;
отступ - 24px;
}
Почти во всех случаях это будет отображаться так же, как и в предыдущем CSS.
Скажем, вы хотите добавить интервал под элементами списка, которые были внутри списка с классом «services-menu», вы бы использовали для этого поля или отступы, а НЕ высоту строки. Так что это будет уместно.
.services-menu li {<
padding-bottom: 30px;
}
Вы бы использовали здесь только высоту строки, если бы вы хотели установить интервал текста внутри самих элементов списка, предполагая, что у них есть длинные отрезки текста, которые могут проходить до нескольких строк для каждой точки маркера.