Генератор типографической шкалы с резиновым clamp()

Модульная шкала — набор размеров шрифта, в котором каждый следующий размер равен предыдущему, умноженному на один и тот же коэффициент. Вместо того чтобы подбирать на глаз 14, 18, 22 и 31, вы выбираете базу и коэффициент — и все заголовки, подписи и метки получают размеры, связанные между собой. Идея пришла из музыки, где интервалы между нотами — отношения частот; для веба её популяризировал Тим Браун в статье «More Meaningful Typography» (A List Apart, 2011).

Отрицательные ступени дают подписи и мелкий текст, положительные — заголовки. Распространённые коэффициенты и где они уместны:

• 1,067 малая секунда, 1,125 большая секунда — очень плотные шкалы: дашборды, приложения с большим объёмом данных, маленькие экраны.
• 1,2 малая терция, 1,25 большая терция — самый частый выбор для продуктовых интерфейсов и документации.
• 1,333 чистая кварта, 1,414 увеличенная кварта — чёткая иерархия для лендингов и блогов.
• 1,5 чистая квинта, 1,6 малая секста, 1,618 золотое сечение — выразительные шкалы; ступеней должно быть немного, иначе к четвёртой заголовки становятся огромными.

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

Одна шкала редко подходит и телефону шириной 360 px, и десктопу в 1440 px: заголовки, хорошие на большом экране, на мобильном вылезают за край. Раньше это решали набором медиазапросов, которые переключают размеры скачком. Резиновая типографика вместо этого линейно увеличивает каждый размер с ростом ширины экрана между двумя точками и фиксирует его за их пределами. В CSS это одно объявление:

В генераторе базу и коэффициент можно задать отдельно для каждого края — так работает Utopia (utopia.fyi). Меньший коэффициент на телефоне и больший на десктопе почти не меняют основной текст, зато заголовки на большом экране становятся заметнее. Все значения записываются в rem, поэтому шкала учитывает размер шрифта, выбранный пользователем.

Резиновые шрифты и доступность

Критерий WCAG 1.4.4 требует, чтобы текст можно было увеличить до 200 % без потери содержимого. Масштаб браузера увеличивает значения в rem, но не в vw, поэтому размер, сильно зависящий от ширины экрана, может не удвоиться при увеличении. Два правила делают резиновую типографику безопасной:

• Всегда добавляйте rem в предпочтительное значение — никогда не пишите просто 5vw. Генератор всегда выдаёт rem + vw.
• Максимум не больше 2,5 минимума. Как показал Максвелл Барвиан (Smashing Magazine, 2023), если наибольший размер в clamp() не больше наименьшего в 2,5 раза, текст всегда можно увеличить до 200 %. Ступени, нарушающие это правило, отмечаются над превью.

• Начинайте с основного текста. 16 px — размер браузера по умолчанию и хороший минимум для чтения; для длинных текстов на десктопе часто берут 17–18 px. Подписи интерфейса и ячейки таблиц могут использовать ступень −1.
• Ограничьте число ступеней. Большинству продуктов хватает двух ступеней ниже базы и 4–5 выше. Больше размеров делают иерархию не понятнее, а запутаннее.
• Уменьшайте межстрочный интервал с ростом кегля. Около 1,5 для основного текста и 1,1–1,2 для крупных заголовков; экспорт в Tailwind включает рекомендуемый интервал для каждой ступени.
• На маленьких экранах берите меньший коэффициент. 1,2 на телефоне и 1,25–1,333 на десктопе — надёжная пара для продуктового интерфейса.
• Короткие тексты интерфейса тоже должны читаться. Подсказки, шаги онбординга и пункты чеклиста часто набирают 12–13 px, чтобы уместить в маленький пузырь. Держите их не меньше ступени −1 и сокращайте текст — поможет калькулятор времени чтения подсказок.
• Проверяйте контраст на самом мелком размере. Тонким начертаниям и мелкому кеглю нужно больше контраста — проверьте пары в проверке контраста цветов.

1. Brown T. More Meaningful Typography. A List Apart, 2011 — модульные шкалы для веба.
2. Брингхерст Р. Основы стиля в типографике. — классическая типографическая шкала и музыкальные интервалы.
3. Utopia (utopia.fyi), J. Gilyead и T. Hill — резиновые шкалы с разными коэффициентами для узкого и широкого экрана.
4. Barvian M. Addressing Accessibility Concerns With Using Fluid Type. Smashing Magazine, 2023 — правило 2,5× для масштаба 200 %.
5. W3C. WCAG 2.2, критерий 1.4.4 «Изменение размера текста».
6. W3C. CSS Values and Units Module Level 4 — clamp(), rem и vw.