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

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

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

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

Может быть, вы уже ранее лицезрели, как применять высоту строчки:

CSS

1234p {  font-size: 16px;  line-height: 1.2;}

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

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

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

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

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

123<div>  The alligator went for a swim in the deep lagoon.</div>

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

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

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

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

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

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

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

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

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

READ
Svelte — рецепт успешного фреймворка?

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

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

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

Синтаксис

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

CSS

12345678910111213/* Use browser default. Typically “1.2” for all the major browsers */line-height: normal; /* Unitless (only line-height can do this!) */line-height: 1.2; /* <length> values like px, rem, em, pt */line-height: 3em; /* <percentage> values */line-height: 120%;

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

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

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

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

CSS

123456789.myText {  font-size: 16px;  line-height: 1.2  /* (19.2px = 16 x 1.2) */} .myText {  font-size: 16px;  line-height: 120%;  /* (19.2px = 16 x 1.2) */}

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

READ
Как создать простое полноэкранное слайд-шоу с помощью Vanilla JavaScript

CSS

1234.myText {  font-size: 16px;  line-height: 20px;  /* Always 20px! */}

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

Заключение

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

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

Создатель: William Le

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

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий