Функция clamp() выбирает значение между заданными нижней и верхней границами. Для размера шрифта это позволяет совместить плавное изменение с ограничениями. На Mentoring.digital разберём формулу и проверку поведения текста на разных ширинах.
Задаём минимум, желаемое значение и максимум
.article-heading {
font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
line-height: 1.2;
}Первый аргумент задаёт минимум, второй содержит желаемое значение, третий задаёт максимум. Пока среднее выражение находится между границами, используется оно. Ниже минимума выбирается минимум, выше максимума выбирается максимум.
В примере rem зависит от размера шрифта корневого элемента, а vw зависит от ширины области просмотра. Слагаемое 1rem не равно одному пикселю. Поэтому формулу нужно оценивать в условиях конкретной страницы, а не по одному скопированному числу.
Проверяем формулу на понятных числах
Допустим, размер корневого шрифта равен 16 пикселям. Тогда границы составляют 24 и 48 пикселей. На ширине 400 пикселей среднее выражение даёт 16 + 8 = 24 пикселя. На ширине 800 оно даёт 32 пикселя. На ширине 1600 результат достигает максимума 48 пикселей.
Эти расчёты относятся только к указанному корневому размеру. Если пользователь изменит базовый размер текста или условия просмотра, результат может измениться. Значения границ также должны соответствовать вашему макету и объёму заголовков.
Учитываем длинный текст и масштаб
Плавный размер не гарантирует, что длинный заголовок поместится в одну строку. Проверьте переносы, высоту блока и расстояние до соседних элементов. Фиксированная высота контейнера может обрезать увеличенный текст даже при корректной формуле.
Использование rem вместе с vw само по себе не доказывает доступность. Проверьте увеличение масштаба до 200%, изменение базового размера шрифта и отсутствие потери текста. Если размер визуально почти не увеличивается из-за зависимости от ширины, пересмотрите формулу или примените другое правило.
Практика перед внедрением
Подготовьте короткий и длинный заголовки. Сравните их на узком, среднем и широком экране, затем увеличьте текст. Запишите, какое ограничение сработало в каждом случае и осталось ли содержимое полностью доступным.
Работу с адаптивной типографикой можно изучать на курсах frontend-разработки. Проверить выбранные границы в своём интерфейсе поможет ментор по frontend.
