Александр
Межстрочный интервал помогает читать абзац без пропусков и возвращений к одной строке. Для UX-дизайна это часть работы с читаемостью: интервал подбирают вместе с гарнитурой, размером шрифта и шириной текстового блока. Разберём, как настроить высоту строки для основного текста и заголовков.
Что такое межстрочный интервал
Источник: Linkedin
Интерлиньяж и высота строки
Интерлиньяж — расстояние между базовыми линиями соседних строк. В веб-вёрстке для управления высотой строки используют свойство line-height. Это не начертание шрифта и не выравнивание абзаца: жирность, курсив и расположение текста по левому или правому краю настраиваются отдельно.
От печатного набора к цифровой вёрстке
При металлическом наборе расстояние между строками увеличивали с помощью тонких полос. Отсюда английский термин leading. В цифровом макете тот же визуальный ритм задают числом: например, для шрифта 16 px высота строки 24 px соответствует коэффициенту 1,5.
Как подобрать высоту строки для сайта
Начните с размера основного текста
Выберите размер, при котором текст удобно читать на целевом устройстве. Для первого варианта можно попробовать 16–18 px, но решение зависит от гарнитуры и задачи. Добавьте реальный абзац, а не короткую строку-заглушку: длинный текст лучше показывает плотность набора.
Настройте заголовки отдельно
Заголовку из двух строк обычно нужен более плотный ритм, чем длинному абзацу. При этом выносные элементы букв не должны сталкиваться. Проверьте переносы в самом длинном заголовке, особенно на узком экране.
Учитывайте длину строки и роль текста
Широкий абзац требует отчётливого разделения строк: читателю нужно найти начало следующей. Короткой подписи может подойти другой интервал. Задайте отдельные текстовые стили для абзацев, подписей и заголовков, чтобы не подбирать значения заново на каждом экране.
Практические настройки межстрочного интервала
Используйте текстовые стили
В редакторе макетов задайте размер шрифта и высоту строки, затем сохраните их в общем стиле. При передаче в разработку укажите оба значения: одного размера шрифта недостаточно, чтобы воспроизвести высоту текстового блока.
Попробуйте коэффициент 1,5 для абзаца
Для основного текста можно начать с высоты строки 1,5 от размера шрифта. Например, 16 px и 24 px. Затем сравните соседние значения на реальном абзаце: текст не должен ни слипаться, ни распадаться на отдельные строки.
Смотрите на конкретную гарнитуру
Шрифты с одинаковым размером могут заметно различаться по высоте строчных букв и выносных элементов. Не назначайте интервал только по наличию засечек: оцените плотность набора, диакритические знаки и сочетания букв выбранной гарнитуры.
Проверяйте контраст отдельно от интервала
Увеличение расстояния между строками не исправит слабый контраст текста и фона. Сначала подберите читаемую цветовую пару, затем настройте ритм строк. На цветной подложке смотрите также на насыщенность шрифта и мелкие детали букв.
Избегайте столкновения строк в заголовке
Для крупного заголовка можно попробовать более плотную высоту строки, например 1,1. Проверьте каждую строку и символы с выносными элементами. Значение, подходящее одной гарнитуре, может обрезать или сблизить буквы другой.
Как сравнивать варианты на макете
Сохраните текст, шрифт, размер и ширину блока, меняя только высоту строки. Так будет видно, какое влияние оказывает именно интервал. Числа ниже показывают варианты для сравнения, а не универсальные нормы.
Пример 1. Основной текст
Плотный набор: строки трудно разделить взглядом
Вариант с малой высотой строки:
Высота строки 1,0 от размера шрифта
На что обратить внимание:
- Буквы соседних строк сближаются
- Сложнее найти начало следующей строки
- Длинный абзац выглядит перегруженным
Более свободный ритм абзаца
Вариант с увеличенной высотой строки:
Высота строки 1,5 от размера шрифта
Что сравнить с первым вариантом:
- Насколько отчётливо разделены строки
- Удобно ли переходить к следующей строке
- Сохраняется ли абзац как единый блок
Пример 2. Многострочный заголовок
Слишком большой интервал для этого заголовка
Вариант с разреженными строками:
Высота строки 1,8 от размера шрифта
Возможные проблемы:
- Строки выглядят отдельными заголовками
- Заголовок занимает неоправданно много места
Более плотный вариант заголовка
Вариант с меньшей высотой строки:
Высота строки 1,1 от размера шрифта
Что оценить:
- Воспринимаются ли строки как единый заголовок
- Не сталкиваются ли верхние и нижние элементы букв
- Отделён ли заголовок от следующего абзаца
Пример 3. Текст на цветном фоне
Начните с читаемости цветовой пары
Проверьте текст в итоговом размере:
Слабый контраст нельзя компенсировать интервалом
Возможные проблемы:
- Текст сливается с фоном
- Мелкие детали букв теряются
- Строки трудно проследить взглядом
Сочетайте контраст и удобный ритм строк
После выбора цветов сравните интервалы:
Оцените расстояние между строками на подложке
На что посмотреть:
- Различимы ли все символы
- Легко ли читать несколько строк подряд
- Сохраняется ли нужный акцент текста
Проверьте стили на нескольких экранах
Примените выбранные стили к статье, карточке и узкому мобильному экрану. Увеличьте текст и замените короткие подписи длинными. Если строки перекрываются или обрезаются, исправьте размеры контейнера и правила компоновки.
Сохраните настройки для команды
Запишите размер шрифта и высоту строки в текстовых стилях. Покажите разработчику пример длинного абзаца и многострочного заголовка: по ним легче проверить, что вёрстка сохраняет задуманный ритм.
