Итак, расскажу или, для тех кто знает, напомню про один маленький трюк: CSS-функция clamp() делает шрифт адаптивным.

Как это работает? Шрифт будет менять свой размер пропорционально изменению видимой области экрана в определенном диапазоне: между установленными минимальным и максимальным значениями.

h1 {
  font-size: clamp(16px, 5vw, 34px);
}

Разберем, как это работает:

1. Установим минимальный размер шрифта - 16px;
2. Установим максимальный размер шрифта - 32px;
3. Установим предпочитаемое (адаптивное) значение - 5vw;

В этом примере значение font-size для элемента h1 равно 5% ширины видимой области экрана, но оно не может быть меньше 16px и больше 32px.

Так, если ширина видимой области экрана равна 300px, 5vw будут соответствовать 15px. Однако мы ограничили font-size для данного элемента величиной 16px, так что для данной видимой области экрана размер шрифта составит 16px.

С другой стороны, если ширина видимой области экрана равна 1400px, 5vw - это уже целых 70px. Но мы ограничили максимальное значение font-size величиной 32px, так что для данной видимой области экрана размер шрифта составит 32px.

Приятный бонус: функция clamp() работает с padding и margin. И везде, где допускается применение length, frequency, angle, time, percentage, number, или integer.

Здесь можно посмотреть, какие браузеры поддерживают эту функцию.

Спасибо за внимание.