Как сделать адаптивный текст без media queries?

Очень часто для адаптации текста под разные экраны используют отдельные breakpoint. В итоге CSS разрастается, а шрифты начинают масштабироваться неравномерно.

Обычно это выглядит так:
.title {
font-size: 3rem;
}

@media (max-width: 768px) {
.title {
font-size: 2rem;
}
}

Но CSS умеет нативно адаптировать размер текста под экран:
.title {
font-size: clamp(1.2rem, 4vw, 3rem);
}

clamp() задаёт минимальный размер, адаптивное значение и максимальный предел.

Теперь текст плавно масштабируется вместе с viewport.
.subtitle {
font-size: clamp(1rem, 2vw, 1.5rem);
}

Особенно хорошо это работает для hero-блоков, заголовков, кнопок и адаптивных интерфейсов.

Media queries часто вообще становятся не нужны.

clamp() позволяет создавать по-настоящему адаптивные интерфейсы без множества контрольных точек и дублирования CSS.

Code Ready | #совет