Кегль и межстрочный интервал: почему текст читается

Урок 10.1 · Интерфейсы и сайты с нуля · Модуль 10. Типографика и сетка: чтобы читалось везде · Бесплатно

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

Нужно знать заранее: Уроки 2.1 и 8.1

Объяснение

Зачем это нужно: Текст — это почти весь интерфейс. Кнопки и картинки замечают, но читают — текст. При этом «нечитаемый текст» почти никогда не про шрифт: чаще всего он про размер букв и расстояние между строками. Две настройки, font-size и line-height, меняют ощущение страницы сильнее, чем любой декор.

Как это работает: font-size — кегль, то есть размер букв. Основной текст на экране: 16–18 px. Меньше 14 px читается только при хорошем зрении и хорошем экране, поэтому мелкий размер оставляют подписям и служебным строкам. line-height — межстрочный интервал: расстояние между строками. Пишется без единиц измерения, как множитель кегля: line-height: 1.6 значит «в 1,6 раза больше размера букв». У браузера по умолчанию около 1.2 — для длинного текста это тесно. Крупный заголовок, наоборот, делают плотнее: line-height 1.1–1.2 и отрицательный letter-spacing (около -0.02em). На больших буквах обычные просветы выглядят как дырки, и заголовок рассыпается. Общее правило: чем длиннее строка, тем больше нужен интервал. Для строки в 45–75 знаков — 1.5–1.6, для короткой колонки — 1.4, для крупного заголовка — 1.1.

Психология: почему глаз видит одно: Читая, глаз не едет плавно: он делает короткие броски и остановки. На каждой остановке он захватывает несколько букв слева и справа от точки взгляда, а потом должен вернуться к началу следующей строки. Именно на возврате плотный интервал и ломает чтение: строки слипаются, и глаз цепляется не за ту. Поэтому интервал нужен не «для красоты», а для возврата. Второй эффект — разница размеров. 16 и 17 px не отличаются никак, 16 и 24 — отличаются сразу. Поэтому размеры берут ступенями, а не «на глаз».

Разбор по шагам: 1. Задайте основному тексту 16 px и line-height 1.6. 2. Подпись сделайте мельче — 13–14 px, но не светлее предела читаемости. 3. Заголовок страницы сделайте крупным: 32–40 px. 4. У заголовка уменьшите межстрочный интервал (1.1) и межбуквенное расстояние (-0.02em). 5. Отойдите на два шага от экрана: строки не должны слипаться в серое полотно.

Частая ошибка: Первая — оставить браузерные настройки: 16 px и 1.2, длинный абзац превращается в серую стену. Вторая — «исправить» это жирным шрифтом: жирность не увеличивает расстояние между строками. Третья — сделать заголовок плотным по интервалу и забыть про letter-spacing: крупные буквы при этом наползают друг на друга.

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

Итог: Читаемость — это две настройки: кегль и межстрочный интервал. Текст 16 px с интервалом 1.6 читается, тот же текст с 1.2 — нет.

Что дальше: Следующий шаг — ширина строки. Размер и интервал сделали текст читаемым, но если строка растянута на весь монитор, глаз всё равно теряет место при возврате. Об этом — урок 10.2.

h1 {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

p {
  font-size: 16px;
  line-height: 1.65;
}

Уроки модуля 10

• 10.1 Кегль и межстрочный интервал: почему текст читается — вы здесь (бесплатно)
• 10.2 Длина строки: почему 65 знаков читаются, а 150 — нет (по подписке)
• 10.3 Шкала: четыре размера вместо десяти (по подписке)
• 10.4 Сетка: колонки, которые держат страницу (по подписке)
• 10.5 Одна страница на телефоне и большом экране (по подписке)
• 10.6 Проект: страница, которую приятно читать (по подписке)