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

В типографике такие цифры называются минускульными (или старостильными). В печатных книгах и художественной литературе это выглядит стильно, но на современном коммерческом сайте создает эффект «пляшущего забора». Заказчик может не разбираться в тонкостях верстки, но подсознательно считывает такой визуальный шум как неаккуратность и дешевку.

Почему так происходит

Многие гарнитуры (особенно классические засечные шрифты вроде Georgia, Merriweather или некоторые акцидентные шрифты из Google Fonts) по умолчанию отдают браузеру именно минускульные символы. В самом редакторе Elementor стандартных переключателей для типа цифр нет, поэтому многие веб-мастера либо меняют шрифт на более простой, либо пытаются подгонять блоки вручную.

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

Решение: магия CSS в Elementor

Чтобы вернуть цифрам идеальную геометрию на всем сайте или в конкретном блоке Elementor, достаточно задействовать свойство font-variant-numeric.

Если нужно исправить отображение в конкретном виджете Elementor, заходим в настройки виджета: Расширенные (Advanced) → Пользовательский CSS (Custom CSS) и вставляем следующий код:

selector {
  font-variant-numeric: lining-nums proportional-nums;
  -moz-font-feature-settings: "lnum" 1, "pnum" 1;
  -webkit-font-feature-settings: "lnum" 1, "pnum" 1;
  font-feature-settings: "lnum" 1, "pnum" 1;
}

Если вы хотите раз и навсегда решить эту проблему для всего сайта, вставьте этот фрагмент в глобальные стили темы или в Кастомайзер (Внешний вид → Настроить → Дополнительный CSS):

/* Включаем ровные (маюскульные) цифры для всего сайта */
html, body {
  font-variant-numeric: lining-nums proportional-nums;
  -moz-font-feature-settings: "lnum" 1, "pnum" 1;
  -webkit-font-feature-settings: "lnum" 1, "pnum" 1;
  font-feature-settings: "lnum" 1, "pnum" 1;
}

Как это работает

• lining-nums — включает маюскульные (прямые и равные по высоте) цифры.

• proportional-nums — делает пропорциональные отступы между цифрами, чтобы они гармонично смотрелись в массиве текста.

• font-feature-settings — дублирует настройки через OpenType-фичи для поддержки в старых версиях браузеров на базе WebKit и Gecko.

Итог

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