Улучшение читаемости: межстрочный интервал и длина строки

Мы уже определили, что базовый размер шрифта для современного сайта — не менее 16px. Однако даже качественный шрифт станет нечитаемым, если превратить его в плотную «стену текста». Чтобы пользователь воспринимал информацию, а не просто смотрел на страницу, нужно настроить пространство вокруг букв.

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

Межстрочный интервал: воздух между строками

Межстрочный интервал (дизайнеры называют его «интерлиньяж») — это вертикальное расстояние между базовыми линиями соседних строк.

На сайтах десятилетней давности строки часто «слипались», из-за чего взгляд перескакивал через строчку или терял начало следующей. Сейчас стандартом считается свободная типографика.

В Figma этот параметр находится в панели свойств текста (иконка с вертикальной стрелкой). Вводите значение в процентах или множителях — так при изменении размера шрифта пропорции сохранятся автоматически.

Как интерлиньяж меняет восприятие, показано в Сравнении 1.

Длина строки: правило 75 символов

Читаемость текста зависит от того, какой путь проходит глаз слева направо. Если строка слишком длинная (например, растянута на весь экран монитора), пользователю трудно найти начало следующей строки. Это утомляет и заставляет закрыть страницу.

Оптимальная длина строки для десктопных версий — от 45 до 75 символов с пробелами. В веб-дизайне это обычно соответствует ширине текстового контейнера в 600–800px.

• Как было раньше: текст растягивали на 1920 пикселей. Читатель водит головой, как при просмотре теннисного матча, и быстро теряет нить.
• Как делать сейчас: текст ограничен узкой колонкой по центру. Взгляд двигается сверху вниз, почти не отклоняясь по горизонтали. Читать такой текст можно долго без усталости.

Практика в Figma

При обновлении старого сайта ваша задача — превратить хаотичные блоки в аккуратные колонки.

1. Выделите блок с основным текстом.
2. В поле Line Height (Межстрочный интервал) введите 150%.
3. Сузьте текстовый контейнер так, чтобы в одной строке помещалось 10–12 слов.
4. Посмотрите на макет издалека: текст должен выглядеть как ровное серое пятно средней плотности, а не как черная «зебра». 🦓

Нюансы верстки

В 2026 году важно учитывать темные темы и системное увеличение шрифта на смартфонах. Если задавать интерлиньяж в относительных единицах (процентах), верстка останется удобной в любом режиме.

Чего стоит избегать:

• Выравнивание по ширине (justify). В вебе оно создает «белые коридоры» — случайные дыры между словами, которые мешают чтению. Используйте только выравнивание по левому краю.
• Слишком большой интервал в заголовках. Для крупных шрифтов (H1, H2) межстрочный интервал можно уменьшить до 1.1–1.2. Крупные буквы имеют большой визуальный вес, и при стандартном интервале заголовок может «развалиться».

Мы научились делать текст удобным для больших экранов. Но что делать, если места совсем мало? В следующей теме разберем, почему современный дизайн начинается с мобильных устройств и как адаптировать наши правила под маленькие экраны. 📱