Типографика сайта: размер, интервал, длина строки
Читатель не замечает хорошую типографику, но сразу устаёт от плохой. Пять настроек делают текст на сайте удобным, и их легко поставить в CSS.
1. Размер текста
Основной текст не меньше 16 пикселей, лучше 17–18 на компьютере. Мелкий текст на телефоне заставляет увеличивать страницу. Подписи и примечания можно делать на 2–3 пикселя меньше, но не мельче 13.
2. Длина строки
Удобно читать строки длиной примерно 45–75 символов. Слишком короткие строки рвут фразу, слишком длинные теряют глаз при переходе на следующую. В CSS ограничьте ширину текста: max-width: 68ch (ch это ширина цифры 0 в текущем шрифте).
3. Межстрочный интервал
Для основного текста line-height от 1,5 до 1,7. Заголовкам нужен меньший интервал, 1,1–1,25, иначе двухстрочный заголовок разваливается на две отдельные фразы.
4. Выравнивание
Выравнивайте текст по левому краю. Выравнивание по ширине на сайте даёт неровные пробелы между словами, особенно на телефоне, потому что браузер переносит слова хуже, чем вёрстка в журнале. По центру можно ставить только короткие заголовки и подписи.
5. Отступы между абзацами и заголовками
Расстояние после абзаца примерно равно одной строке. Отступ над заголовком делайте больше, чем под ним: тогда видно, что заголовок относится к тексту ниже. Подробнее про отступы в статье «Сетка и отступы».
Готовые значения
body { font-size: 18px; line-height: 1.6; }
p, li { max-width: 68ch; }
h1, h2, h3 { line-height: 1.2; margin: 1.6em 0 .5em; }Шрифт для текста поможет выбрать статья «Как выбрать шрифт для сайта», пары для заголовков «Сочетание шрифтов».
Частые вопросы
Какой размер шрифта ставить на сайте?
Не меньше 16 пикселей для основного текста, лучше 17–18 на компьютере.
Какая длина строки удобна для чтения?
Примерно 45–75 символов. В CSS ширину текста удобно ограничить через max-width: 68ch.
Какой межстрочный интервал выбрать?
Для текста line-height от 1,5 до 1,7, для заголовков 1,1–1,25.
