Плавная типографика в Elementor через CSS-функцию clamp()

Что такое clamp() и как она работает

Синтаксис функции выглядит так: clamp(минимум, гибкое значение, максимум). Браузер использует среднее значение как основу для масштабирования, но не выходит за установленные нижнюю и верхнюю границы.

Например, в записи clamp(2rem, 4vw, 4.5rem) 2rem — минимальный размер шрифта, 4vw — значение, зависящее от ширины viewport, а 4.5rem — максимальный размер. На узком экране текст не станет меньше 2rem, а на широком — не увеличится более чем до 4.5rem.

Единица vw равна одному проценту ширины viewport. Поэтому значение 4vw изменяется при изменении ширины окна, в отличие от фиксированных px или rem.

• минимум защищает от слишком мелкого текста на мобильных устройствах;
• гибкое значение обеспечивает плавное масштабирование;
• максимум не позволяет заголовку стать непропорционально большим на крупных мониторах.

font-size: clamp(2rem, 4vw, 4.5rem);

Как добавить плавный размер заголовка в Elementor

Сначала откройте виджет заголовка и добавьте ему CSS-класс, например fluid-title. Класс нужно указывать без точки — точка используется только в CSS-селекторе.

Затем добавьте правило в Custom CSS, если такая возможность доступна в вашей конфигурации Elementor, или вставьте его в дополнительные CSS-стили темы. Конкретное расположение поля может зависеть от редактора, тарифа и настроек сайта.

Селектор ниже учитывает стандартную внутреннюю структуру виджета Heading: класс находится на обертке, а текст заголовка — внутри элемента с классом elementor-heading-title.

• откройте нужный виджет Heading;
• в настройках виджета добавьте класс fluid-title;
• добавьте CSS-правило;
• сохраните изменения и проверьте результат на разной ширине экрана.

.fluid-title .elementor-heading-title {
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: 1.05;
}

Если стиль не применился

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

Если класс добавлен непосредственно к элементу заголовка, селектор может быть другим. В таком случае можно использовать более простое правило .fluid-title { font-size: ... }, но сначала проверьте HTML в инструментах разработчика браузера.

Подбор значений для разных типов текста

Готовое значение clamp() не является универсальным. На него влияют шрифт, длина заголовка, ширина контейнера и назначение блока. Hero-заголовок может быть крупным, а заголовок карточки или секции — значительно сдержаннее.

Для основного заголовка страницы можно начать с диапазона 2–4.5rem. Для заголовков второго уровня подойдет меньший диапазон, например 1.5–3rem. Это только стартовые значения: окончательный результат нужно оценивать в реальном макете.

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

.section-title .elementor-heading-title {
  font-size: clamp(1.5rem, 3vw, 3rem);
  line-height: 1.15;
}

.hero-title .elementor-heading-title {
  font-size: clamp(2rem, 5vw, 5.5rem);
  line-height: 1;
}

Плавные отступы через clamp()

Ту же функцию можно использовать не только для текста, но и для padding и margin. Это помогает уменьшить резкие изменения высоты секций между breakpoint.

Свойство padding-block одновременно задает верхний и нижний внутренние отступы. Если требуется более широкая поддержка или понятное поведение в конкретном проекте, эти значения можно записать отдельно через padding-top и padding-bottom.

• padding-block отвечает за вертикальные отступы;
• padding-inline можно использовать для горизонтальных отступов;
• не стоит применять слишком большие максимальные значения к каждой секции — страница может стать чрезмерно растянутой.

.fluid-section {
  padding-block: clamp(3rem, 8vw, 9rem);
}

.fluid-section {
  padding-inline: clamp(1rem, 4vw, 4rem);
}

Как проверить результат на разных экранах

После добавления CSS не ограничивайтесь проверкой в трех режимах Elementor. Постепенно уменьшайте и увеличивайте ширину браузера, поскольку проблема часто проявляется именно между стандартными breakpoint.

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

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

Типичные ошибки при использовании clamp()

Самая распространенная ошибка — слишком большой диапазон между минимумом и максимумом. В таком случае заголовок может эффектно выглядеть на одном экране, но создавать лишние переносы на другом.

Еще одна проблема — использование только vw без ограничений. Такой текст может стать нечитаемым на маленьком экране или чрезмерно большим на широком. Именно поэтому clamp() почти всегда должна содержать обе границы.

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

• не путайте класс fluid-title с HTML-тегом заголовка;
• не добавляйте единицы измерения ко всему выражению clamp() — они нужны каждому значению отдельно;
• не используйте одинаковый clamp() для всех уровней заголовков;
• убедитесь, что line-height не создает наложение строк;
• после изменений очистите кеш CSS, если сайт или плагин кеширования показывает старые стили.