Интерлиньяж (line height, leading) — что это такое и как правильно подобрать

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

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

Скриншот, показывающий пример интерлиньяжа.

Этот параметр встречается повсеместно — от классической полиграфии и книжной верстки до современного веб-дизайна, презентаций и пользовательских интерфейсов. Дизайнеры используют line-height в CSS, верстальщики задают его в типографских пунктах, а маркетологи корректируют межстрочный интервал в презентациях. Независимо от платформы и инструмента, владение этим базовым принципом типографики остается фундаментальным навыком для создания качественного визуального контента.

Почему интерлиньяж важен для удобочитаемости текста

Чтобы понять значимость межстрочного интервала, давайте разберемся, как наши глаза физически воспринимают текст. Когда мы читаем, наше периферическое зрение одновременно охватывает несколько строк — оно помогает нам ориентироваться в текстовом блоке и находить продолжение мысли на следующей строке. Центральное зрение фокусируется на конкретных словах, в то время как периферическое выполняет роль навигатора, удерживая общую картину текста. Эта координация работает безупречно лишь при условии правильно подобранного интерлиньяжа.

Что же происходит, когда межстрочный интервал выбран неверно? Последствия оказываются весьма ощутимыми:

• Слишком малый интервал — строки буквально слипаются друг с другом, превращая текст в плотную, нечитаемую массу. Периферическое зрение теряет способность четко различать границы строк, что приводит к постоянным «соскальзываниям» на соседние линии текста. Читатель начинает путаться, перечитывать одни и те же фрагменты, его глаза напрягаются, а усталость накапливается с каждым абзацем. Текстовый блок сливается воедино, становясь визуально тяжелым и отталкивающим.
• Слишком большой интервал — текст разваливается на отдельные, не связанные между собой строки. Глазам приходится буквально «прыгать» в поисках продолжения, что нарушает естественный ритм чтения и разрушает целостность восприятия текстового блока. Мозг затрачивает дополнительные усилия на то, чтобы связать разрозненные фрагменты в единое смысловое целое. Более того, такой подход неоправданно растягивает контент, создавая избыточное пространство и снижая информационную плотность страницы.

Как измеряется интерлиньяж в дизайне и верстке

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

Коэффициент, проценты, пункты и пиксели

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

• Коэффициент (например, 1,35) — безразмерная величина, показывающая отношение высоты строки к размеру шрифта. Именно этот формат чаще всего используется в CSS при задании свойства line-height.
• Проценты (например, 135%) — процентное выражение того же соотношения. Фактически это коэффициент, умноженный на 100. Такая запись распространена в текстовых процессорах и графических редакторах.
• Пункты или пиксели (например, 27 pt при кегле 20 pt) — абсолютное значение высоты строки в типографских единицах. Этот способ дает полный контроль над точным расстоянием между базовыми линиями.

Все эти меры взаимозаменяемы и легко конвертируются друг в друга. Коэффициент отличается от процентов только тем, что он в сто раз меньше: 1,35 = 135%. Чтобы получить коэффициент из абсолютного значения, достаточно разделить высоту строки на размер шрифта: 27 pt ÷ 20 pt = 1,35 (или 135%).

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

Для наглядности приведем практическую таблицу пересчета при кегле шрифта 16 пикселей:

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

Коэффициент, проценты, пункты и пиксели

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

• Коэффициент (например, 1,35) — безразмерная величина, показывающая отношение высоты строки к размеру шрифта. Именно этот формат чаще всего используется в CSS при задании свойства line-height.
• Проценты (например, 135%) — процентное выражение того же соотношения. Фактически это коэффициент, умноженный на 100. Такая запись распространена в текстовых процессорах и графических редакторах.
• Пункты или пиксели (например, 27 pt при кегле 20 pt) — абсолютное значение высоты строки в типографских единицах. Этот способ дает полный контроль над точным расстоянием между базовыми линиями.

Все эти меры взаимозаменяемы и легко конвертируются друг в друга. Коэффициент отличается от процентов только тем, что он в сто раз меньше: 1,35 = 135%. Чтобы получить коэффициент из абсолютного значения, достаточно разделить высоту строки на размер шрифта: 27 pt ÷ 20 pt = 1,35 (или 135%).

Для наглядности приведем практическую таблицу пересчета при кегле шрифта 16 пикселей:

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

Автоматический и ручной режим в редакторах

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

• Figma — задает line-height либо в процентах (например, 140%), либо в пикселях (24 px). По умолчанию используется режим «Auto», который применяет встроенные метрики шрифта. Параметр находится в правой панели свойств текста, в разделе «Type details».
• Adobe Photoshop — использует абсолютные значения в пунктах или пикселях. Интерлиньяж задается в панели «Character» (Окно → Символ), где можно выбрать как предустановленное значение «Auto» (обычно 120% от кегля), так и точное числовое значение.
• Adobe Illustrator] — работает аналогично Adobe Photoshop], предлагая настройку через панель «Character». Здесь также доступен автоматический режим и возможность задать интервал в пунктах, при этом программа визуально отображает базовые линии текста.
• Microsoft Word — предлагает наиболее понятный интерфейс для неспециалистов. В разделе «Абзац» (Формат → Абзац) можно выбрать междустрочный интервал из предустановленных значений (одинарный, 1,5, двойной) или задать точное значение в пунктах через опцию «Множитель» или «Точно».
• Google Docs — упрощает управление до минимума, предлагая коэффициенты (1,0; 1,15; 1,5; 2,0) в меню «Формат → Межстрочный интервал». Для точной настройки доступна опция «Другой интервал», где можно указать произвольное значение.

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

Как подобрать правильный интерлиньяж

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

Два базовых правила

Эти фундаментальные принципы помогут вам интуитивно определять правильный интерлиньяж даже без глубоких знаний типографики:

1. Длиннее строка — больше интервал

В узких текстовых блоках читатель легко удерживает в поле зрения переход на следующую строку — периферическое зрение справляется с этой задачей без усилий. Однако в длинных строках глазу требуется дополнительная визуальная поддержка, чтобы не потеряться при возврате к началу следующей строки. Увеличенный межстрочный интервал создает четкие «коридоры» для движения взгляда, предотвращая перескакивание на неправильную строку. Оптимальная длина строки для больших текстовых блоков составляет 40–60 символов (или 55–75 с учетом пробелов), и именно при таких параметрах стандартные значения интерлиньяжа работают наиболее эффективно.

2. Больше шрифт — меньше интервал

Этот принцип кажется контринтуитивным, но имеет четкое визуальное обоснование. Крупные заголовки с большим кеглем уже создают значительное вертикальное пространство за счет своего размера. Если применить к ним тот же коэффициент интерлиньяжа, что и к основному тексту (например, 150%), промежутки между строками станут непропорционально огромными, разрушая визуальную связность заголовка. Для заголовков используются меньшие значения (110–120%), в то время как для мелкого текста — подстрочников, сносок — интервал увеличивается до 140–160% для сохранения читаемости.

Уточняющие факторы

Базовые правила дают хорошую отправную точку, но для достижения профессионального результата необходимо учитывать дополнительные переменные:

• Длина строки — как мы уже отметили, оптимум находится в диапазоне 55–75 знаков с пробелами. При более коротких строках (30–40 символов) можно уменьшить интерлиньяж на 5–10%, при длинных (80+ символов) — увеличить на 10–15%.
• Кегль и тип текста — различные элементы типографской иерархии требуют индивидуального подхода. Основной текст, который читают последовательно, нуждается в комфортном интервале. Заголовки, воспринимаемые как цельные визуальные объекты, требуют более компактной верстки. Подписи и сноски, набранные мелким кеглем, нуждаются в увеличенном интервале для компенсации сложности восприятия.
• Тип шрифта — гарнитуры с засечками (serif) традиционно используются с чуть меньшим интерлиньяжем, так как засечки создают визуальные горизонтали, направляющие взгляд. Рубленые шрифты (sans-serif) обычно требуют немного большего интервала для сохранения четкости строк. Моноширинные шрифты, где каждый символ занимает одинаковую ширину, также выигрывают от увеличенного межстрочного пространства.
• Дизайн среды — контекст использования критически важен. Веб-страницы, которые читают с экрана, требуют более щедрого интерлиньяжа (140–160%) из-за особенностей восприятия светящегося текста и возможности прокрутки. Печатные материалы позволяют использовать более компактные значения (120–140%). Презентации, рассчитанные на восприятие с расстояния, нуждаются в крупном шрифте и умеренном интервале (120–130%), чтобы слайд не выглядел пустым.

Ориентировочные значения для разных типов текста:

• Основной текст (11–13 pt) → line-height 130–150%
• Заголовки первого уровня (24–48 pt) → line-height 110–120%
• Подзаголовки (16–20 pt) → line-height 120–130%
• Подписи и сноски (9–10 pt) → line-height 140–160%
• Веб-контент (14–18 px) → line-height 145–165%

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

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

Универсальный способ определения интерлиньяжа «на глаз»

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

Метод с буквой — представьте, что между двумя строками текста нужно мысленно разместить строчную букву «х» (высотой в x-height шрифта). Если буква помещается свободно, не касаясь выносных элементов соседних строк (верхних и нижних отростков букв), значит интерлиньяж подобран корректно. Если воображаемая буква «тонет» в тексте или, напротив, плавает в чрезмерном пространстве — интервал требует корректировки.

Этот метод работает благодаря тому, что наше визуальное восприятие естественным образом оценивает пропорции относительно основных элементов шрифта. X-height (высота строчных букв без выносных элементов) является базовой метрикой любой гарнитуры, и использование её как единицы измерения даёт интуитивно понятный результат.

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

Универсальный способ определения интерлиньяжа «на глаз»

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

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

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

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

Особые случаи и продвинутые приёмы

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

Вертикальная выключка строк

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

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

Однако важно понимать ограничения этой техники. Жёсткое следование базовой сетке может привести к неестественным промежуткам между заголовками и основным текстом, особенно когда размеры шрифтов существенно различаются. В таких случаях приходится идти на компромисс между математической точностью и визуальной гармонией. Веб-дизайн практически отказался от строгой вертикальной выключки в пользу более гибких подходов, учитывающих адаптивность и разнообразие устройств.

Отрицательный интерлиньяж

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

Классическое применение — крупные заголовки с короткими строками, особенно в рекламных материалах и плакатах. Когда заголовок состоит из двух-трёх коротких слов, расположенных в несколько строк, отрицательный интерлиньяж создаёт визуально плотный, компактный блок, который воспринимается как единый графический элемент. Например, при размере шрифта 72 pt можно установить line-height 60 pt, что даст коэффициент 0,83 — буквы будут практически касаться друг друга, создавая драматический визуальный эффект.

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

Адаптивный интерлиньяж в веб-дизайне

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

Когда мы задаём line-height в относительных единицах em или безразмерным коэффициентом (просто числом, например 1.5), интерлиньяж автоматически масштабируется пропорционально размеру шрифта. Это означает, что при изменении font-size на разных устройствах или при адаптивных брейкпоинтах соотношение между кеглем и межстрочным интервалом сохраняется. Например, если для основного текста задано font-size: 16px; line-height: 1.5;, то при увеличении шрифта до 20px на планшете интерлиньяж автоматически станет 30px, сохраняя пропорцию.

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

Единицы rem (relative to root em) вычисляются относительно корневого размера шрифта документа, что позволяет создавать согласованные типографские системы, где все элементы масштабируются пропорционально при изменении базового размера.

Типичные ошибки при подборе интерлиньяжа

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

1. Применение одинакового интервала ко всем уровням текста

Это, пожалуй, самая частая ошибка начинающих дизайнеров. Установив line-height 150% для основного текста, они автоматически применяют это же значение к заголовкам, подзаголовкам и подписям. В результате крупные заголовки выглядят разрозненно, словно строки не связаны между собой, а мелкие подписи, наоборот, кажутся слишком плотными. Каждый уровень типографской иерархии требует индивидуальной настройки интерлиньяжа в соответствии с его функцией и размером.

2. Игнорирование длины строки

Установка интерлиньяжа без учёта ширины текстового блока приводит к дисбалансу между горизонтальным и вертикальным ритмом. Короткие строки (20-30 символов) с большим межстрочным интервалом создают ощущение разорванности, текст превращается в набор отдельных фрагментов. Длинные строки (100+ символов) с малым интервалом заставляют читателя постоянно сбиваться при переходе на новую строку, что критически снижает скорость и комфортность чтения.

3. Слишком узкие колонки с большим интервалом

Эта ошибка особенно заметна в многоколоночных макетах. Когда дизайнер создаёт узкие колонки (например, для журнального разворота или сайта с боковой панелью) и при этом сохраняет щедрый интерлиньяж, характерный для широких текстовых блоков, визуальная структура нарушается. Текст начинает «прыгать», вертикальные промежутки становятся более заметными, чем сами строки, что разрушает целостность восприятия текстового блока.

4. Несогласованный интервал в адаптивном дизайне

В эпоху адаптивного веб-дизайна многие забывают корректировать интерлиньяж при изменении размеров экрана. Значение, идеально работающее на desktop (например, 24px при шрифте 16px), может оказаться избыточным на мобильных устройствах, где пространство ограничено и пользователь вынужден чаще прокручивать страницу. Профессиональный подход предполагает корректировку не только размера шрифта, но и межстрочного интервала на различных брейкпоинтах.

5. Игнорирование визуального ритма при сочетании с изображениями

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

Примеры и шаблоны интерлиньяжа в реальных проектах

Теория обретает смысл только в практическом применении. Рассмотрим конкретные примеры настройки интерлиньяжа для различных типов проектов, которые можно использовать как отправную точку для собственных разработок.

Пример веб-страницы (блог или статья)

• Основной текст: font-size 16 px → line-height 1.5 (24 px) или 150%
• Заголовок H1: font-size 42 px → line-height 1.15 (48 px) или 115%
• Заголовок H2: font-size 32 px → line-height 1.2 (38 px) или 120%
• Заголовок H3: font-size 24 px → line-height 1.3 (31 px) или 130%
• Цитаты: font-size 18 px → line-height 1.6 (29 px) или 160%
• Подписи к изображениям: font-size 14 px → line-height 1.45 (20 px) или 145%

Такая настройка обеспечивает комфортное чтение с экрана, где текст воспринимается в условиях подсветки дисплея. Увеличенный интерлиньяж для основного текста (150%) компенсирует длительное чтение, а заголовки с меньшим интервалом сохраняют визуальную компактность и привлекают внимание как цельные графические объекты.

Пример презентации (корпоративная или образовательная)

• Заголовок слайда: font-size 36 pt → line-height 1.1 (40 pt) или 110%
• Основные тезисы: font-size 24 pt → line-height 1.25 (30 pt) или 125%
• Дополнительный текст: font-size 18 pt → line-height 1.35 (24 pt) или 135%
• Подписи к графикам: font-size 14 pt → line-height 1.3 (18 pt) или 130%

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

Пример печатного буклета (информационный или рекламный)

• Основной текст: font-size 10–12 pt → line-height 13–16 pt (коэффициент 1.3–1.35 или 130–135%)
• Заголовки: font-size 18–24 pt → line-height 20–27 pt (коэффициент 1.1–1.15 или 110–115%)
• Врезки и цитаты: font-size 14 pt → line-height 19 pt (коэффициент 1.35 или 135%)
• Реквизиты и контакты: font-size 8–9 pt → line-height 12–13 pt (коэффициент 1.45–1.5 или 145–150%)

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

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

Заключение

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

Ключевые выводы, которые стоит запомнить:

• Интерлиньяж — ключевой параметр читаемости. Он влияет на то, насколько комфортно воспринимать текст и как быстро устают глаза.
• Оптимальные значения зависят от контекста. Тип шрифта, длина строки и формат (веб, печать, презентация) требуют разных настроек.
• Баланс между эстетикой и функциональностью — главный ориентир. Интервал должен быть незаметен, но обеспечивать плавное чтение.
• Визуальная проверка важнее формул. Даже при математически верных значениях окончательное решение принимается «на глаз».

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