Продолжаем темы постов про типографику в верстке. Недавно я выкатил простой плагин, который приводит в порядок текст для постов после сохранения. Теперь поговорим как использовать clamp в создании сайтов и вообще забыть про пиксели в шрифтах. Хорошей практикой будет использовать rem, а еще лучше CSS-функцию clamp(). О ней и пойдет речь.
Настройка шрифтов под каждый экран — это сизифов труд. Вы открываете десктоп, ставите 60px, переходите на планшет — 40px, на мобилку — 28px. В итоге CSS-файл раздувается от медиазапросов, а на «промежуточных» экранах (вроде маленьких ноутбуков) текст выглядит то слишком мелким, то неоправданно огромным.
Решение давно придумано — это CSS-функция clamp(). Разберемся, как внедрить её в любой конструктор.
Математика комфорта: что такое clamp()
Если не углубляться в дебри документации, то clamp(min, val, max) — это функция, которая удерживает значение в заданных пределах.
- Min: Самый мелкий шрифт для iPhone SE.
- Max: Предел для 4K мониторов.
- Val: Динамическая величина (обычно в
vw— viewport width), которая заставляет шрифт «дышать» вместе с окном браузера.
Пример: font-size: clamp(24px, 4vw + 10px, 48px); Шрифт никогда не будет меньше 24px и больше 48px, а между ними будет плавно масштабироваться.
Как внедрить в Elementor
Elementor исторически завязан на фиксированных значениях в интерфейсе, но он отлично понимает переменные. Есть два пути, через глобальные шрифты (в версии конструктора v3) или через переменные (в новой версии v4) или по хардкору через CSS.
Мое отношение к новой версии конструктора мягко говоря неоднозначно. Они выкатили новую версию в сыром и не готовом виде. Она на апрель 2026 года все еще выглядит как бета-версия. Нельзя сделать полноценный проект (если это только не простой лендинг) используя версию v4. Переменные все еще неудобны, нет сеток и циклов. Но главное приходится смешивать две разные среды вместе, что только усложняет.
Создайте свой набор типографики, который используете в дизайне. Можно воспользоваться гениратором согласно вашей ширины контейнера и экрана. Есть конечно нюансы иногда длинные слова могут не уменьшаться достаточно на мобильных, а функцию нужно подкручивать руками.
Вариант второй
Создаем глобальные стили: Идем в Настройки сайта -> Произвольный CSS или можно в дочерней теме или отдельным сниппетом создать список типографики.
Прописываем переменные:
:root {
--fluid-h1: clamp(32px, 5vw + 1rem, 64px);
--fluid-text: clamp(16px, 1vw + 10px, 20px);
}Применяем: В настройках типографии любого заголовка вместо цифр пишем var(--fluid-h1).
Важно: В поле ввода значения (где обычно стоят px) просто вставляйте эту конструкцию. Elementor это «проглотит».
Как внедрить в Bricks
Bricks более «чистый» в плане кода, и там это делать — одно удовольствие.
- Global Settings: Переходим в Theme Styles -> Typography.
- Прямой ввод: Вы можете вставить
clamp()прямо в поле Font Size. Но лучше использовать переменные (как в примере выше), чтобы иметь возможность изменить размер сразу во всем проекте через одну строчку CSS. - Автоматизация: В Bricks удобно использовать
clamp()не только для текста, но и для контейнеров:width: clamp(300px, 50%, 1200px). - В Bricks философия другая, здест все лучше выстраивать на системе и переменных, начиная от типографики, отступов, радусов и прочего. Надеюсь Elementor будет стремиться к похожему сценарию использования, но со своей спецификой.
Маленький лайфхак: Как не считать в уме
Если не хочется подбирать vw на глаз, используйте простую логику: Для обычного текста хорошо работает 1vw + 0.5rem. Для крупных заголовков — 4vw + 1rem.
Итог: Неважно, на чем вы собираете сайт. Использование «резины» вместо жестких рамок — это признак профессиональной верстки. Это экономит время вам и нервы пользователям с нестандартными экранами.
