Создание адаптивной типографики с помощью функции clamp()

Адаптивная типографика без боли: Магия функции clamp()

Признайся, сколько раз ты проклинал верстку, когда на iPhone 13 заголовок выглядел идеально, а на огромном мониторе превращался в крошечную сиротливую надпись? Или наоборот — когда на десктопе все круто, а на мобилке одна буква h1 занимает весь экран. Раньше мы тратили часы, чтобы настроить это поведение. Сегодня я покажу тебе, как решить проблему одной строчкой кода, которая заменит десяток медиа-запросов.

Как мы страдали раньше

Вспомни этот ад из медиа-выражений. Мы писали что-то вроде:

h1 { font-size: 24px; }

@media (min-width: 768px) {
  h1 { font-size: 32px; }
}

@media (min-width: 1200px) {
  h1 { font-size: 48px; }
}

Шрифт прыгал каскадами. Дизайнеры плакали, потому что «переход слишком резкий». Потом кто-то особо умный придумал формулу на основе calc() и vw, которая выглядела как чертеж адронного коллайдера. Это работало, но поддерживать такой код было невозможно: одна ошибка в скобках — и твоя типографика улетает в стратосферу. Кстати, если тебе интересно, как еще современные математические функции в CSS упрощают нам жизнь, обязательно глянь наш разбор про round() и rem().

Как делать правильно в 2026 году

Забудь про лапшу из медиа-запросов. У нас есть функция clamp(min, preferred, max). Она принимает три значения: минимальный порог, «идеальный» динамический размер и максимально допустимый предел.

Это работает как умный ограничитель. Браузер сам выберет оптимальное значение. Если 5vw (5% от ширины экрана) меньше минимального порога — возьмет минимум. Больше максимального — возьмет максимум. А в промежутке шрифт будет плавно «дышать» вместе с изменением окна браузера. Особенно круто это сочетается, если ты используешь переменные шрифты (Variable Fonts), позволяя плавно менять не только размер, но и жирность или ширину символов.

Готовый сниппет кода

Лови рабочий пример. Вместо того чтобы хардкодить пиксели, мы будем использовать rem для доступности и vw для динамики. Вот так выглядит современная база для заголовка:

:root {
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --font-size-h1: clamp(2rem, 1.5rem + 4vw, 4.5rem);
}

h1 {
  font-size: var(--font-size-h1);
  line-height: 1.1;
  font-weight: 800;
}

body {
  font-size: var(--font-size-base);
}

В этом примере h1 на маленьких экранах никогда не будет меньше 2rem, на огромных 4K-панелях не превысит 4.5rem, а между ними будет элегантно масштабироваться.

Частая ошибка новичков

Самый частый косяк — использовать только относительные единицы в центральном параметре, например clamp(1rem, 5vw, 3rem). Почему это плохо? Потому что если пользователь в настройках браузера увеличит стандартный размер шрифта (Accessibility!), то vw никак на это не отреагирует. Шрифт останется привязанным только к ширине экрана.

Как правильно: Всегда добавляй к vw хотя бы небольшое значение в rem. Выражение 2vw + 1rem гарантирует, что типографика будет учитывать и ширину вьюпорта, и пользовательские настройки системы. Твой UI должен быть не только красивым, но и доступным.

🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!