NLLO.RU

Межстрочный интервал — это расстояние между строками текста, которое помогает улучшить читаемость контента. В CSS управление межстрочным интервалом осуществляется с помощью свойства line-height. В этой статье вы узнаете, как настроить межстрочные интервалы, а также получите примеры использования.

Свойство line-height в CSS

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

• Число: множитель от текущего размера шрифта. Например, line-height: 1.5; означает, что высота строки будет на 50% больше размера шрифта.
• Проценты: задают высоту строки относительно размера шрифта. Например, line-height: 150%;.
• Фиксированное значение: высота строки задаётся в пикселях, например, line-height: 20px;.

Пример базового использования

Вот пример текста с разными межстрочными интервалами:

<style>
p {
  font-size: 16px;
}

.line-default {
  line-height: normal; /* По умолчанию */
}

.line-multiplier {
  line-height: 1.5; /* Межстрочный интервал в полтора раза больше шрифта */
}

.line-fixed {
  line-height: 24px; /* Фиксированное значение в пикселях */
}
</style>

<p class="line-default">Это пример текста с обычным межстрочным интервалом (normal).</p>
<p class="line-multiplier">Это пример текста с межстрочным интервалом, увеличенным в 1.5 раза.</p>
<p class="line-fixed">Это пример текста с фиксированным межстрочным интервалом в 24 пикселя.</p>

Советы по настройке межстрочных интервалов

Межстрочный интервал зависит от типа контента и размера шрифта. Вот несколько рекомендаций:

• Для основного текста используйте line-height в диапазоне от 1.4 до 1.6, чтобы обеспечить хорошую читаемость.
• Для заголовков интервал может быть меньше, например, line-height: 1.2;.
• Для крупных шрифтов, таких как 24px и больше, используйте большее значение интервала, чтобы текст не выглядел «сбитым».

Пример с заголовками и текстом

Настройка межстрочного интервала для заголовков и абзацев:

<style>
h1, h2, h3 {
  line-height: 1.2; /* Более плотный текст */
}

p {
  line-height: 1.6; /* Лёгкость для основного текста */
}
</style>

<h1>Заголовок с межстрочным интервалом 1.2</h1>
<p>Это текст с межстрочным интервалом 1.6, который делает его удобным для чтения.</p>

Использование в адаптивном дизайне

Для адаптивного дизайна можно использовать относительные единицы (число или проценты), чтобы межстрочный интервал автоматически подстраивался под размер шрифта:

<style>
body {
  font-size: 16px;
  line-height: 1.5; /* Автоматическая настройка интервала */
}

@media (max-width: 600px) {
  body {
	font-size: 14px;
	line-height: 1.4; /* Чуть меньшее значение для мобильных устройств */
  }
}
</style>

Когда использовать фиксированные значения?

Фиксированные значения полезны, когда текст должен чётко соответствовать дизайну, например, в кнопках, логотипах или заголовках:

<style>
button {
  font-size: 16px;
  line-height: 20px; /* Жёсткое значение */
  padding: 10px;
}
</style>

<button>Пример кнопки</button>

Заключение

Межстрочный интервал — это важная часть типографики, которая значительно влияет на читаемость текста. Используйте line-height, чтобы настроить текст для разных типов контента, и экспериментируйте с единицами измерения для достижения лучшего результата.