Как плавно масштабировать шрифты WordPress — гибкая типографика

Сделать текст красивым на любом экране не так просто, как кажется. Долгое время веб-дизайнеры использовали точки останова медиа-запросов для изменения размера начертания. Но этот подход быстро становится беспорядочным по мере появления все большего количества устройств и экранов.

Начиная с WordPress 6.1 (выпущен в ноябре 2022 года), теперь есть более эффективный способ: гибкая типографика. Она автоматически кастомизирует размеры шрифтов, определенные в вашем файле theme.json, чтобы они плавно масштабировались, независимо от ширины или высоты экрана.

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

В этой статье я расскажу, как работает гибкая типографика, чем она отличается от традиционных точек разрыва и как ее реализовать в WordPress с помощью theme.json и CSS.

Но сначала посмотрим, как раньше ее обрабатывали и почему гибкая типографика является таким большим улучшением.

Типографика с точками разрыва против плавной типографики

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

Типографика с точками разрыва

Точки разрыва — это чаще определенные диапазоны ширины окна просмотра, определяемые в пикселях. Устанавливают 3 основные, нацеленные на экраны мобильных устройств, ноутбуков и десктопов

Вот типичные настройки точек разрыва для ноутбуков в файле CSS:

@media (min-width: 48em) and (max-width: 74.9375em) {
  body {
    font-size: 1.125rem;
    line-height: 1.6;
  }
  h1 {
    font-size: 2rem;
  }
}

Когда окно просмотра уменьшается, текст меняет размер неравномерными скачками. Такое «ступенчатое» поведение часто приводит к неловкому или непредсказуемому масштабированию. Это не идеально для плавной и последовательной типографики.

Гибкая типографика

С введением свойства CSS clamp() в 2019 году, наряду с единицами окна просмотра (vw и vh), стало возможным плавное и автоматическое масштабирование.

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

Вот пример среднего размера шрифта с использованием clamp():

.has-medium-font-size {
  font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
}

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

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

Но плавное изменение размера — это только начало. Гибкая типографика предлагает ряд других преимуществ, которые упрощают создание согласованных и доступных дизайнов.

Плюсы гибкой типографики

При работе с гибкой типографикой становятся очевидными следующие преимущества.

Адаптивность по умолчанию

Текст автоматически масштабируется в соответствии с окном просмотра. Это устраняет необходимость в точках перерыва.

Более простая поддержка

Без необходимости использования нескольких медиа-запросов код остается простым и читабельным. Вы можете определить размеры шрифта с помощью простой шкалы «T-shirt», от маленького до очень большого, и применять их последовательно во всей теме.

Последовательный дизайн

Убедитесь, что размеры шрифтов остаются одинаковыми на всем сайте, как в целом, так и в отдельных блоках, если это необходимо.

Улучшенная доступность и читаемость

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

Современный дизайн

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

Контроль над скоростью масштабирования

Возможность контролировать скорость увеличения или уменьшения текста устанавливается предпочтительным значением, которое изменяется в зависимости от ширины окна просмотра.

Поддержка браузерами

Функция clamp() хорошо поддерживается всеми современными браузерами, включая текущие версии Chrome, Edge, Firefox и Safari.

Однако, если нужна 100% поддержка, все равно понадобится включить резервный вариант для устаревших веб-проводников, таких как Internet Explorer 11 и версии Safari и Chrome до 2020 года.

Вот как это сделать:

/* Fallback (for IE11 and other old browsers) */
li {
  font-size: 1.25rem; 
}

/* Preferred (modern browsers) */
li {
  font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);
}

Всегда размещайте резервный вариант перед современным объявлением. Новые браузеры игнорируют старую строку и автоматически применяют значение clamp(), обеспечивая плавное поведение без дополнительных условий.

Как работает гибкая типографика

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

Функция clamp() использует эти 3 значения в одном объявлении:

font-size: clamp(min, preferred, max);

Это гарантирует, что текст никогда не будет слишком маленьким на небольших экранах или слишком большим на широких. Например:

font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);

В этом примере размер шрифта начинается с 1rem, плавно увеличивается по мере расширения области просмотра и перестает увеличиваться при достижении 1,25rem.

Как WordPress обрабатывает это

ВордПресс делает всю тяжелую работу за вас. Вместо того, чтобы вручную вычислять эти значения, можете определить размеры шрифтов непосредственно в theme.json.

Вот упрощенный пример того, как WordPress представляет размер шрифта в JSON:

{
  "fluid": {
    "min": "1rem",
    "max": "1.25rem"
  },
  "name": "Medium",
  "size": "1.125rem",
  "slug": "medium"
}

На основе этого WP автоматически генерирует CSS:

font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);

Общие термины

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

• em — относительно размера шрифта родительского элемента. Размеры складываются посредством вложения.
• rem — относительно размера шрифта корневого (html) элемента. Масштабируется одинаково по всему сайту.
• vw — 1% от ширины окна просмотра. Используется для масштабирования по ширине.
• vh — 1% от высоты окна просмотра. Используется для масштабирования по высоте.

Несколько слов о theme.json

theme.json основан на данных, поэтому он генерирует CSS автоматически, а не требует ручного написания.

Как и следовало ожидать, ядро ВордПресс включает файл theme.json. Он устанавливает базовые свойства, используемые собственным документом theme.json темы блока. Так WordPress реализует гибкую типографику.

Как WordPress использует гибкую типографику в TT5

Когда файл theme.json темы блока содержит настройку “fluid”: true, WP автоматически генерирует правила гибкой типографики с помощью функции CSS clamp(). Это осуществляется с помощью встроенного алгоритма. Он рассчитывает плавное масштабирование для каждого размера шрифта.

{
  "settings": {
    "typography": {
      "fluid": true
    }
  }
}

При включенной плавной типографике TT5 определяет 5 предустановленных размеров шрифта. Каждый из них включает минимальные и максимальные значения. Их WP использует для генерации окончательного CSS с помощью функции clamp().

small:

• Theme.json: 0.875rem.
• CSS: clamp(0.875rem, 0.8125rem + 0.2vw, 1rem).

medium:

• Theme.json: min: 1rem, max: 1.125rem.
• CSS: clamp(1rem, 0.9375rem + 0.25vw, 1.125rem).

large:

• Theme.json: min: 1.125rem, max: 1.375rem.
• CSS: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem).

x-large:

• Theme.json: min: 1.75rem, max: 2rem.
• CSS: clamp(2.25rem, 1.75rem + 1.5vw, 3rem).

xx-large:

• Theme.json: min: 2.15rem, max: 3rem.
• CSS: clamp(3rem, 2.25rem + 2vw, 4rem).

Практические примеры

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

Для этих примеров я буду использовать дочернюю тему TT5.

Увеличение всех размеров шрифта на 25%

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

Вариант 1 — использование theme.json

Хотя нет единого переключателя для масштабирования всех шрифтов, можете вручную увеличить каждый размер на 25%. Вот пример конфигурации:

"typography": {
  "fontSizes": [
    {
      "fluid": false,
      "name": "Small",
      "size": "1.09375rem",
      "slug": "small"
    },
    {
      "fluid": { "max": "1.40625rem", "min": "1.25rem" },
      "name": "Medium",
      "size": "1.25rem",
      "slug": "medium"
    },
    {
      "fluid": { "max": "1.71875rem", "min": "1.40625rem" },
      "name": "Large",
      "size": "1.725rem",
      "slug": "large"
    },
    {
      "fluid": { "max": "2.5rem", "min": "2.1875rem" },
      "name": "Extra Large",
      "size": "2.1875rem",
      "slug": "x-large"
    },
    {
      "fluid": { "max": "3.75rem", "min": "2.6875rem" },
      "name": "Extra Extra Large",
      "size": "2.6875rem",
      "slug": "xx-large"
    }
  ]
}

Это соответствует шаблону TT5. Маленький размер остается фиксированным, а другие плавно масштабируются.

WordPress по-прежнему вычисляет предпочтительное (плавное) значение между минимальным и максимальным.

Вариант 2 — использование style.css

В качестве альтернативы можете масштабировать все глобально с помощью одной строки в таблице стилей:

:root {
  font-size: 125%;
}

Кастомный гибкий шрифт для одного блока

Вы также можете применять плавное масштабирование выборочно.

Например, чтобы все элементы списка (core/list) использовали средний размер вместо большого по умолчанию, добавьте следующее в ваш theme.json:

"styles": {
  "blocks": {
    "core/list": {
      "typography": {
        "fontSize": "var:preset|font-size|medium"
      }
    }
  }
}

Настройка плавной типографики в style.css

Если работаете с классической темой, то будете определять собственные значения clamp() непосредственно в style.css.

Например, вот как вы можете увеличить элементы списка на 125% от большого размера шрифта:

li {
  font-size: clamp(1.725rem, 1.725rem + 0.17vw, 1.71875rem) !important;
}

Это отображает более крупный размер шрифта для элементов списка, установленный в файле CSS. Как и следовало ожидать, если работаете с классической темой, нужно будет использовать свойство clamp() в файле styles.css.

Гибкое расстояние

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

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

TT5 использует эти конфигурации для определения размеров пространства.

"spacing": {
  "defaultSpacingSizes": false,
  "spacingSizes": [
    { "name": "Tiny", "size": "10px", "slug": "20" },
    { "name": "X-Small", "size": "20px", "slug": "30" },
    { "name": "Small", "size": "30px", "slug": "40" },
    { "name": "Regular", "size": "clamp(30px, 5vw, 50px)", "slug": "50" },
    { "name": "Large", "size": "clamp(30px, 7vw, 70px)", "slug": "60" },
    { "name": "X-Large", "size": "clamp(50px, 7vw, 90px)", "slug": "70" },
    { "name": "XX-Large", "size": "clamp(70px, 10vw, 140px)", "slug": "80" }
  ]
}

Первые 3 размера (tiny, x-small, small) являются фиксированными, а более крупные масштабируются плавно с помощью clamp().

Заключение

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