Типографская шкала: размеры по лестнице, а не наугад

Типографская шкала — набор размеров шрифта, где каждая ступень равна предыдущей, умноженной на один коэффициент: при 1.25 это 16, 20, 25, 31.

Размеры «на глаз» и по шкале

Когда размеры выбирают на глаз, на странице набирается двадцать почти одинаковых размеров: 14, 15, 16, 17, 18 пикселей. Вид получается «неряшливым», хотя отдельно ничего плохого нет. Так же в музыке нота, взятая чуть мимо, режет слух, хотя ни одна не фальшивая по отдельности.

Типографская шкала (её ещё называют модульной) делает наоборот: берут один базовый размер основного текста и один коэффициент, и каждый следующий размер получают умножением на него. При базе 16 пикселей и коэффициенте 1,25 лесенка выглядит так: 16, 20, 25, 31, 39, 49. Между ступенями всегда одно и то же соотношение, и глаз это чувствует как порядок.

Коэффициенты часто берут из музыки, потому что они приятны на слух и на глаз: 1,2 (малая терция), 1,25 (большая терция), 1,333 (кварта), 1,5 (квинта), 1,618 (золотое сечение). Удобный калькулятор есть на сайте modularscale.com, он указан в источниках.

Попробуйте сами: выберите коэффициент и посмотрите, как меняется лестница. Заголовки в ней написаны названием вашего проекта.

:root {
  --ratio: 1.25;
  --fs-sm: 0.8rem;
  --fs-base: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.563rem;
  --fs-2xl: 1.953rem;
  --fs-3xl: 2.441rem;
}

font-size: clamp(2rem, 1.413rem + 2.61vw, 3.5rem);

Сколько ступеней нужно сайту

Обычному сайту хватает шести-семи: одна ступень вниз (подписи, мелкие примечания), основной текст и четыре-пять вверх (подзаголовки и заголовки разных уровней). Систем с пятнадцатью размерами боятся не зря: разница между ними станет незаметной, а выбирать придётся каждый раз.

Большие дизайн-системы дают ступеням роли. В Material Design 3 это пятнадцать стилей: display, headline, title, body и label, каждый в трёх размерах (большой, средний, малый). Carbon от IBM делит шрифты на два набора: «продуктовый» (productive) для плотных рабочих интерфейсов и «выразительный» (expressive) для редакционных страниц. Названия ролей помогают не помнить числа: разработчик пишет headline-medium, а не 28px.

Мы будем называть ступени по размеру: --fs-sm, --fs-base, --fs-lg, --fs-xl, --fs-2xl, --fs-3xl (fs от font-size). А роли назначим правилами: h1 берёт --fs-3xl, h2 берёт --fs-xl.

Единицы: rem, а не px

Размер шрифта лучше задавать в rem: одна rem равна размеру шрифта корневого элемента, который человек может изменить в настройках браузера. Слабовидящие часто делают его крупнее, и страница с размерами в пикселях этого не заметит. Правило доступности WCAG требует, чтобы текст можно было увеличить до 200 % без потери содержания, и rem даёт это бесплатно.

:root {
  --ratio: 1.25;
  --fs-base: 1rem;
  --fs-lg: calc(var(--fs-base) * var(--ratio));
  --fs-xl: calc(var(--fs-lg) * var(--ratio));
}

Так всю шкалу можно сдвинуть одной правкой: поменять --ratio или --fs-base.

Текучий размер

Заголовок в 49 пикселей хорош на ноутбуке и огромен на телефоне. Раньше для этого писали несколько медиазапросов. Сегодня есть функция clamp(минимум, предпочтительное, максимум): размер плавно растёт вместе с шириной экрана, но не выходит за границы.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3.5rem);
}

Единица vw равна одному проценту ширины экрана. Подобрать числа проще в генераторе: в источниках указан Utopia, который по двум границам ширины строит всю текучую шкалу. На схеме выше есть простой пример: подвигайте ширину экрана.

Межстрочный интервал и характер

У каждой ступени свой интервал между строками. Для основного текста подходит 1,4–1,6: строки не слипаются, и глаз не теряет путь. У крупных заголовков интервал теснее, около 1,1–1,2, иначе строки заголовка расползаются. Интервал задают числом без единиц (line-height: 1.55), тогда он считается от размера шрифта элемента.

И немного про шрифты: одного семейства хватает. Для заголовка и текста можно взять два начертания (жирное и обычное) одного шрифта, а контраст создать размером. Пару разных семейств берите только тогда, когда можете объяснить зачем. В части про CSS вы подключали веб-шрифты: помните, что каждый стоит байтов и времени загрузки.

Практика

Страница вашего проекта сейчас набрана размерами 29, 21, 15 и 11 пикселей: числа взяты с потолка. Замените их шкалой: опишите на :root коэффициент и шесть ступеней, назначьте ступени ролям (h1, h2, абзацы разделов, подпись) и поправьте интервал у абзацев. Потом поменяйте --ratio на 1.333 и посмотрите, как перестроилась страница. Так и работает шкала: одно число, весь вид.

Что было не так с 2014 годом

В 2014 году размеры задавали в пикселях и подгоняли под каждый экран медиазапросами, а «текучих» размеров не было. Страница либо не помещалась на телефоне, либо на большом экране выглядела пустой. Функции clamp() в то время не существовало: она появилась в браузерах только в 2019–2020 годах.