Типографическая шкала и ритм

Что это такое

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

Почему это важно

Если шкалы нет, размеры накапливаются: заголовок 18px здесь, 19px там — выбранные на глаз в моменте, они не сводятся друг с другом по мере роста продукта. Если нет единицы ритма, пространство над заголовком никак не связано с пространством под ним, и страница читается как нерегулярная даже тем, кто не может объяснить почему. И то и другое дёшево задать один раз и дорого приделать задним числом: каждый экран, построенный на случайных значениях, придётся пересматривать, когда шкала наконец появится.

Ключевые идеи

Задайте базовый размер, и пусть всё соотносится с ним

Базовый размер около одного rem и заголовки на расстоянии отношения дают небольшой набор шагов, который легко запомнить. Малые отношения (1.125) мягкие и подходят плотным интерфейсам, а крупные (1.333) сильно разделяют уровни и годятся для маркетинговых страниц. Отношение — решение дизайна, а согласованность им не является.

:root {
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }

Размеры в rem уважают настройку размера шрифта в браузере читателя, а размеры в пикселях — нет.

Интерлиньяж зависит от строки

Коротким строкам и крупному шрифту нужно меньше интерлиньяжа, чем длинным строкам и мелкому шрифту. Единый глобальный line-height поэтому всегда где-нибудь неверен. Рабочее правило: примерно 1.5 для основного текста, плотнее для крупных заголовков, и всегда без единиц измерения — тогда значение масштабируется вместе с размером шрифта.

body { line-height: 1.5; }
h1, h2 { line-height: 1.15; }

Ограничьте меру строки

Удобна строка длиной примерно от 45 до 75 символов. Дальше глаз теряет место при возврате. max-width в единицах ch следует за шрифтом, поэтому ограничение переживает изменение типографической шкалы.

Сводите отступы к одной единице

Страницу приводит в ритм базовая единица, кратны которой все поля и отступы, — часто это четверть интерлиньяжа, или 0.25rem. Заодно из код-ревью уходит разговор «это 12 или 14 пикселей?».

:root { --unit: 0.25rem; }

.section { padding-block: calc(var(--unit) * 12); }
.card + .card { margin-block-start: calc(var(--unit) * 6); }

Сделайте шкалу плавной, когда она установлена

Когда шаги уже существуют, каждый можно интерполировать между малым и большим значением через clamp(); тогда одна и та же шкала держится на любой ширине окна, и дополнительные точки останова не нужны.

Практика

Постройте шкалу из четырёх шагов от одного значения

Выберите базовый размер и отношение, вычислите четыре шага, примените их к заголовкам на одной странице и удалите все остальные объявления font-size.

Готово, когда: на странице четыре размера заголовков и один размер основного текста, все выражены в rem, и ни одного произвольного размера не осталось.

Приведите два блока к единице ритма

Возьмите единицу 0.25rem, перепишите поля и отступы одной страницы как кратные ей и сравните макет бок о бок с исходным.

Готово, когда: отступы визуально согласованы, каждое значение кратно единице, и не осталось магических чисел.

Частые ошибки

Новый размер для каждого дизайна — шкала перестаёт быть шкалой, и согласованность исчезает; исправить: выбирайте ближайший шаг и меняйте сам шаг, только если он действительно неверён.
Размеры в пикселях — предпочтение читателя по размеру шрифта игнорируется; исправить: используйте rem для шрифта и отступов.
Один line-height на весь документ — заголовки выглядят рыхлыми, а основной текст тесным; исправить: меняйте интерлиньяж по размеру и держите его без единиц.
Абзац во всю ширину страницы — строка становится нечитаемой; исправить: ограничьте её в ch.
Исправление ритма задним числом — каждый экран приходится пересматривать; исправить: установите единицу до того, как построена вторая страница.

Что читать дальше

Каскадные таблицы стилей (CSS) (02-frontend/05-css) — пользовательские свойства и каскад — то, через что шкала действительно применяется.
Плавная типографика и отступы (02-frontend/10-responsive-web-design/02-fluid-type-and-spacing) — превращение фиксированной шкалы в непрерывно адаптирующуюся.
Веб-шрифты и производительность (02-frontend/18-web-typography/02-web-fonts-and-performance) — половина набора текста в браузере, отвечающая за доставку.