Читаемость: длина строки, межстрочный интервал, fluid type

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

«Читаемость — это вежливость по отношению к читателю».

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

Цифры, которые надо знать

Длину строки удобно ограничивать единицей ch (ширина символа):

.prose {
  max-width: 65ch;     /* ~65 знаков в строке */
  line-height: 1.6;
  font-size: 1.125rem; /* 18px */
}
.prose h2 { line-height: 1.2; }

Fluid type через clamp()

Раньше размер заголовка меняли брейкпоинтами: на мобильном 28px, на десктопе 40px — ступеньками. Функция clamp(min, идеал, max) делает это плавно, без единого медиазапроса: размер растёт вместе с шириной экрана, но не падает ниже минимума и не превышает максимум.

h1 {
  /* мин 1.75rem, тянется с 4vw, макс 3rem */
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.15;
}

  CLAMP: ПЛАВНЫЙ РАЗМЕР
  ---------------------
  ширина:  360 ----- 768 ----- 1440
  размер:  28 ------- 36 ------- 48  (без ступенек)
           |min|              |max|
  растёт линейно между границами

Разбор глубже: три рычага читаемости и плавность

Читаемость держится на трёх взаимосвязанных параметрах, и важно, что они работают вместе, а не по отдельности. Длина строки и межстрочный интервал связаны: чем длиннее строка, тем больше интерлиньяж нужен, чтобы глаз не «перепрыгивал» на соседнюю строку при возврате к началу. Узкая колонка с большим line-height выглядит разреженной; широкая колонка с маленьким — сливается в кашу. Поэтому опытный типограф настраивает их в паре, а не выставляет каждый «по умолчанию». Ограничение ширины через единицу ch (примерно ширина символа) удобно тем, что напрямую считает знаки в строке — целевой диапазон 45–75.

Размер основного текста — параметр, который часто занижают из «эстетских» соображений: 13–14px кажутся «изящнее». Но текст существует, чтобы его читали, а не любовались издалека. На реальных устройствах, при дневном свете, у людей с неидеальным зрением (а это огромная доля аудитории) мелкий текст превращается в препятствие. 16px — это разумный минимум для основного текста, и он же является типичным дефолтом браузера не случайно. Жертвовать читаемостью ради «воздушности» — частая, но дорогая ошибка.

Функция clamp() — это переход от «лестничной» адаптивности к плавной. Раньше размер заголовка меняли ступенями на брейкпоинтах: до 768px — 28px, после — 40px, и в момент перехода размер скачком прыгал. Это работало, но выглядело грубовато и требовало несколько медиазапросов на каждый заголовок. clamp(минимум, идеал-на-vw, максимум) делает размер текучим: он плавно растёт вместе с шириной экрана между двумя границами и нигде не вылезает за пределы. Один объявленный размер заменяет три-четыре медиазапроса и ведёт себя корректно на любой промежуточной ширине, а не только в заранее заданных точках.

Нельзя забывать и про выравнивание текста. Длинные блоки основного текста почти всегда выравнивают по левому краю (для письменностей слева направо): рваный правый край даёт глазу опору и ритм. Выравнивание по ширине (justify) в вебе коварно — без хорошей расстановки переносов оно растягивает пробелы и образует «реки» белого, рвущие чтение. Центрирование годится для коротких заголовков и подписей, но не для абзацев: каждая строка начинается с разной точки, и глазу тяжело находить начало. Эти мелочи незаметны по отдельности, но в сумме определяют, льётся текст или спотыкается.

Как делают ПЛОХО

Текст во всю ширину экрана — строки по 150 знаков, глаз теряется. line-height 1.0, строки слипаются. Body 13px — приходится приближать. Заголовок фиксированных 48px вылезает за экран телефона.

Как делают ХОРОШО

Ширина текстового блока ≈ 65ch. line-height 1.5–1.6 для текста и меньше для заголовков. Body 16–18px. Заголовки на clamp() — плавно адаптируются без брейкпоинтов и нигде не вылезают.

Чек-лист

• Длина строки 45–75 знаков (max-width в ch).
• line-height текста 1.5–1.6, заголовков меньше.
• Body не мельче 16px.
• Адаптивные размеры через clamp(), а не лесенкой брейкпоинтов.

Итог. Читаемость держится на трёх настройках: длина строки, интерлиньяж, размер. А clamp() делает типографику плавно адаптивной без медиазапросов.