Частые ошибки
1. vw без clamp() — текст «улетает»
Чистый font-size: 6vw ничем не ограничен: на телефоне буквы мизерные, на 4K — баннерные.
❌ 6vw на узком экране ≈ 1rem — нечитаемо мелко
Заголовок
❌ 6vw на 4K ≈ 6rem — лезет за экран
Заголовок
/* ❌ без границ */
h1 { font-size: 6vw; }
/* ✅ с границами */
h1 { font-size: clamp(1.75rem, 6vw, 4rem); }2. Fluid-размер у всего текста подряд
Делать clamp() с широкой вилкой для body-текста — ошибка: основной текст комфортнее со стабильным
размером. Fluid — для заголовков и крупных акцентов; для body — очень узкая вилка (например
clamp(1rem, …, 1.125rem)).
3. Строки без ограничения длины
Без max-width в ch на широком экране строка тянется на всю ширину — глаз теряет начало
следующей строки. Держи ~45–75 символов: max-width: 65ch.
4. Повтор clamp() вместо переменных
Копировать одинаковый clamp(...) в десятки правил — значит потом менять масштаб в десятках мест.
Заведи шкалу в :root и ссылайся через var(--step-4).
⚠️ Проверить по документации:
clamp(), относительные единицы
(rem/em/ch/vw) и line-height поддерживаются всеми современными браузерами, но при поддержке
очень старых движков уточните доступность clamp() на caniuse.