Типографика · fluid-type

Fluid type (CSS clamp)

Жидкая типографика: clamp + fluid scale без JS-библиотек

Tier 1Легко с AIОк на мобилеfreeЧистый CSS (опционально Typeset/токены)

Design DNA

«Заголовки масштабируются с viewport плавно — как в дорогом дизайн-системе, без медиаточек-лесенки.»

Use with AI

Скопируй промпт и отдай агенту. Он реализует решение в твоём стеке — не копирует чужой код.

Сделай fluid typography через CSS clamp (и при необходимости fluid spacing).
Не подключай FlowType.js — это legacy-вдохновение; современный путь = clamp + контейнерные запросы по желанию.
Задай шкалу для h1–body. Проверь читаемость на 320px и 1440px.
Сохрани существующие шрифты проекта.

Что умеет

·font-size: clamp(min, preferred, max)
·Fluid spacing через те же формулы
·Современная замена FlowType.js

Чего не умеет

·Не анимация букв (нужен SplitType)
·FlowType — legacy-вдохновение, не ставь его в 2020-е

Когда брать

·Адаптивные заголовки без кучи breakpoints
·Дизайн-токены лендинга

Когда не брать

·Нужна кинетика букв → SplitType + GSAP

С чем сочетается

Дизайн-токеныGSAPMotion

Альтернативы

Фиксированные rem + media queriesUtopia fluid type calculator

Типичные ошибки

·Ставить FlowType.js вместо clamp
·clamp без ограничения min/max → микроскопический текст

Демо и ссылки

Utopia fluid type MDN clamp()