Резиновая типографика: магия clamp()

Резиновая типографика: магия `clamp()`

MinskCSS, 16 апреля 2025 📍

Обо мне

Редачу в Доке, дружелюбном справочнике для разработчиков.
Веду подкаст «Инклюзивный ананас» под задорный смех Глаши Жур.
Google's Women Techmakers Ambassador.

Часть 1. В поисках проблемы на свою голову

Ожидание

Размер окна:

Реальность

Задача

Изменять размер заголовка таким образом, чтобы он адаптировался равномерно и последовательно на всех брейкпоинтах.

Часть 2. В поисках решения

Текущие стили заголовка

				h1 {
				  font-size: 3rem;
				}
				@media (width >= 576px) {
				  h1 {
				    font-size: 4rem;
				  }
				}
				@media (width >= 768px) {
				  h1 {
				    font-size: 7rem;
				  }
				}

Решение № 1. Добавить недостающие брейкпоинты и подходящие значения для font-size 🙂

Размер окна:

Cтили с новыми брейкпоинтами

					h1 {
					  font-size: 3rem;
					}
					@media (width >= 460px) {
					  h1 {
					    font-size: 3.2rem;
					  }
					}

					@media (width >= 576px) {
					  h1 {
					    font-size: 4rem;
					  }
					}
					@media (width >= 768px) {
					  h1 {
					    font-size: 6rem;
					  }
					}

					@media (width >= 700px) {
					  h1 {
					    font-size: 5rem;
					  }
					}
					@media (width >= 992px) {
					  h1 {
					    font-size: 7rem;
					  }
					}

Количество брейкпоинтов

Было 🙂

≥ 576px
≥ 768px

Стало 🫠

≥ 460px
≥ 576px
≥ 700px
≥ 768px
≥ 992px

Решение № 2. Изменять размеры заголовка резиново, а не отзывчиво.

Отзывчивый шрифт (Responsive)

Резиновый шрифт (Fluid)

Как сверстать резиновый текст?

JavaScript 🦖
Миксины CSS-препроцессоров.
calc() и единицы vw (Viewport width) и vh (Viewport height).
clamp().

Что такое `clamp()`?

CSS-функция, которая позволяет задать значение свойству в указанном диапазоне.

Поддержка функции clamp() в браузерах — 96.33 %.

Устройство `clamp()`

Значения:

минимальное (minValue);
предпочтительное (prefValue);
максимальное (maxValue).

				clamp(minValue, prefValue, maxValue);

За плавное изменение размера текста отвечает предпочтительное значение.

Размер окна:

Предпочтительная ширина (vw)

v = \frac{100 \cdot (y_{2} - y_{1})}{x_{2} - x_{1}}

y1 — минимальный размер текста;
y2 — максимальный размер текста;
x1 — ширина вьюпорта, на которой заканчивается мин. размер текста;
x2 — ширина вьюпорта, на которой начинается макс. размер текста.

Относительный размер (rem)

r = \frac{(x_{1} \cdot y_{2}) - (x_{2} \cdot y_{1})}{x_{1} - x_{2}}

y1 — мин. размер текста;
y2 — макс. размер текста;
x1 — ширина вьюпорта, на которой заканчивается мин. размер текста;
x2 — ширина вьюпорта, на которой начинается макс. размер текста.

Вариант с формулой

Более плавное масштабирование.
Текст не становится слишком маленьким на мобильных устройствах.
Текст не увеличивается слишком резко при увеличении ширины экрана.

Часть NaN. Работает — не трогай

Секреты успешной резины

Не задавайте минимальные и максимальные размеры шрифта в пикселях.
Следите за соотношением между самым большим и самым маленьким шрифтом.

Почему не пиксели?

Если задать размер шрифта в пикселях, он заменит стандартный размер браузера (16 пикселей), и текст не будет увеличиваться при изменении настроек.

Пример с элементом `html`

				html {
				  font-size: 15px;
				}
				h1 {
				  font-size: 1rem;
				}

Соотношение между бо́льшим и меньшим значениями

Максимальный размер шрифта не должен превышать минимальный больше чем в 2.5 раза 🤯

Почему такое соотношение?

Текст с неправильными размерами плохо масштабируется, потому что не достигает двукратного увеличения из-за наложения функций увеличения и масштабирования.

Кто увеличивает текст и масштабирует интерфейс

Люди с особенностями зрения.
Те, кто по другой причине хотят сделать шрифт и элементы побольше.

Часть 4. Полируем демку

Размер окна:

Переписываем код

Было

						h1 {
						  font-size: 3rem;
						}
						@media (width >= 460px) {
						  h1 {
						    font-size: 3.2rem;
						  }
						}
						…

Стало

						h1 {
						  font-size: clamp(3rem, 5vw + 1.5rem, 7rem);
						}

Размер окна:

Финальные штрихи. Избавляемся от дробных единиц для простоты восприятия ✨

Просто округли

				h1 {
				  font-size: clamp(3rem, 5vw + 1.5rem, 7rem);
				  font-size: clamp(3rem, round(down, 5vw + 1.5rem, 2px), 7rem);
				}

Размер окна:

Текущие проблемы с `round()`

Новая функция с шероховатостями имплементации.
Влияет на производительность (если вдруг завис ноутбук, вините во всём CSS).

Часть 5. Вместо выводов

Резиновая типографика не заменяет отзывчивую: выбор зависит от конкретного случая.