Плавная типографика и отступы

Что это такое

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

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

Раскладка с четырьмя точками перелома всё ещё выглядит неправильно на трёх ширинах между ними. Если размер текста зафиксирован, удобный на 1440px текст на 2000px становится либо огромным, либо нечитаемым. Заголовок же, который перескакивает с 1.5rem на 3rem одним шагом, привлекает внимание к точке перелома, а не к содержимому. Гибкие значения убирают эти края: страница всегда разумного размера, а число точек перелома падает, потому что исправлять приходится меньше разрывов. Однако масштабирование теперь формула, поэтому его нужно ограничивать, — для этого и нужен clamp().

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

Интерполируйте между двумя значениями через `clamp()`

clamp(minimum, preferred, maximum) возвращает предпочтительное значение, но не ниже минимума и не выше максимума. Предпочтительное значение обычно состоит из единицы окна плюс фиксированное смещение, поэтому средний член растёт с окном, а границы держат крайние случаи разумными.

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

Читайте так: не меньше 1.5rem, не больше 3rem, а между ними рост на 2 % ширины окна поверх 1rem.

Измеряйте длину строки в символах

max-width: 70ch ограничивает абзац примерно семьюдесятью символами — диапазоном, в котором глаз комфортно возвращается на следующую строку. В единицах ch ограничение следует за шрифтом и потому продолжает работать при изменении шкалы шрифта; ограничение в пикселях — нет.

.prose {
  max-width: 68ch;
  margin-inline: auto;
}

Масштабируйте отступы тем же выражением

Гибкие промежутки держат внутренний padding карточки пропорциональным её ширине. Держите шаги небольшими: промежуток, меняющийся с 0.5rem до 1.5rem, читается как намеренный, а меняющийся впятеро — как ошибка.

.section { padding-block: clamp(1.5rem, 1rem + 3vw, 4rem); }

Дайте компоненту собственную шкалу

С единицами контейнерного запроса (cqw) компонент может задавать размер своего текста относительно собственного контейнера, а не окна. Тогда карточка в узкой боковой панели использует заголовок меньше, чем та же карточка в основной колонке, без дополнительного класса.

Ограничивайте всё

Режим отказа гибких размеров — значение, нормальное на 1200px и абсурдное на 320px или 3000px. Каждому интерполированному значению нужны обе границы, и меньшую границу следует проверять на самой узкой поддерживаемой ширине, а не на привычной.

Практика

Переведите ступенчатую шкалу заголовков в гибкую

Возьмите страницу с тремя уровнями заголовков и точкой перелома, меняющей их размер. Замените каждый размер выражением clamp() между двумя значениями, которые уже есть, затем удалите запрос.

Готово, когда: заголовки никогда не меньше старого малого размера и не больше старого большого, и ни один заголовок не меняет размер разрывно, пока вы тянете окно.

Задайте удобную длину строки

Примените max-width в ch ко всем контейнерам абзацев на одной странице, затем сравните с той же страницей при масштабе 200 %.

Готово, когда: ни одна строка не превышает примерно семидесяти пяти символов при любой ширине, и текст по-прежнему заполняет контейнер, не оставляя неуклюже короткой колонки.

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

clamp() без максимума — заголовки растут без предела на очень широких экранах; исправить: задайте обе границы и проверьте на самой широкой поддерживаемой ширине.
vw в одиночку для размера шрифта — текст нельзя масштабировать независимо, и он масштабируется вместе с окном, а не с предпочтением читателя; исправить: оставьте член в rem в выражении, чтобы значение уважало корневой размер.
Ограничение длины строки в пикселях — мера «плывёт», как только меняется шкала шрифта; исправить: ограничивайте в ch.
Гибкие отступы везде — несвязанные промежутки дышат туда-сюда, и раскладка выглядит нестабильной; исправить: оставьте гибкие отступы для ритма секций и держите промежутки компонентов фиксированными.
Интерполяция по точкам перелома с сохранением запросов — две системы борются за одно свойство; исправить: удалите запрос, как только значение стало непрерывным.

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

Вёрстка mobile-first (02-frontend/10-responsive-web-design/01-mobile-first-layout) — базовый слой, к которому добавляются эти гибкие значения.
Современные возможности CSS (02-frontend/05-css/04-modern-css) — clamp(), пользовательские свойства и контейнерные единицы в более широком контексте.
Веб-типографика (02-frontend/18-web-typography) — как выбирать размеры, между которыми вы интерполируете.