Главное: clamp(min, preferred, max) + относительные единицы (rem, em,
ch, vw). Шкалу размеров и отступов храните в CSS-переменных.
Функции и свойства
Инструмент
Зачем нужен
Мини-пример
clamp(min, pref, max)
Значение в границах min…max, между ними — pref
font-size: clamp(2rem, 6vw, 5rem);
min() / max()
Выбрать меньшее / большее из значений
width: min(100%, 65ch);
fluid typography
Плавная типографика от viewport
--step-4: clamp(2rem, 4vw, 4rem);
fluid spacing
Плавные отступы и gap
--space-section: clamp(3rem, 8vw, 7rem);
line-height
Читаемая высота строки (без единиц)
line-height: 1.6;
Относительные единицы
Единица
Относительно чего
Типичное применение
rem
корневого font-size (16px)
размеры, отступы — главная единица
em
font-size текущего элемента
отступы внутри компонента
ch
ширина символа «0»
длина строки: max-width: 65ch
vw / vh
1% ширины / высоты окна
текучесть — всегда внутри clamp()
Правило большого пальца: комфортная длина строки — 45–75 символов
(max-width: 60ch); vw никогда не используйте в одиночку — только обёрнутым в clamp().