Межстрочный интервал: как подобрать высоту строки

Межстрочный интервал помогает читать абзац без пропусков и возвращений к одной строке. Для системы типографики интерфейса это часть работы с читаемостью: интервал подбирают вместе с гарнитурой, размером шрифта и шириной текстового блока. Разберём, как настроить высоту строки для основного текста и заголовков.

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

Источник: Linkedin

1. Интерлиньяж и высота строки

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

2. От печатного набора к цифровой вёрстке

При металлическом наборе расстояние между строками увеличивали с помощью тонких полос. Отсюда английский термин leading. В цифровом макете тот же визуальный ритм задают числом: например, для шрифта 16 px высота строки 24 px соответствует коэффициенту 1,5.

Как подобрать высоту строки для сайта

Попробуйте Pixso бесплатно

1. Начните с размера основного текста

Выберите размер, при котором текст удобно читать на целевом устройстве. Для первого варианта можно попробовать 16–18 px, но решение зависит от гарнитуры и задачи. Добавьте реальный абзац, а не короткую строку-заглушку: длинный текст лучше показывает плотность набора.

2. Настройте заголовки отдельно

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

3. Учитывайте длину строки и роль текста

Широкий абзац требует отчётливого разделения строк: читателю нужно найти начало следующей. Короткой подписи может подойти другой интервал. Задайте отдельные текстовые стили для абзацев, подписей и заголовков, чтобы не подбирать значения заново на каждом экране.

Практические настройки межстрочного интервала

1. Используйте текстовые стили

В редакторе макетов задайте размер шрифта и высоту строки, затем сохраните их в общем стиле. При передаче в разработку укажите оба значения: одного размера шрифта недостаточно, чтобы воспроизвести высоту текстового блока.

2. Попробуйте коэффициент 1,5 для абзаца

Для основного текста можно начать с высоты строки 1,5 от размера шрифта. Например, 16 px и 24 px. Затем сравните соседние значения на реальном абзаце: текст не должен ни слипаться, ни распадаться на отдельные строки.

3. Смотрите на конкретную гарнитуру

Шрифты с одинаковым размером могут заметно различаться по высоте строчных букв и выносных элементов. Не назначайте интервал только по наличию засечек: оцените плотность набора, диакритические знаки и сочетания букв выбранной гарнитуры.

4. Проверяйте контраст отдельно от интервала

Увеличение расстояния между строками не исправит слабый контраст текста и фона. Сначала подберите читаемую цветовую пару, затем настройте ритм строк. На цветной подложке смотрите также на насыщенность шрифта и мелкие детали букв.

5. Избегайте столкновения строк в заголовке

Для крупного заголовка можно попробовать более плотную высоту строки, например 1,1. Проверьте каждую строку и символы с выносными элементами. Значение, подходящее одной гарнитуре, может обрезать или сблизить буквы другой.

Как сравнивать варианты на макете

Сохраните текст, шрифт, размер и ширину блока, меняя только высоту строки. Так будет видно, какое влияние оказывает именно интервал. Числа ниже показывают варианты для сравнения, а не универсальные нормы.

Пример 1. Основной текст

Плотный набор: строки трудно разделить взглядом

Вариант с малой высотой строки:

Высота строки 1,0 от размера шрифта

На что обратить внимание:

1. Буквы соседних строк сближаются
2. Сложнее найти начало следующей строки
3. Длинный абзац выглядит перегруженным

Более свободный ритм абзаца

Вариант с увеличенной высотой строки:

Высота строки 1,5 от размера шрифта

Что сравнить с первым вариантом:

1. Насколько отчётливо разделены строки
2. Удобно ли переходить к следующей строке
3. Сохраняется ли абзац как единый блок

Пример 2. Многострочный заголовок

Слишком большой интервал для этого заголовка

Вариант с разреженными строками:

Высота строки 1,8 от размера шрифта

Возможные проблемы:

1. Строки выглядят отдельными заголовками
2. Заголовок занимает неоправданно много места

Более плотный вариант заголовка

Вариант с меньшей высотой строки:

Высота строки 1,1 от размера шрифта

Что оценить:

1. Воспринимаются ли строки как единый заголовок
2. Не сталкиваются ли верхние и нижние элементы букв
3. Отделён ли заголовок от следующего абзаца

Пример 3. Текст на цветном фоне

Начните с читаемости цветовой пары

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

Слабый контраст нельзя компенсировать интервалом

Возможные проблемы:

1. Текст сливается с фоном
2. Мелкие детали букв теряются
3. Строки трудно проследить взглядом

Сочетайте контраст и удобный ритм строк

После выбора цветов сравните интервалы:

Оцените расстояние между строками на подложке

На что посмотреть:

1. Различимы ли все символы
2. Легко ли читать несколько строк подряд
3. Сохраняется ли нужный акцент текста

Проверьте стили на нескольких экранах

Примените выбранные стили к статье, карточке и узкому мобильному экрану. Увеличьте текст и замените короткие подписи длинными. Если строки перекрываются или обрезаются, исправьте размеры контейнера и правила компоновки.

Один абзац, три варианта: сравнение в Pixso

Возьмите описание доставки: «Заказ будет готов к выдаче после подтверждения оплаты. Мы пришлём уведомление, когда его можно будет забрать». Создайте три одинаковых текстовых блока шириной 320 px с кеглем 16 px. Сохраните одну гарнитуру и одно начертание, меняя только высоту строки: 20, 24 и 28 px.

Сравните варианты при масштабе 100%, затем вставьте выбранный блок в реальную карточку. В изоляции интервал может казаться удобным, но рядом с заголовком и кнопкой потребуется другое расстояние между абзацами. Не исправляйте расстояние между блоками изменением высоты строки: это разные параметры.

Для кириллицы используйте слова с верхними и нижними элементами: «доступ», «ещё», «йогурт», а также цифры и знаки валюты, если они встречаются в продукте. При смене гарнитуры повторите сравнение: одинаковые значения 16/24 не обеспечивают одинаковой визуальной плотности.

Когда увеличение интервала ломает карточку

Если последняя строка скрывается под кнопкой, сначала проверьте фиксированную высоту текстового блока и родительской карточки. Дайте тексту занимать нужную высоту, а соседним элементам — смещаться. Не уменьшайте кегль только ради сохранения прежней высоты: так исчезает симптом в одном макете, но остаётся проблема при переводе или увеличении текста.

У критерия WCAG 1.4.12 (на английском) другая задача: содержимое и функции не должны теряться, если пользователь увеличит высоту строки до 1,5, интервал после абзаца до двух размеров шрифта, расстояние между буквами до 0,12 и между словами до 0,16 размера шрифта. Это не требование изначально оформлять каждый текст именно так. Макет помогает найти риск, а устойчивость к пользовательским настройкам проверяется в готовой веб-странице.

Сохраните настройки для команды

Запишите размер шрифта и высоту строки в текстовых стилях. Покажите разработчику пример длинного абзаца и многострочного заголовка: по ним легче проверить, что вёрстка сохраняет задуманный ритм.

Попробуйте Pixso бесплатно