Типографика и отступы в WordPress и Gutenberg: полный регламент вёрстки на Kadence Blocks
Рабочий регламент по типографике и отступам для сайтов на WordPress и Gutenberg: шкала кеглей и клампы, шкала отступов, кнопки, правило внутреннего и внешнего, порядок сборки блока и чек-лист приёмки.
Регламент вёрстки для WordPress и Gutenberg на плагине Kadence Blocks. Все размеры задаются один раз на весь сайт, а при сборке страницы вы выбираете роль элемента, а не вводите числа. Инструкция рассчитана на исполнителя без дизайнерского образования: в ней есть готовые таблицы, два варианта настройки, PHP-сниппеты и чек-лист приёмки.
Содержание
- Зачем эта инструкция
- Словарь: что означает каждое число
- Четыре принципа
- Роли текста
- Бирка: разбор одной роли
- Шкала кеглей
- Вариант A: настройка через Style Guide
- Вариант B: пресеты кегля
- Сниппет: свои значения пресетов
- Отступы: шкала пресетов Kadence
- Кнопки
- Порядок работы: настройка и сборка
- Прогон готовой страницы: 15 шагов
- Типичные ошибки
- Производительность
Зачем эта инструкция
Это рабочий регламент по типографике и отступам для сайтов на WordPress с редактором Gutenberg и плагином Kadence Blocks. Он написан так, чтобы по нему мог работать человек без дизайнерского образования: все решения сведены к нажатию заранее определённых кнопок, а не к вводу чисел «на глаз».
Главная идея простая. Дизайнер-новичок настраивает каждый блок отдельно и вводит размеры руками. В результате на странице появляются кегли 13, 14, 17, 22, 36 и отступы 8, 10, 12, 14, 24 — набор случайных чисел, который невозможно ни запомнить, ни воспроизвести. Через месяц он сам не скажет, почему здесь 14, а там 16.
Правильный подход обратный: все размеры и отступы задаются один раз на весь сайт, а при сборке страницы вы только выбираете роль элемента. Заголовок — значит заголовок, подпись — значит подпись. Размер подставится сам.
Откуда взяты правила
Значения в этой инструкции сведены из пяти источников, и там, где они расходятся, выбор объяснён:
- W3C, стандарт WCAG 2.2 — нормативные пороги: интерлиньяж, длина строки, масштабирование, контраст, размер зоны нажатия. Это не рекомендации, а требования доступности.
- Refactoring UI (Адам Уотан, Стив Шогер) — шкала кеглей и отступов, веса шрифта, построение иерархии.
- «Типографика и вёрстка», Артём Горбунов — правило внутреннего и внешнего, якорные объекты, модульность, поля формата.
- Tilda — кегль основного текста, схемы насыщенностей, пороги контраста.
- Material Design и Apple HIG — размеры кнопок и зоны нажатия.
Словарь: что означает каждое число
Без этого раздела дальше читать бессмысленно. Самая частая ошибка новичка — не знать, в чём измеряется параметр, и вписать пиксели туда, где нужен множитель.
Как читать запись через дробь
Во всех таблицах ниже запись 18 / 400 / 1,6 читается так:
- 18 — кегль в пикселях;
- 400 — вес шрифта, безразмерное число от 100 до 900;
- 1,6 — интерлиньяж как множитель от кегля, тоже без единиц.
То есть: шрифт 18 px обычного начертания, строки идут через 18 × 1,6 = 28,8 px.
Термины
| Термин | Свойство CSS | Единица | Что это |
|---|---|---|---|
| Кегль | font-size | px | Размер шрифта. Это не высота буквы, а высота кегельной площадки, куда буква вписана вместе с воздухом. Заглавная занимает примерно 0,7 кегля, строчная без выносных — около 0,5. Шрифт «18 px» рисует букву «Т» высотой около 13 px. |
| Вес, насыщенность | font-weight | без единиц | Толщина штриха. Число от 100 до 900 с шагом 100: 300 Light, 400 Regular, 500 Medium, 600 SemiBold, 700 Bold. Пикселей здесь нет. |
| Интерлиньяж | line-height | множитель | Расстояние от базовой линии одной строки до базовой линии следующей. Задавать множителем, а не пикселями: тогда при смене кегля он пересчитается сам. |
| Просвет | — | px | То, что реально видит глаз: белая полоса между строками. Интерлиньяж минус высота букв. При кегле 18 и интерлиньяже 1,6 просвет около 11 px. Именно просветы сравниваются с отступами, а не сам интерлиньяж. |
| Трекинг | letter-spacing | em | Равномерное разрежение или сжатие расстояния между всеми буквами сразу. Крупным заголовкам ставят минус, мелкому капсу — плюс. |
| Кернинг | font-kerning | авто | Точечная подгонка пары букв — «АУ», «ГА». В отличие от трекинга действует не на все пары, а на проблемные. Шрифт делает это сам. |
| em | — | относительная | Единица, равная текущему кеглю элемента. При кегле 18 px: 1em = 18 px, 0,02em = 0,36 px. |
| rem | — | относительная | То же, но от кегля корня страницы, обычно 16 px. Не «уплывает» при вложенности. |
| ch | — | относительная | Ширина символа «0». Используется для ограничения длины строки: max-width 62ch — примерно 62 знака. |
| Отбивка | margin | px | Вертикальный отступ между соседними элементами. Снаружи элемента. |
| Паддинг | padding | px | Отступ внутри элемента, от края до содержимого. Именно паддингами задаётся высота кнопки. |
| Базовая линия | — | — | Линия, на которой стоят буквы. Ниже свешиваются только выносные: р, у, д, ц, щ. |
| Высота строчных | — | px | x-height. Высота букв без выносных — х, п, о, е. Примерно 0,5 кегля. По массе строчных выравнивают текст внутри кнопок и полей. |
| Контраст | — | X : 1 | Отношение яркостей текста и фона. Минимум по W3C: 4,5:1 обычный текст, 3:1 крупный и границы. |
Четыре принципа, на которых держится всё остальное
Числа из таблиц ниже — следствие. Если понять принципы, вы сможете принимать решения там, где таблица молчит.
1. Правило внутреннего и внешнего
Базовый принцип типографики, работающий на всех уровнях от буквы до разворота. Формула одна:
внутреннее ≤ внешнее
Чтобы объект читался как самостоятельный — буква, слово, строка, абзац, блок — его внутренние расстояния должны быть меньше внешних. Иначе соседние объекты «вторгаются в личное пространство друг друга», и надпись слипается.
Практический тест. Выпишите все вертикальные расстояния блока подряд, от самого мелкого к самому крупному. Каждое следующее должно быть строго больше предыдущего. Две соседние равные ступени означают, что объекты на этом уровне перестали отделяться.
Следствие, которое объясняет 90 % проблем с вёрсткой: глаз режет композицию по самому большому просвету. Если самый большой разрыв внутри блока стоит между заголовком и текстом — блок развалится именно там, и читатель увидит две независимые штуки вместо одной.
Важно также, что «внутреннее» одного уровня служит «внешним» на другом. Межстрочный просвет — внутреннее для абзаца и внешнее для слов в строке. Поэтому заголовок не должен «влезать в интерлиньяж» текста: отбивка от заголовка до текста обязана быть больше межстрочного просвета этого текста.
2. Якорные объекты
Якорь — самый заметный объект своего прямоугольника. Порядок замечаемости всегда такой:
картинка → крупный заголовок → знаки, цифры, логотипы → наборный текст
Крупная кнопка тоже становится якорем, потому что это плотное цветное пятно.
Правило: каждый якорь должен тяготеть к углу, к стороне или к визуальному центру своего прямоугольника. Между этими положениями объект «висит» — и это видно, даже если человек не может объяснить, что именно не так.
Привязка должна быть очевидной: с противоположной стороны от якоря нужен воздух или менее плотные объекты. Самая частая ошибка новичка — забыть воздух.
И ещё одно: мелкое притягивается к крупному, второстепенное к главному, а не наоборот.
3. Модульность
Макет режется на непересекающиеся прямоугольники, которые вместе составляют общий прямоугольник экрана. Из этого следуют вещи, которые в вебе нарушают постоянно:
- Колонки одного модуля должны иметь одинаковую высоту. В вебе точного равенства добиться сложно, но как минимум каждая следующая колонка не должна быть длиннее предыдущей.
- Пустота — полноправный участник вёрстки, но она тоже обязана быть прямоугольной. Г-образная дыра под короткой колонкой ломает модуль.
- Соседние «этажи» страницы должны контрастировать друг с другом. Если контраста нет, не спасут ни линейки, ни дополнительные отступы.
- Каноническая конструкция вертикального модуля: иллюстрация → заголовок → текст → ссылки. Она совпадает с естественным порядком чтения. Поэтому при схлопывании двух колонок в одну на планшете и телефоне картинка уходит наверх, а не вниз.
- В горизонтальном модуле иллюстрация ставится справа. Слева она попадает «в подмышку» и отрывает заголовок от начала текста.
- Если у картинки есть направление — взгляд человека, движение — она должна «смотреть» на текст.
4. Поля формата
Здесь четыре правила, и первые два нарушают почти все:
- Вертикальные и горизонтальные поля не должны быть равны. Одинаковые поля со всех сторон — признак слабой, любительской, невнимательной вёрстки.
- Нижнее поле больше верхнего — примерно в полтора раза. Это поправка на «вес» содержания: блок с равными полями визуально съезжает вниз. Книжная пропорция полей: верх 30, низ 60, слева 20, справа 40.
- Межколонник меньше боковых полей. Иначе колонки разъезжаются сильнее, чем блок отступает от края экрана, и модуль перестаёт читаться как единое целое.
- Поля больше межстрочных просветов. Если формат маленький и на поля не хватает места — уменьшать надо кегль и интерлиньяж, а не поля.
Отдельно: плашка, рамка или линейка создают новый формат со своими полями. Отсюда следствие — расстояния над и под горизонтальной границей модуля не могут быть равны.
Порядок принятия решений
Не наоборот, а именно в такой последовательности:
длина строки → интерлиньяж → расстояние до заголовка → левое поле → верхнее поле → перепроверить всё заново
Сначала строится текстовый прямоугольник, и только потом он аккуратно ставится в формат. Если начать с полей, придётся всё переделывать.
Роли текста
Шесть ролей сверху вниз. Путать их — самая частая причина «блок выглядит странно, а почему непонятно». У каждой роли своя задача, свой кегль и своё место.
| Роль | Что делает | Кегль на десктопе | Отношение к тексту |
|---|---|---|---|
| Надзаголовок (бирка) | Ориентирует: рубрика, категория, тип материала | 14 / 600–700 | 0,75× |
| Заголовок | Привлекает и называет; главный якорь после картинки | 48 / 700 | 2,7× |
| Подзаголовок | Делит длинный текст на части | 24–30 / 600 | 1,3–1,7× |
| Лид (въезд) | Объясняет заголовок в двух предложениях, ведёт к действию | 20 / 400 | 1,1× |
| Основной текст | Само сообщение. Базовый кегль | 18 / 400 | 1× |
| Подпись | Поясняет картинку, иконку или контрол | 14–15 / 400 | 0,8× |
Что важно помнить
- Лид и надзаголовок — разные вещи. Надзаголовок стоит над заголовком и мельче текста. Лид стоит под заголовком и крупнее текста.
- Если абзац в блоке один — лида нет. Не плодите роли: единственный абзац это основной текст. Лид нужен только тогда, когда после него идёт ещё и длинный текст, от которого его надо отделить кеглем.
- Подпись обязана отличаться от основного текста кеглем или начертанием — иначе она перестаёт читаться как подпись. Точка в конце подписи не ставится.
- Заголовок — синтаксически цельный элемент. Дробить его на части разными стилями и выделять жирным кусок внутри — признак любительской вёрстки.
- В многострочном заголовке недопустимы висячие союзы и предлоги в конце строки.
Бирка: разбор одной роли
«Бирка делает заголовок законченным, одетым и более дорогим. Бирка для заголовка — то же, что засечка для буквы, карниз для здания, подпись для картинки. Как правило, бирка контрастирует с заголовком: жирный с нежирным, капитель со строчными».
— Артём Горбунов, «Типографика и вёрстка»
Зачем она нужна
Бирка решает две задачи. Первая — сориентировать: читатель мгновенно понимает, что за раздел перед ним, ещё не прочитав заголовок. Вторая, менее очевидная — укоротить сам заголовок.
Сравните. Без бирки: «Бухгалтерское сопровождение бизнеса под ключ». С биркой: надзаголовок «Услуги» плюс заголовок «Сопровождение бизнеса под ключ». Тело заголовка стало короче, а значит заметнее.
Бирка — один из четырёх способов сделать заголовок составным. Остальные три: подзаголовок под заголовком, двойной заголовок и графический маркер или знак.
Как её набирать
| Параметр | Десктоп | Планшет | Телефон | Почему так |
|---|---|---|---|---|
| Кегль | 14 | 13 | 12 | 0,7–0,8 от основного текста |
| Вес | 600–700 | 600 | 600 | мелкий кегль требует плотности |
| Регистр | капс | контраст со строчными заголовка | ||
| Трекинг | +0,06…+0,1em | капс без трекинга слипается | ||
| Интерлиньяж | 1,2 | бирка почти всегда в одну строку | ||
| Цвет | акцент или приглушённый | контраст к чёрному заголовку | ||
| Отбивка до заголовка | 8–12 | 8–10 | 8–10 | меньше, чем заголовок → текст |
| Длина | 1–3 слова, до 25 знаков | это метка, а не предложение | ||
Главное правило — расстояния
Бирка и заголовок должны читаться как один объект. Значит расстояние между ними обязано быть меньше, чем расстояние от заголовка до следующего элемента, и при этом больше, чем просветы между строками самого заголовка. Три числа выстраиваются в лесенку:
| Расстояние | Значение |
|---|---|
| Просвет между строками заголовка | ≈ 5 px |
| Бирка → заголовок | 8–12 px |
| Заголовок → текст | 16–24 px |
Если бирка отстоит от заголовка дальше, чем строки заголовка друг от друга, она отвяжется и начнёт читаться как самостоятельная надпись. Если ближе — слипнется.
Частые ошибки с биркой
- Кегль бирки равен кеглю основного текста — она перестаёт быть меткой и начинает спорить с текстом.
- Капс без трекинга: прописные слипаются в сплошную полосу.
- Отбивка до заголовка больше, чем просвет между строками заголовка.
- Точка или двоеточие в конце — бирка не предложение.
- Бирка длиной в целую фразу: тогда это уже не бирка, а подзаголовок, поставленный не с той стороны.
- Бирка тем же цветом и весом, что заголовок — нет контраста, читается как первая строка заголовка.
Шкала кеглей
Фиксированный набор вместо произвольных чисел. Правило жёсткое: если нужного размера в шкале нет — нужен не новый размер, а другой вес или другой цвет.
| Ступень, px | Роль | Вес | Интерлиньяж | Трекинг |
|---|---|---|---|---|
| 72 · 60 | Промо-заголовок, только десктоп | 700 | 1,05–1,1 | −0,02em |
| 48 · 36 | Заголовок блока | 700 | 1,1–1,2 | −0,015em |
| 30 · 24 | Подзаголовок | 600 | 1,2–1,3 | −0,01em |
| 20 · 18 | Лид и основной текст | 400 | 1,5–1,6 | 0 |
| 16 | Текст интерфейса, кнопки | 400–600 | 1,5 | 0 |
| 14 · 12 | Подписи, сноски, бирки | 500–700 | 1,2–1,4 | +0,08em |
Три жёстких порога, которые нельзя нарушать
- Интерлиньяж основного текста не ниже 1,5 ни на одном экране. Это нормативное требование W3C, а не вкус. Плотный абзац на телефоне достигается укорачиванием строки, а не сжатием интерлиньяжа.
- Кегль текста на телефоне не ниже 16. При меньшем Safari на iOS начинает автоматически зумить поля ввода, а это ломает вёрстку.
- Страница обязана читаться при ширине 320 px и при зуме 200 % без горизонтальной прокрутки.
Длина строки
Параметр, который все источники называют главным. Коридор: 45–75 знаков, идеал около 65. Потолок по W3C — 80 знаков.
| Десктоп | Планшет | Телефон | |
|---|---|---|---|
| Знаков в строке | 60–70 | 50–60 | 35–45 |
| Ограничитель | max-width: 62ch | 60ch | авто |
Ловушка. Уменьшая кегль, вы увеличиваете число знаков в строке. Если снизить текст с 22 до 18 px, не тронув ширину колонки, в ту же строку влезет уже не 60 знаков, а под 90 — и вы выйдете за пределы нормы. Кегль и max-width меняются только вместе.
Вариант A: настройка через Style Guide
Основной путь. Подходит большинству клиентов, не требует кода и правится через интерфейс.
Где: Внешний вид → Настройка → иконка Style Guide в левом верхнем углу окна предпросмотра.
Там задаются базовый шрифт, все уровни заголовков H1–H6, палитра и три глобальных стиля кнопок. Изменения применяются по всему сайту автоматически и наследуются как блоками Kadence, так и ядровыми блоками WordPress.
Что такое кламп и зачем он нужен
Кламп (CSS-функция clamp) — это текучий размер. Вместо трёх фиксированных значений для десктопа, планшета и телефона вы задаёте четыре числа: минимальный кегль, максимальный и диапазон ширин экрана, между которыми шрифт растёт. Между этими границами размер меняется плавно, а за ними упирается в потолок.
Практическая выгода: не нужно вручную подбирать значения под каждое устройство и не будет резких скачков на промежуточных ширинах, которых на реальных устройствах большинство.
В Kadence в каждом уровне типографики включается галка Clamped, после чего обычные поля «десктоп / планшет / телефон» игнорируются.
Таблица настроек Style Guide
| Уровень | Кламп мин → макс | Экраны | Вес | Интерлиньяж | Трекинг | Регистр |
|---|---|---|---|---|---|---|
| Базовый текст | 17 → 18 | 320–1440 | 400 | 1,6 / 1,55 / 1,5 | 0 | — |
| H1 — первый экран | 32 → 60 | 320–1440 | 700 | 1,05 / 1,1 / 1,15 | −0,02em | — |
| H2 — заголовок блока | 28 → 48 | 320–1440 | 700 | 1,1 / 1,15 / 1,2 | −0,02em | — |
| H3 — подзаголовок | 22 → 30 | 320–1440 | 600 | 1,25 | −0,01em | — |
| H4 | 20 → 24 | 320–1440 | 600 | 1,3 | 0 | — |
| H5 — заголовок карточки | 18 → 20 | 320–1440 | 600 | 1,4 | 0 | — |
| H6 — отдаём под бирку | 12 → 14 | 320–1440 | 700 | 1,2 | +0,08em | капс |
Два правила, которые нарушают чаще всего
Диапазон экранов у всех уровней должен быть одинаковым — 320–1440. Если у одного уровня поставить, например, 768–1440, он на телефоне залипнет на минимуме, пока остальные уже начали расти. Иерархия на узких экранах поедет, и найти причину будет тяжело.
H6 отдаём под бирку. Как заголовок шестого уровня в макетах он практически не нужен, а надзаголовок встречается в каждом втором блоке. Отдайте H6 под него — тогда бирка ставится одним кликом и везде выглядит одинаково. Только не забудьте включить капс и трекинг: без них она читается как обычная мелкая строка, а трекинг 0,08em на строчных буквах выглядит просто разреженным текстом.
Проверка иерархии
Связка H2 для заголовка блока и базового текста даёт отношение 2,7 на десктопе и 1,6 на телефоне. Оба значения попадают в норму 1,6–2,8. Если отношение меньше 1,5 — иерархии нет, заголовок держится только на жирности.
Вариант B: пресеты кегля и сниппет
Второй путь — через встроенные пресеты размера шрифта Kadence Blocks: кнопки МАЛ · СРЕД · БОЛ · XL · 2XL · 3XL в настройках блока. Нужен, когда клиент хочет управлять размерами прямо в редакторе, не заходя в Customizer, или когда на сайте много блоков с нестандартной типографикой.
Штатные значения пресетов
Это тоже клампы. Вот что они реально дают в пикселях:
| Кнопка | Телефон 390 | Планшет 820 | Десктоп от 1280 | Диапазон |
|---|---|---|---|---|
| МАЛ · SM | 12,8 | 13,5 | 14,4 | 12,8 → 14,4 |
| СРЕД · MD | 17,6 | 18,6 | 20 | 17,6 → 20 |
| БОЛ · LG | 28 | 29,7 | 32 | 28 → 32 |
| XL | 36 | 41 | 48 | 36 → 48 |
| 2XL | 40 | 50 | 64 | 40 → 64 |
| 3XL | 44 | 65,8 | 96 | 44 → 96 |
Выше 1280 px шрифт больше не растёт — верхнее значение и есть десктопное.
Какую кнопку жать для каждой роли
| Роль | Десктоп | Планшет | Телефон | Получится, px |
|---|---|---|---|---|
| Надзаголовок, бирка | МАЛ | МАЛ | МАЛ | 14,4 / 13,5 / 12,8 |
| Подпись, сноска | МАЛ | МАЛ | МАЛ | 14,4 / 13,5 / 12,8 |
| Основной текст и лид | СРЕД | СРЕД | СРЕД | 20 / 18,6 / 17,6 |
| Подзаголовок | БОЛ | БОЛ | БОЛ | 32 / 29,7 / 28 |
| Заголовок блока | XL | XL | БОЛ | 48 / 41 / 28 |
| Заголовок первого экрана | 2XL | 2XL | XL | 64 / 50 / 36 |
Переключать устройство нужно только у заголовков — там пресет уходит на ступень вниз. Иконки монитора, планшета и телефона стоят прямо над кнопками пресетов. Для мелких ролей переключать не нужно, кламп уменьшит их сам.
Дыра в шкале — единственное место, где нужны пиксели
Между МАЛ (14,4) и СРЕД (20) ступени нет. Именно туда попадают 16 и 18 — кегли кнопок и «плотного» основного текста. Четыре случая, когда переключаетесь на ввод числа:
- Кнопки. Средняя — 16, большая — 18. Пресета под них не существует.
- Основной текст, если 20 кажется крупным. СРЕД даёт ровно 20 на десктопе — это верхняя граница нормы, читается хорошо, но для плотных страниц лучше 18 числом.
- Если в блоке есть и лид, и основной текст. Оба попадут на СРЕД и сравняются. Один из двух делайте числом: лид 22 или текст 18.
- Заголовок ровно 36 на десктопе. XL даёт 48, БОЛ — 32, промежутка нет.
А вот подпись 15 px гнать числом не стоит: МАЛ даёт 14,4, разница меньше пикселя.
Что пресет не делает
Кнопка задаёт только кегль. Вес, интерлиньяж и трекинг остаются на вас — их выставляют отдельно, но тоже один раз на роль:
| Пресет и роль | Вес | Интерлиньяж | Трекинг | Регистр |
|---|---|---|---|---|
| МАЛ — бирка | 700 | 1,2 | +0,08em | капс |
| МАЛ — подпись | 400 | 1,5 | 0 | обычный |
| СРЕД — текст и лид | 400 | 1,6 | 0 | обычный |
| БОЛ — подзаголовок | 600 | 1,3 | −0,01em | обычный |
| XL — заголовок блока | 700 | 1,1 | −0,02em | обычный |
| 2XL и 3XL — промо | 700 | 1,05 | −0,02em | обычный |
Интерлиньяж заголовка — самое частое, что забывают выставить после смены пресета. Kadence по умолчанию оставляет полтора, а крупному заголовку нужно 1,1, иначе строки разъезжаются и заголовок перестаёт читаться как единый объект.
Сниппет: свои значения пресетов
Интерфейса для изменения шести пресетов у Kadence Blocks нет — только PHP-фильтр. Код кладётся в Code Snippets, WPCodeBox или в functions.php дочерней темы. В основную тему писать нельзя: при обновлении всё сотрётся.
Штатные значения — можно вставить как есть и править
add_filter( 'kadence_blocks_variable_font_sizes', 'change_kadence_blocks_variable_font_sizes', 15 );
function change_kadence_blocks_variable_font_sizes() {
return array(
'sm' => 'clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem)',
'md' => 'clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem)',
'lg' => 'clamp(1.75rem, 1.576rem + 0.543vw, 2rem)',
'xl' => 'clamp(2.25rem, 1.728rem + 1.63vw, 3rem)',
'xxl' => 'clamp(2.5rem, 1.456rem + 3.26vw, 4rem)',
'xxxl' => 'clamp(2.75rem, 0.489rem + 7.065vw, 6rem)',
);
}Наш рабочий вариант шкалы
Штатная шкала имеет два недостатка: СРЕД даёт 20 на десктопе (из-за чего основной текст приходится вбивать пикселями) и слишком агрессивный верх — 96 px для 3XL на реальном сайте почти никогда не нужен. Вот выправленная шкала: СРЕД даёт 17–18, а потолок спокойнее.
add_filter( 'kadence_blocks_variable_font_sizes', 'agency_kadence_font_sizes', 15 );
function agency_kadence_font_sizes() {
return array(
'sm' => 'clamp(0.89rem, 0.89rem + 0.01vi, 0.9rem)', // 14,3 → 14,4
'md' => 'clamp(1rem, 0.97rem + 0.13vi, 1.13rem)', // 16 → 18
'lg' => 'clamp(1.27rem, 1.15rem + 0.5vi, 1.76rem)', // 20,3 → 28
'xl' => 'clamp(1.8rem, 1.43rem + 1.67vi, 3.43rem)', // 28,8 → 55
'xxl' => 'clamp(2.02rem, 1.51rem + 2.32vi, 4.29rem)', // 32,4 → 68
'xxxl' => 'clamp(2.28rem, 1.58rem + 3.16vi, 5.36rem)', // 36,5 → 86
);
}Важная оговорка: ядровые блоки
Шкала Kadence Blocks не синхронизирована с размерами шрифта ядра WordPress, которые используют блоки «Абзац» и «Заголовок». Если на сайте есть и те и другие, ядровые правятся отдельно — через CSS-переменные:
add_action( 'wp_enqueue_scripts', function() {
$sizes = array(
'small' => 'clamp(0.89rem, 0.89rem + 0.01vi, 0.9rem)',
'medium' => 'clamp(1rem, 0.97rem + 0.13vi, 1.13rem)',
'large' => 'clamp(1.27rem, 1.15rem + 0.5vi, 1.76rem)',
'x-large' => 'clamp(1.8rem, 1.43rem + 1.67vi, 3.43rem)',
'xx-large' => 'clamp(2.02rem, 1.51rem + 2.32vi, 4.29rem)',
);
$css = ':root {';
foreach ( $sizes as $slug => $value ) {
$css .= '--wp--preset--font-size--' . $slug . ':' . $value . ';';
}
$css .= '}';
wp_register_style( 'agency-fluid-fonts', false );
wp_enqueue_style( 'agency-fluid-fonts' );
wp_add_inline_style( 'agency-fluid-fonts', $css );
} );Какой вариант выбирать
| Вариант A — Style Guide | Вариант B — пресеты и сниппет | |
|---|---|---|
| Кому | Большинству клиентов | Тем, кто сам собирает страницы |
| Код | Не нужен | Нужен доступ к сниппетам |
| Где правится | Customizer, одно место | В каждом блоке кнопкой |
| Риск разъехаться | Низкий | Средний: можно нажать не ту кнопку |
| Действует на ядровые блоки | Да | Нет, нужен второй сниппет |
Рекомендация: основным делайте вариант A, а кнопки размера трогайте только как исключение — когда в конкретном месте нужен размер, выбивающийся из общей схемы. Тогда вся типографика сайта живёт в одном месте. Вариант B подключайте, если клиент прямо просит управлять размерами из редактора.
Отступы: шкала пресетов Kadence
Тот же принцип, что с кеглями: не вводим числа, а выбираем ступень. В полях padding и margin переключите режим на Global — и вместо ввода цифр двигайте ползунок.
| Пресет | Нет | XXS | XS | SM | MD | LG | XL | XXL | 3XL | 4XL | 5XL |
|---|---|---|---|---|---|---|---|---|---|---|---|
| px | 0 | 8 | 16 | 24 | 32 | 48 | 64 | 80 | 104 | 128 | 160 |
Между 32 и 48 ступени нет, между 80 и 104 тоже — шкала намеренно грубая. Это не мешает: правило внутреннего и внешнего требует не точных чисел, а того, чтобы каждая следующая ступень была заметно больше предыдущей. Грубая шкала это как раз обеспечивает.
Вертикальные отбивки внутри блока
Главное упрощение регламента: эти значения одинаковы на десктопе, планшете и телефоне. Выставили один раз — на планшет и телефон переключаться не нужно.
| Между чем и чем | Пресет | px |
|---|---|---|
| Надзаголовок → заголовок | XXS | 8 |
| Заголовок → лид или текст | XS | 16 |
| Между абзацами | SM | 24 |
| Текст → кнопка | MD | 32 |
| После подзаголовка | XS | 16 |
| Иконка → её подпись (по горизонтали) | XS | 16 |
Получается лесенка с чистым удвоением: 8 → 16 → 32, между ними 24 для абзацев. Запомнить проще, чем 12 / 24 / 28 / 32, а работает так же.
Отдельное правило: верхние отступы у текстовых блоков обнуляем, воздух идёт только вниз. Тогда поведение предсказуемо: любой элемент отталкивает следующий, а не притягивается к предыдущему. Иначе отступы схлопываются и складываются непредсказуемо.
Что меняется по устройствам
| Между чем и чем | Десктоп | Планшет | Телефон |
|---|---|---|---|
| Картинка → надзаголовок (картинка сверху) | — | MD 32 | SM 24 |
| Кнопка → сноска | XL 64 | LG 48 | LG 48 |
| Перед подзаголовком в тексте | LG 48 | MD 32 | MD 32 |
| Между блоками страницы | 4XL 128 | 3XL 104 | XL 64 |
Поля блока
| Поле | Десктоп | Планшет | Телефон | Правило |
|---|---|---|---|---|
| Сверху | XL 64 | LG 48 | LG 48 | больше самого крупного внутреннего разрыва |
| Снизу | 3XL 104 | XXL 80 | XL 64 | на ступень-полторы больше верхнего |
| Слева и справа | XXL 80 | LG 48 | XS 16–20 | не равны вертикальным |
| Межколонник | XL 64 | — | — | обязательно меньше бокового поля |
В пресетах правило «низ больше верха» выполняется просто: берите верх на одну-две ступени ниже низа. XL и 3XL, LG и XXL, LG и XL.
Оговорка про телефон. На нём шкала слишком грубая, чтобы выдержать все ступени: разрыв «кнопка → сноска» 48 и верхнее поле 48 совпадают, промежуточной ступени между 32 и 48 нет. Правило в этом случае проверяется по нижнему полю — 64 против внутренних 48. Это допустимый компромисс: на маленьком формате кегль и интерлиньяж не должны быть большими, иначе на поля не останется места.
Горизонтальные отбивки
| Что | Десктоп | Планшет | Телефон | Правило |
|---|---|---|---|---|
| Между двумя кнопками | XXS 8 | XS 16 | XS 16 | меньше бокового паддинга кнопки |
| Между группами кнопок | SM 24 | SM 24 | SM 24 | вдвое больше, чем внутри группы |
| Между карточками в сетке | MD 32 | SM 24 | XS 16 | меньше паддинга самой карточки |
| Паддинг внутри карточки | MD 32 | SM 24 | SM 24 | больше зазора между карточками |
Готовая лесенка десктопа
Так выглядит правильно собранный блок. Ни одна ступень не повторяется, каждая заметно больше предыдущей:
| Расстояние | Пресет | px |
|---|---|---|
| Надзаголовок → заголовок | XXS | 8 |
| Заголовок → текст | XS | 16 |
| Между абзацами | SM | 24 |
| Текст → кнопка | MD | 32 |
| Перед подзаголовком | LG | 48 |
| Кнопка → сноска, межколонник, верхнее поле | XL | 64 |
| Боковые поля | XXL | 80 |
| Нижнее поле | 3XL | 104 |
| Между блоками страницы | 4XL | 128 |
Схема межсекционного воздуха. Весь воздух между секциями живёт в верхнем паддинге следующей секции, нижний равен нулю. Так проще: одно число управляет одним разрывом. Если задавать и низ, и верх, разрывы складываются и вы получаете то 128, то 176, то 152 в разных местах — и не понимаете, почему ритм страницы гуляет.
Исключение — секции с фоновой заливкой. Плашка читается как самостоятельный модуль, поэтому ей нужны собственные поля: верх XL 64, низ 3XL 104.
Кнопки
Главное правило
Высоту кнопки не задают. Ставить height: 48px нельзя: кнопка сломается на длинном тексте, на другом языке и при увеличенном шрифте у пользователя. Высота получается сама:
высота = padding-top + line-height текста + padding-bottom
Боковые паддинги вдвое больше вертикальных
Текст уже имеет воздух сверху и снизу за счёт интерлиньяжа, а слева и справа упирается в край буквой. Соотношение 2:1 это компенсирует и делает пятно кнопки оптически ровным. Так у всех: Material 16 ÷ 9, Bootstrap 12 ÷ 6, Tailwind 16 ÷ 8.
В пресетах Kadence правило запоминается одной фразой: боковой пресет — это вертикальный, удвоенный. На шкале удвоение всегда попадает в существующую ступень: XXS → XS, XS → MD, SM → LG. Соотношение 2:1 получается само.
| Размер в Kadence | Верх и низ | Лево и право | Кегль / вес | Высота | Где применять |
|---|---|---|---|---|---|
| Мал | XXS 8 | XS 16 | 14 / 500 | 36 | таблицы, тулбары, только десктоп |
| Сред — база | XS 16 | MD 32 | 16 / 600 | 52 | формы, карточки, весь интерфейс |
| Бол | XS 16 | MD 32 | 18 / 600 | 56 | главное действие блока |
| XL | SM 24 | LG 48 | 20 / 600 | 74 | только первый экран |
Сред и Бол отличаются только кеглем — паддинги у них одинаковые. Это нормально: у крупной кнопки воздух должен расти медленнее шрифта. От Мал к XL кегль вырос в 1,4 раза, а боковой паддинг в три. Так и задумано: паддинги нельзя масштабировать пропорционально кеглю, иначе крупная кнопка выглядит как маленькая под лупой.
Что ещё выставить
- Ширина — «Автоматически» на десктопе и планшете, «Полная» только на телефоне. Никогда не «Фиксировать».
- Минимальная ширина — 200 px для размера Бол, чтобы короткая надпись не сжимала кнопку в кубик. Задаётся числом, шкалы пресетов тут нет.
- Радиус — 8 для Сред и Бол, 6 для Мал, 10 для XL.
Если нужна широкая кнопка, задавайте min-width, а не раздувайте паддинги: на паддингах длинный текст раздует кнопку ещё сильнее, на min-width она просто перестанет сжиматься.
По устройствам
| Десктоп | Планшет | Телефон | |
|---|---|---|---|
| Базовый размер | Сред · 52 | Сред · 52 | Бол · 56 |
| Минимальная зона нажатия | 24 × 24 | 44 × 44 | 48 × 48 |
| Ширина главной кнопки | по содержимому | по содержимому | во всю колонку |
| Между двумя кнопками | 8–12 | 12 | 12–16, вертикально |
| От текста над кнопкой | 32 | 28 | 24 |
Полная ширина оправдана на телефоне. На десктопе кнопка во всю ширину колонки читается как баннер и начинает спорить с заголовком за внимание — порядок замечаемости ломается.
Иерархия действий
- Основная — залита акцентом. Одна на экран, в паре стоит справа, на телефоне сверху.
- Вторичная — контур 1 px, те же размеры и паддинги. Контраст границы к фону не ниже 3:1.
- Третичная — только текст, боковые паддинги 8, но высота и зона нажатия прежние.
- Опасное действие делается контурным красным, а не залитым: залитый красный притягивает нажатие.
- Текст кнопки — глагол с объектом, 1–3 слова: «Оформить заказ», а не «Отправить заявку на обратный звонок».
Состояния
| Состояние | Что меняется | Значение |
|---|---|---|
| Наведение | Фон темнее | на 8–10 % |
| Нажатие | Фон темнее и сдвиг вниз | 15 % · 1 px |
| Фокус с клавиатуры | Обводка и её отступ | 2 px · offset 2 px |
| Недоступна | Прозрачность, курсор | 45 % · not-allowed |
| Загрузка | Ширина фиксируется | спиннер вместо текста |
outline: none без замены — прямое нарушение WCAG 2.4.7. Убирать обводку можно только вместе с добавлением своей. Использовать :focus-visible, а не :focus — тогда обводка появится при Tab, но не при клике мышью.
И отдельно: надпись в кнопке центрируется по высоте строчных букв, а не по кегельной площадке. Середина x-высоты должна совпадать с серединой кнопки. Если центрировать по площадке, текст визуально сядет выше центра из-за места, зарезервированного под выносные элементы.
Порядок работы: настройка и сборка
Часть первая. Настроить сайт — один раз, полчаса
- Открыть Style Guide. Внешний вид → Настройка → иконка Style Guide слева вверху окна предпросмотра.
- Заполнить типографику по таблице варианта A: кламп, диапазон экранов 320–1440, вес, интерлиньяж и трекинг для каждого уровня.
- Отдать H6 под бирку — включить капс и трекинг +0,08em.
- Настроить три кнопки: Base — залитая, Secondary — контурная, Outline — текстовая.
- Проверить контраст: 4,5:1 для обычного текста, 3:1 для крупного и для границы контурной кнопки.
- При необходимости — подключить сниппет варианта B.
Часть вторая. Собрать блок — каждый раз, пять минут
Порядок именно такой: сначала строится текстовый прямоугольник, и только потом он ставится в формат.
- Ограничить длину строки. У абзаца max-width так, чтобы в строке было 60–70 знаков. Это первое решение, от него зависит всё остальное.
- Выбрать кегли. Бирка и подпись — МАЛ. Текст и лид — СРЕД. Подзаголовок — БОЛ. Заголовок блока — XL, на телефоне переключить на БОЛ.
- Выставить интерлиньяж. Пресет кегля его не трогает: заголовку 1,1, подзаголовку 1,3, тексту 1,6, бирке 1,2.
- Поставить четыре отбивки: бирка → заголовок XXS, заголовок → текст XS, между абзацами SM, текст → кнопка MD. На планшете и телефоне не трогать.
- Отделить сноску: кнопка → сноска XL на десктопе, LG на планшете и телефоне.
- Задать поля блока: сверху XL, снизу 3XL, по бокам XXL. На планшете LG / XXL / LG, на телефоне LG / XL / XS.
- Межколонник XL — обязательно меньше боковых полей. Выравнивание колонок «Растянуть», чтобы картинка и текст были равной высоты.
- Кнопка: размер Бол, ширина «Автоматически», на телефоне — «Полная».
- На планшете и телефоне поставить картинку первой: иллюстрация, заголовок, текст, кнопка.
Шпаргалка на один экран
Двенадцать строк — больше держать в голове не нужно.
| Что | Что нажимать |
|---|---|
| Надзаголовок, подпись | кегль МАЛ |
| Основной текст, лид | кегль СРЕД |
| Подзаголовок | кегль БОЛ |
| Заголовок блока | кегль XL · на телефоне БОЛ |
| Бирка → заголовок | отступ XXS |
| Заголовок → текст | отступ XS |
| Между абзацами | отступ SM |
| Текст → кнопка | отступ MD |
| Кнопка → сноска | отступ XL · LG на узких |
| Поля блока: верх / низ / бока | XL / 3XL / XXL |
| Межколонник | отступ XL |
| Кнопка | размер Бол, ширина Авто |
Прогон готовой страницы: 15 шагов
Всё, что нужно, — инспектор браузера: правый клик по элементу, «Просмотреть код», вкладка Computed показывает реальные значения, а не те, что вы задавали.
Замер
- Снять кегли. Кликнуть по заголовку, лиду, тексту, подписи, надписи кнопки. Смотреть font-size, font-weight, line-height. Выписать столбиком.
- Проверить контраст заголовка и текста. Кегль заголовка поделить на кегль текста: должно получиться 1,6–2,8. Меньше 1,5 — иерархии нет.
- Посчитать длину строки. Скопировать самую длинную строку основного текста и посчитать знаки. Норма 45–75.
- Снять все вертикальные отбивки по каждой соседней паре элементов.
- Снять поля блока и межколонник.
- Снять кнопку: паддинги по четырём сторонам, итоговую высоту, кегль и вес надписи.
Проверка композиции
- Построить лестницу. Выписать все просветы от мелкого к крупному. Каждое следующее строго больше предыдущего, равных пар нет.
- Найти самый большой разрыв внутри блока. Он обязан стоять на настоящей смысловой границе. Если он между заголовком и текстом — блок распадается надвое.
- Сравнить межколонник с боковым полем. Межколонник должен быть меньше.
- Сравнить верхнее и нижнее поле. Нижнее больше примерно в полтора раза; равные — ошибка.
- Проверить высоту колонок. Низ картинки и низ текстовой колонки на одной линии, под блоком нет Г-образной пустоты.
- Прищуриться. Первой должна замечаться картинка, второй заголовок, третьей кнопка. Если кнопка вырывается вперёд — она слишком крупная.
Доступность
- Зум 200 %. Текст не обрезан, горизонтальной прокрутки нет.
- Ширина окна 320 px. Страница читается, ничего не уезжает вбок, кнопки не меньше 48 × 48.
- Контраст и фокус. 4,5:1 для текста, 3:1 для крупного и границ. Пройти Tab по всем кнопкам и ссылкам — обводка должна быть видна на каждой.
Типичные ошибки и как их ловить
| Симптом | Настоящая причина | Что делать |
|---|---|---|
| Блок «распадается надвое», хотя все отступы вроде нормальные | Самый большой разрыв внутри блока стоит между заголовком и текстом, а не на смысловой границе | Уменьшить отбивку заголовок → текст до XS, увеличить разрыв перед сноской до XL |
| Заголовок «не читается как заголовок» | Отношение кегля заголовка к тексту меньше 1,5 | Не увеличивать заголовок, а уменьшить текст. Чаще всего крупен именно текст |
| Бирка висит сама по себе | Отбивка бирки больше, чем просвет между строками заголовка | Интерлиньяж заголовка до 1,1, отбивка бирки XXS |
| Заголовок рвёт слова пополам в карточке | Уровень заголовка выбран по размеру, а не по роли: в колонке 200 px стоит H3 | Заголовок карточки — это H5, а не H3 |
| В тёмной теме часть текста почти не видна | У блока прописан цвет в hex вместо палитры | Заменить на токен палитры: палитра переключается вместе с темой, hex — нет |
| Блок визуально съехал вниз | Верхнее и нижнее поля равны | Низ на ступень-полторы больше верха |
| Колонки «разъезжаются» | Межколонник больше бокового поля страницы | Межколонник XL при боковых полях XXL |
| Под блоком Г-образная дыра | Колонки разной высоты | Выравнивание «Растянуть», картинке height 100 % и object-fit: cover |
| Кнопка перебивает заголовок | Кнопка растянута на всю ширину колонки на десктопе | Ширина «Автоматически» плюс min-width 200 |
| Ритм страницы гуляет: то 128, то 176 | Воздух задан и снизу одной секции, и сверху следующей — они складываются | Низ секций обнулить, весь воздух держать в верхнем паддинге следующей |
Про тёмную тему отдельно
Это ошибка, которая всплывает позже всех и портит впечатление сильнее всего. Правило простое: в блоках не должно быть ни одного цвета, записанного в hex. Только токены палитры.
Палитра — это переменные, значения которых тема подменяет при переключении в тёмный режим. Записанный руками #777777 останется тёмно-серым и на тёмном фоне превратится в невидимку. Проверять просто: пройтись по блокам и убедиться, что в поле цвета выбран кружок палитры, а не введён код.
Производительность: о чём предупредить клиента
Kadence Blocks генерирует персональное CSS-правило на каждый блок с уникальным именем класса. Общих классов он не использует. На странице из 500 блоков это выливается в 2000+ правил и сотни media-запросов, которые по умолчанию встраиваются прямо в HTML.
Реальный замер с боевого лендинга: HTML страницы 1,73 МБ, из них инлайн-CSS 534 КБ, только Kadence Blocks — 432 КБ и 2455 правил при 617 media-запросах.
Причём заметная часть — балласт, который печатается независимо от того, пользуетесь вы функцией или нет. Например, правило для подсветки текста маркером выводится для каждого заголовка на странице, даже если маркер не используется нигде.
Что с этим делать
- Удаление неиспользуемого CSS. Плагины вроде Perfmatters собирают для каждой страницы только те правила, которые реально применяются. Метод вывода при большом объёме ставьте «Файл», а не «Встроить»: файл кэшируется браузером между страницами.
- Поведение исходных стилей — Delay, не «Удалить». На сайтах с тёмной темой, аккордеонами, табами и формами полное удаление выбросит стили динамических классов, которых анализатор не видит.
- Обязательные исключения: стили тёмной темы. Они применяются по системной настройке ещё до любого действия пользователя, и отложенная загрузка даст белую вспышку или неправильную тему.
- Не держать два оптимизатора CSS одновременно. Это худший из вариантов: непонятно, чья очистка сработала и что сломало вёрстку.
- Сбрасывать кэш очищенного CSS после каждой правки страницы или Style Guide. Иначе будете видеть старое оформление и думать, что правки не применились.
Сколько блоков — это много
500+ блоков на одну страницу — много. Самое очевидное место для сокращения: несколько текстовых блоков подряд внутри одной колонки почти всегда сводятся в один блок с несколькими абзацами. Каждый убранный блок — минус несколько правил и минус media-запросы.
Итог
Регламент сводится к трём мыслям.
Первая. Все размеры задаются один раз на весь сайт, а при сборке вы выбираете роль, а не число. Тогда работа занимает минуты и её может делать любой обученный человек.
Вторая. Отступы образуют лесенку, где каждая следующая ступень заметно больше предыдущей, а самый большой разрыв стоит на настоящей смысловой границе. Это и есть правило внутреннего и внешнего в практическом виде.
Третья. Числа — следствие, принципы — причина. Если запомнить только таблицы, вы застрянете на первом же случае, которого в них нет. Если понять принципы, таблицы можно будет вывести заново.