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