Использование CSS-свойства line-height для улучшения читабельности текста

Использование CSS-свойства line-height для улучшения читабельности текста

От автора: в этой статье вы узнаете о свойстве CSS line-height и о том, как его использовать для создания приятного визуально, читаемого текста.

Возможно, вы уже раньше видели, как использовать высоту строки:

Но как это работает и какую роль играет в CSS?

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Типографские корни в CSS

Многие идеи в CSS были взяты из типографики. Одним примером является свойство CSS line-height, которое устанавливает расстояние между двумя базовыми линиями текста. «Базовая линия» — это воображаемая линия, на которой располагается текст.

Использование CSS-свойства line-height для улучшения читабельности текста

Например, если у нас есть короткий фрагмент текста внутри тега div:

Если вы измените размер окна браузера так, чтобы текст был перенесен на следующую строку, у вас будет две базовые линии и высота строки (обозначены желтыми стрелками):

Использование CSS-свойства line-height для улучшения читабельности текста

Большее значение свойства CSS line-height увеличит это расстояние, а меньшие — уменьшит его.

Высота строки и читаемость текста

Свойство line-height играет центральную роль в том, чтобы сделать текст читабельным для пользователей. Когда вы уменьшаете значение line-height, текст будет слишком плотным. Чтение такого текста в течение длительных периодов будет казаться утомительным для пользователя:

Использование CSS-свойства line-height для улучшения читабельности текста

Если оно слишком большое, пользователь будет испытывать затруднения в том, чтобы связать то, что он читает:

Использование CSS-свойства line-height для улучшения читабельности текста

Но когда вы найдете правильное значение line-height, ваш текст будет выглядеть просторным и гармоничным.

Использование CSS-свойства line-height для улучшения читабельности текста

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Выбор подходящего варианта line-height зависит от ваших потребностей, но также и от используемого семейства шрифтов. Каждый шрифт имеет свою индивидуальность и будет «читаться» по-разному в большом блоке текста.

Например, для Helvetica и Times New Roman потребуется разное расстояние line-height, даже если они оба имеют одинаковое значение font-size.

Синтаксис

Вы можете установить высоту строки с помощью всех доступных значений! Это свойство также совершенно отличается от других свойств CSS, поскольку может принимать как стандартные значения px и %, так свое уникальное значение «без единиц измерения»:

Высота строки обозначена желтой стрелкой.

Использование CSS-свойства line-height для улучшения читабельности текста

Как браузеры вычисляют высоту строки

Если вы используете процентное или «безразмерное» значение, в полученном line-height будет учтен размер шрифта. Например, оба фрагмента ниже будут вычисляться браузером, как 19.2px:

Однако, если вы используете такие значения «length», как px|em|rem|pt, font-size не будет использоваться для вычисления line-height:

Хотя процентные значения и значения «без единиц измерения» кажутся идентичными, между ними есть небольшие различия. Рекомендуется использование значений «без единиц измерения» когда это возможно.

Заключение

В целом, оптимальный диапазон значения line-height составляет от 1,5 до 1,7 для большинства шрифтов. Например, Alligator.io использует высоту строки 1,6. Это больше искусство, чем наука, и вы можете несколько раз открывать инструменты разработчика браузера, чтобы изменить line-height, пока он не покажется вам «просто правильным».

Чтобы узнать больше, ознакомьтесь с документацией MDN по line-height.

Автор: William Le

Источник: https://alligator.io

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: