CSS clamp(): адаптивный шрифт без медиазапросов

Clamp() принимает три значения: минимум, желаемое и максимум — clamp(1rem, 2.5vw, 2rem). Браузер берёт среднее (обычно оно завязано на ширину экрана через vw), но не даёт ему опуститься ниже минимума и подняться выше максимума. Получается шрифт, который плавно растёт вместе с окном и при этом не превращается в нечитаемую мелочь на телефоне и в гигантский заголовок на широком мониторе.

Это разные вещи, которые легко перепутать. Clamp() — математическая функция, ограничивающая любое числовое значение: размер шрифта, отступ, ширину. А -webkit-line-clamp обрезает текст после заданного числа строк и ставит многоточие. Если вам нужно «показать только 3 строки и многоточие» — это line-clamp, а не clamp().

Один clamp() заменяет цепочку брейкпоинтов: font-size: clamp(1.5rem, 1rem + 2vw, 3rem). Единица vw привязывает размер к ширине окна, а минимум и максимум страхуют от крайностей. Медиазапросы при этом никуда не деваются — они по-прежнему нужны там, где меняется сама раскладка, а не размер.

Запись вида 1rem + 2vw — не украшение. Чистый vw полностью игнорирует пользовательскую настройку размера шрифта в браузере: человек увеличил шрифт, а текст не отреагировал. Слагаемое в rem возвращает эту зависимость, и текст остаётся масштабируемым для людей со слабым зрением.

Любые: rem, em, px, vw, vh, проценты — и даже выражения calc() внутри. Калькулятор выше работает с px и rem и сам переводит одно в другое, считая от базы 16px.