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

Пример 1 — Заголовки, которые прыгают на точке перелома

Два заголовка перескакивают на большие размеры на 48rem, поэтому у страницы есть один видимый край, а запрос существует только ради изменения четырёх чисел. Замените шаг непрерывной шкалой и удалите запрос.

h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }

@media (min-width: 48rem) {
  h1 { font-size: 3rem; }
  h2 { font-size: 1.75rem; }
}

Решение

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

clamp(minimum, preferred, maximum) возвращает предпочтительное значение, но не ниже и не выше границ, поэтому заголовки растут плавно между теми двумя размерами, что уже были в дизайне, и разрыв исчезает. Член в rem в предпочтительном значении — это то, что заставляет считаться с читателем, который увеличил размер текста по умолчанию, тогда как размер только в vw масштабируется с окном и этого читателя игнорирует. Обе границы нужно проверять на крайних случаях: самая узкая поддерживаемая ширина ловит слишком большой минимум. Очень широкий экран ловит пропущенный максимум, из-за которого заголовок просто продолжал бы расти.

Пример 2 — Длина строки в пикселях и размер только в единицах окна

Контейнер абзаца ограничен в пикселях, а витринный заголовок задан чисто в единицах окна. Один ломается при изменении шкалы шрифта, другой перестаёт реагировать на масштабирование. Разберите каждый случай, затем исправьте оба.

.prose { max-width: 900px; }
.display { font-size: 5vw; }   /* нельзя масштабировать; растёт с окном, а не с читателем */

Решение

.prose { max-width: 68ch; margin-inline: auto; }
.display { font-size: clamp(2rem, 1.25rem + 3vw, 4.5rem); }

Ограничение в пикселях — фиксированное число, однако шкала шрифта меняется, поэтому в тот момент, когда заголовки меняются, мера уходит от полосы примерно в семьдесят символов, где глаз комфортно возвращается на следующую строку; 68ch же измеряется в ширине глифа нуля и потому следует за шрифтом. У витринного размера тот самый отказ, о котором предупреждает урок о плавной типографике: vw в одиночку не зависит ни от масштаба читателя, ни от размера по умолчанию и не имеет верхней границы, поэтому на экране 3000px заголовок огромен, а на узком — нечитаем. Член в rem в выражении и обе границы возвращают масштабирование и здравый смысл на крайних значениях.