ПаветтаКалькулятор межстрочного интервала
Межстрочный интервал сильнее других параметров влияет на то, читается текст или нет, и правильное значение зависит сразу от трёх вещей: размера шрифта, длины строки и назначения текста.
Параметры текста
Во всех единицах
Как это выглядит
Межстрочный интервал решает, дочитают текст или бросят на третьем абзаце. Слишком плотные строки склеиваются в серое пятно, слишком редкие рассыпаются на отдельные полоски, и глаз перестаёт видеть в них связный текст.
Правильное значение зависит не только от размера шрифта. Чем длиннее строка, тем больше работы делает глаз, возвращаясь к началу следующей, и тем сильнее ему нужна подсказка в виде воздуха между строками.
Шкала интервалов
| Множитель | В пикселях | В процентах | Строк на А4 | Для чего |
|---|
Три связанные величины
Калькулятор подбирает межстрочный интервал под размер шрифта и ширину колонки. Три величины связаны: чем длиннее строка, тем больше нужен интервал, иначе глаз при переходе на следующую строку теряет место.
Базовое правило для основного текста — интервал от полутора до одной целой шести десятых размера шрифта. Для шрифта в 16 пикселей это 24–26 пикселей. Заголовкам нужен меньший коэффициент, около одной целой двух десятых: крупные буквы и так далеко отстоят друг от друга.
Ширина колонки задаёт остальное. Комфортная строка содержит от 45 до 75 знаков вместе с пробелами, оптимум около 66. Более длинная строка требует интервала ближе к верхней границе, короткая обходится меньшим.
Инструмент показывает и модульную сетку: если интервал кратен базовой единице в 4 или 8 пикселей, отступы между блоками ложатся ровно и вертикальный ритм страницы не сбивается.
| Что | Значение |
|---|---|
| Основной текст | 1,5–1,6 |
| Заголовки | 1,1–1,3 |
| Длина строки | 45–75 знаков |
| Оптимум | ≈ 66 знаков |
| Базовая единица сетки | 4 или 8 px |
Свинцовые полоски и опыты Тинкера
Слово «интерлиньяж» происходит от французского «interligne» — между строк. В металлическом наборе интервал задавался буквально: между строками литер прокладывали свинцовые полоски нужной толщины, и от их размера зависело, насколько плотно стоит текст.
Отсюда и английское название «leading» — от «lead», свинец. Наборщик подбирал полоски вручную, и увеличение интервала стоило и денег, и веса формы, поэтому книги XIX века набирали плотно.
Исследования читаемости велись с двадцатых годов XX века. Работы Майлза Тинкера, обобщённые в книге 1963 года, показали, что скорость чтения падает и при слишком длинной, и при слишком короткой строке, а оптимум лежит в области шестидесяти знаков.
Отдельно на читаемость влияет и расстояние между словами. При выключке по формату браузер растягивает пробелы, и на узкой колонке появляются светлые прорехи, идущие сверху вниз через несколько строк, — наборщики называют их коридорами.
В вебе интервал задаётся свойством line-height, и его принято писать без единиц измерения. Число без единиц наследуется как множитель, а значение в пикселях наследуется буквально и ломает вёрстку вложенных блоков с другим кеглем.
Как подобрать и не сбить сетку
Введите размер шрифта и ширину колонки — калькулятор предложит интервал и покажет длину строки в знаках. Если знаков выходит больше восьмидесяти, сужайте колонку: увеличением интервала такую строку уже не спасти.
Отдельно выставляйте интервал для кода и таблиц. Моноширинный набор с интервалом полтора выглядит разреженным: строки кода коротки, и им хватает одной целой четырёх десятых, а строкам таблицы — и того меньше.
Для мобильных экранов берите интервал ближе к верхней границе. Строка там короткая, но читают с движущегося устройства и часто на ходу, и разреженный текст переносит это лучше.
Задавайте line-height числом без единиц. Значение вида 1,5 наследуется правильно, а «24px» на заголовке в 32 пикселя даст наложение строк.
Сверяйте с базовой сеткой. Интервал 24 пикселя при базе в 8 укладывается ровно в три единицы, а 25 — уже нет, и отступы блоков поедут на пиксель с каждым абзацем.
Отдельно проверьте списки и цитаты. У них интервал часто наследуется от родителя и оказывается великоват: перечисление с интервалом основного текста рассыпается, и его стоит поджать до одной целой четырёх десятых.
Подобрать размеры заголовков поможет калькулятор модульной шкалы, а адаптивный размер — калькулятор CSS clamp.
| Основной текст | 1,5–1,6 кегля |
| Заголовки | 1,1–1,3 |
| Длина строки | 45–75 знаков |
| Оптимум | ≈ 66 |
| Происхождение слова | свинцовые полоски |
| Работы Тинкера | 1963 |
| В вебе | line-height без единиц |
| База сетки | 4 или 8 px |
Что показывает расчёт
Межстрочный интервал сильнее других параметров влияет на то, читается текст или нет, и правильное значение зависит сразу от трёх вещей: размера шрифта, длины строки и назначения текста. Инструмент переводит line-height между всеми записями — безразмерным множителем, пикселями, em, процентами и пунктами — и рядом даёт рекомендацию под ваши цифры: чем длиннее строка, тем больше нужен интервал, иначе глаз теряет начало следующей. Живой абзац меняется вместе с настройками, а внизу считается, сколько строк и слов поместится на странице А4 — это нужно, когда текст поедет в документ на печать.
Как пользоваться
Инструмент переводит line-height между всеми записями — безразмерным множителем, пикселями, em, процентами и пунктами — и рядом даёт рекомендацию под ваши цифры: чем длиннее строка, тем больше нужен интервал, иначе глаз теряет начало следующей. Живой абзац меняется вместе с настройками, а внизу считается, сколько строк и слов поместится на странице А4 — это нужно, когда текст поедет в документ на печать.
- Интервал вводится в любой единице, остальные пересчитаются сразу.
- От неё зависит рекомендация: на длинной строке нужен больший интервал.
- Он набран вашими параметрами — так видно то, чего не видно в числах.
- Сколько строк и знаков поместится на странице при этих настройках.
Частые вопросы
В каких единицах задавать line-height
Безразмерным множителем: line-height: 1.5. Тогда интервал считается от размера шрифта самого элемента и наследуется правильно. Значение в em или процентах наследуется уже вычисленным: родитель с шрифтом 16px и line-height 150% передаст детям жёсткие 24 пикселя, и заголовок внутри получит слипшиеся строки.
Какой интервал считается нормальным
Для основного текста — от 1,4 до 1,7. Для заголовков меньше, от 1,05 до 1,25: крупные буквы и так далеко друг от друга, а большой интервал разваливает заголовок на отдельные строки. Для мелких подписей чуть больше, около 1,5, потому что мелкий текст читать труднее.
Как связаны длина строки и интервал
Прямо. Чем длиннее строка, тем труднее глазу вернуться к началу следующей, и тем больше нужен интервал. Комфортная длина — от 45 до 75 символов; при 90 и больше интервал приходится поднимать до 1,7–1,8, но правильнее сузить колонку.
Требует ли доступность определённого интервала
Да. По критерию WCAG 1.4.12 пользователь должен иметь возможность выставить межстрочный интервал минимум 1,5 без потери содержимого. Это значит, что вёрстка не должна ломаться при увеличении интервала: блоки фиксированной высоты с текстом внутри — прямое нарушение.
Почему первая строка стоит не там, где ожидалось
Интервал распределяется симметрично: разница между высотой строки и размером шрифта делится пополам и добавляется сверху и снизу. Поэтому у блока с большим интервалом сверху появляется пустое место, которого не заказывали. Убирают его отрицательным margin или свойством leading-trim там, где оно поддерживается.
Чем интервал в вёрстке отличается от интервала в Word
В текстовых редакторах «одинарный» интервал равен примерно 1,15–1,2 от размера шрифта, а «полуторный» — около 1,73. Ровных полутора там нет. Поэтому документ, свёрстанный по требованию «полуторный интервал», в CSS воспроизводится значением около 1,7. Пункты тоже другие: 1pt равен 1,333 пикселя.
Спросите нейросети об инструменте
Похожие инструменты
Размеры шрифта по одной пропорции: от малой терции до золотого сечения. Готовые переменные CSS и адаптивная шкала через clamp.
ОткрытьКалькулятор CSS clamp()Адаптивный размер по двум точкам без медиазапросов. С графиком роста и проверкой требования доступности о масштабировании.
ОткрытьСудокуГенератор 9 × 9 четырёх уровней и детских 4 × 4 и 6 × 6 с единственным решением, решение на экране с карандашом, проверкой и подсказками с объяснением, решатель своих судоку, печать четырёх на лист с ответами.
ОткрытьВеб-безопасные цветаТаблица 216 безопасных цветов с кодами HEX и RGB, поиск и подбор ближайшего безопасного цвета к любому вашему.
ОткрытьГенератор неоморфизмаМягкие тени от одного источника света: выпуклые и вдавленные элементы на CSS, с предупреждением о доступности.
ОткрытьПалитра flat-цветовГотовые палитры плоского дизайна: Flat UI и три ступени Material. Названия, коды, контраст текста и выгрузка в CSS.
ОткрытьЕщё генераторы
Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.