Отзывчивая (fluid) типографика с функцией clamp()

Живая типографика: Как clamp() навсегда изменил наш подход к размерам текста

Привет! Слушай, вспомни типичную задачу: заголовок на десктопе должен быть огромным, на мобилке — аккуратным, а на планшете… ну, где-то посередине. И вот ты начинаешь плодить медиа-запросы, ломая голову над тем, почему на 768px текст выглядит еще терпимо, а на 1024px — уже как дыра в дизайне. Знакомо? Мы годами пытались «приручить» текст, заставляя его прыгать по шагам, вместо того чтобы дать ему плавно дышать вместе с экраном. Хватит это терпеть, давай разберем, как сделать типографику по-настоящему флюидной.

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

До появления современного CSS у нас было два пути, и оба вели в никуда. Первый — ад из медиа-выражений. Мы писали по 5-6 брейкпоинтов для каждого заголовка. Код раздувался, поддержка превращалась в кошмар, а переход между размерами был резким, как удар кирпичом. Второй путь — «магические» формулы с использованием единиц вьюпорта. Помнишь этот дикий font-size: calc(12px + 1.5vw)? Вроде бы текст растет, но на огромных мониторах он становился гигантским, а на маленьких — нечитаемым. Чтобы ограничить этот бесконтрольный рост, приходилось снова лезть в медиа-запросы. К слову, если ты до сих пор путаешься в единицах измерения экрана, советую глянуть статью про динамические единицы вьюпорта (dvh, lvh, svh), это база для современного адаптива.

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

Сегодня у нас есть функция clamp(). Это элегантное решение, которое принимает три параметра: минимальное значение, предпочтительное (флюидное) и максимальное. Браузер сам выбирает «золотую середину», не давая тексту выйти за установленные границы. Это и есть та самая отзывчивая (fluid) типографика. Никаких скачков — только плавная трансформация при каждом изменении ширины окна. И что самое крутое, такой подход отлично сочетается с концепцией чистого кода, о которой мы говорили в статье про псевдоклассы :is() и :where(). Мы просто задаем правила игры, а браузер берет на себя всю математику.

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

Вместо того чтобы прописывать размеры для каждого элемента, лучше всего завести систему переменных в :root. Это позволит управлять всей типографикой проекта из одного места.

:root {
  /* Использование: clamp(MIN, VAL, MAX) */
  /* Текст плавно растет от 2rem до 5rem в зависимости от ширины экрана */
  --font-size-h1: clamp(2rem, 5vw + 1rem, 5rem);
  
  /* Для обычного текста разбег меньше, чтобы сохранить читаемость */
  --font-size-base: clamp(1rem, 1vw + 0.5rem, 1.25rem);
}

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

p {
  font-size: var(--font-size-base);
  line-height: 1.6;
}

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

Главный косяк, который я вижу на ревью — это использование в качестве центрального (предпочтительного) аргумента только единиц vw (например, clamp(1rem, 5vw, 3rem)). Почему это плохо? Потому что если пользователь в настройках браузера увеличит системный масштаб текста или использует Zoom, твой текст, завязанный только на ширину экрана, не увеличится. Это серьезная проблема для доступности (a11y). Всегда добавляй к «вьюпорт-единицам» хотя бы небольшое статичное значение в rem через плюс, как в моем примере выше: 5vw + 1rem. Так ты сохранишь возможность масштабирования текста пользователем и не сломаешь UX для слабовидящих людей.

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