Проблема, которую решает fluid type

Исторически веб-типографика решала проблему разных экранов через медиа-запросы: при ширине до 768px — один размер шрифта, при большей ширине — другой. Это решение грубое: шрифт резко «прыгает» при пересечении брейкпоинта, создавая несогласованность между точками переключения.

Fluid type решает это иначе: размер шрифта непрерывно масштабируется между двумя крайними значениями — минимальным (для узких экранов) и максимальным (для широких). Результат — плавное, органичное масштабирование без скачков.

CSS clamp(): синтаксис и принцип

Функция clamp(MIN, VALUE, MAX) устанавливает значение, которое не может быть меньше MIN и больше MAX. Для fluid type это выглядит так:

h1 { font-size: clamp(2rem, 5vw, 4rem); }

Здесь: минимальный размер — 2rem (32px), масштабирующее значение — 5vw (5% ширины viewport), максимальный размер — 4rem (64px). При ширине viewport 640px → 5vw = 32px = 2rem (минимум активен). При viewport 800px → 5vw = 40px (fluid работает). При viewport 1280px → 5vw = 64px = 4rem (максимум активен).

«Fluid type — это не просто CSS-трюк. Это принципиальный переход от ступенчатой к непрерывной типографической логике.»

— Сара Новак, автор Mirevia

Формула с линейной интерполяцией

Более точный подход — использовать формулу с конкретными viewport-значениями вместо процентного vw. Это гарантирует предсказуемое поведение в заданном диапазоне экранов:

/* Шрифт от 18px (320px экран) до 22px (1200px экран) */
font-size: clamp(1.125rem, 0.875rem + 0.781vw, 1.375rem);

Формула для расчёта fluid value: ((MAX - MIN) / (MAX_VP - MIN_VP)) * 100vw + MIN - ((MAX - MIN) / (MAX_VP - MIN_VP)) * MIN_VP. Существуют онлайн-калькуляторы (Fluid Type Scale, utopia.fyi), которые автоматизируют этот расчёт для всей типографической шкалы сразу.

Типографические шкалы: system-level подход

Профессиональные реализации fluid type строятся не как набор отдельных clamp()-значений, а как система, основанная на едином модуле. Инструмент Utopia (utopia.fyi) генерирует CSS-переменные для всей типографической шкалы — от --step--2 до --step-5 — с согласованным масштабным коэффициентом между ступенями.

Это означает, что соотношение между h1, h2, p и small остаётся пропорциональным на всех размерах экрана. Типографическая иерархия не разрушается на мобильном устройстве.

Viewport-единицы без clamp: почему это плохо

Использование чистого vw для font-size без clamp() — распространённая ошибка. На очень широких экранах (2560px+) текст становится гигантским, на узких (320px) — нечитаемым. Всегда ограничивайте масштабирование минимальным и максимальным значениями через clamp().

Практические рекомендации

  • Для основного текста избегайте fluid type — достаточно 16–18px на всех экранах с одним брейкпоинтом.
  • Применяйте fluid type к заголовкам (h1–h3) и дисплейным элементам.
  • Используйте utopia.fyi или typescale.com для расчёта согласованных шкал.
  • Проверяйте результат на реальных устройствах: экраны 320px и 1920px.
  • Тестируйте line-height — он тоже должен адаптироваться вместе с font-size.
Руководство по адаптивной типографике Все статьи