Вариативные шрифты

Вступление

Чтобы ускорить загрузку сайта, существует множество методов. Один из самых эффективных — сокращение количества и объема загружаемых файлов. Для этого мы оптимизируем исходный код, уменьшаем вес графики и выбираем наиболее подходящие форматы файлов. Иногда для улучшения производительности мы используем CSS для создания графики. Даже дизайнеры стараются минимизировать количество вариаций шрифтов на странице.

В моей компании долгое время действовало ограничение на подключение файлов шрифтов: не более трёх. Это связано с тем, что мы работаем с клиентами из разных стран, где скорость интернета может быть низкой. Однако дизайнеры часто создают макеты с большим количеством начертаний шрифтов. Как быть в таких случаях?

Самый простой способ — это использование вариативных шрифтов. Что представляют собой такие шрифты? Если на странице применяются шрифты в вариантах 400, 400 italic, 700 и 700 italic, то нужно подключить четыре отдельных файла. В случае же с вариативным шрифтом достаточно одного.

Помимо уменьшения количества HTTP-запросов и объема файлов, вариативные шрифты предоставляют дизайнерам новые возможности. Поскольку все начертания объединены в один файл, можно использовать не только стандартные начертания, но и промежуточные значения, такие как font-weight: 444; или промежуточные значения наклона. Более того, можно анимировать изменение начертания.

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

видео

Воспроизвести видео

Выбор шрифта

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

Часто используемые оси:

• wght — вес (100-900)
• wdth — ширина (75%-125%)
• opsz — оптический размер
• slnt — наклон (-12°-0°)
• ital — курсив (0-1)

При выборе шрифта важно обращать внимание на диапазоны значений этих осей. Если у шрифта диапазон оси wght варьируется от 100 до 400, его функциональность будет ограничена. Однако, если этот диапазон составляет от 100 до 900, такой шрифт станет отличным выбором.

Шрифты можно найти на различных онлайн-сервисах, я предпочитаю использовать Google Fonts.

Подключение шрифта

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

При использовании ссылки проследите, какой именно шрифт вы подключаете. Например, у Google Fonts в параметрах должны указываться настраиваемые оси.

Например этот шрифт вариативный, так как в параметрах указаны оси slnt и wght.

<link href="https://fonts.googleapis.com/css2?family=Commissioner:slnt,wght@-12..0,100..900&display=swap" rel="stylesheet">

А этот шрифт обычный.

<link href="https://fonts.googleapis.com/css2?family=Commissioner:wght@100..900&display=swap" rel="stylesheet">

Для подключения шрифта локально скачайте нужный шрифт и разместите файл в папке вашего проекта. В CSS-коде для подключения используется правило @font-face, аналогичное тому, что применяется для обычных шрифтов.

Пример подключения вариативного шрифта с осью жирности:

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900; /* Диапазон жирности */
  font-display: swap;
  src: url(../fonts/inter.woff2) format('woff2-variations');
}

Или, если шрифт поддерживает плавный наклон через ось slnt:

@font-face {
  font-family: 'Variable';
  src: url(../fonts/variable.woff2) format('woff2');
  font-weight: 100 900; /* Диапазон жирности */
  font-style: oblique 0deg 10deg;  /* Диапазон наклона */
  font-display: swap;
}

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

Примеры использования

Как изменить жирность текста?

Для этого используется свойство font-variation-settings, которое объединяет настройки шрифта по различным осям. Например, чтобы изменить жирность, можно использовать такие правила:

.bold {
  font-variation-settings: "wght" 700;
}

.extra-bold {
  font-variation-settings: "wght" 800;
}

/* Можно также задать промежуточные значения, например */
.my-heading {
  font-variation-settings: "wght" 750;
}

Свойство font-variation-settings похоже на font, но позволяет более точно управлять осями вариативного шрифта. Вместо использования font-variation-settings, можно применить font-weight:

.bold {
  font-weight: 700;
}

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

Также можно задать несколько осей одновременно:

.universal-way {
  font-variation-settings: "wght" 800, "slnt" -10;
}

В этом примере жирность задаётся значением «800», а наклон — «−10». Это позволяет более гибко настраивать внешний вид текста.

Как я уже говорил шрифт можно анимировать:

.animated-button {
  font-family: 'Commissioner', sans-serif;
  font-variation-settings: "slnt" 0;
  transition: font-variation-settings 0.25s ease-in-out;
}

.animated-button:hover {
  font-variation-settings: "slnt" -7;
}

.animated-button {
  font-family: 'Commissioner', sans-serif;
  font-variation-settings: "wght" 500, "slnt" 0; /* задаём и вес, и наклон */
  transition: font-variation-settings 0.3s ease;
}

.animated-button:hover {
  font-variation-settings: "slnt" -10; /* только наклон! Вес сбрасывается! */
}

.animated-button {
  font-family: 'Commissioner', sans-serif;
  font-weight: 500; /* управляем весом отдельно */
  font-variation-settings: "slnt" 0; /* управляем только наклоном */
  transition: font-variation-settings 0.3s ease; /* анимируем только наклон */
}

.animated-button:hover {
  font-variation-settings: "slnt" -10; /* вес остаётся 500 */
}

.animated-button {
  --weight: 500;
  --slant: 0;
  font-family: 'Commissioner', sans-serif;
  font-variation-settings: "wght" var(--weight), "slnt" var(--slant);
  transition: font-variation-settings 0.3s ease;
}

.animated-button:hover {
  --slant: -10;
  --weight: 600; /* можно анимировать несколько осей одновременно */
}

Для корректной работы свойства transition необходимо указать только то свойство, которое подлежит анимации. Это важно для оптимизации производительности страницы. Особенно важно для пользователей с устройствами, имеющими ограниченные технические характеристики. Кроме того, избыточная анимация может вызвать проблемы при изменении расположения элементов. Например, при повороте мобильного устройства.

Свойство transition работает с любыми свойствами, имеющими промежуточные значения. Главное чтобы были числовые значения для интерполяции. Если же используются ключевые слова вместо чисел, анимации не будет.

Ограничения

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

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

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

Третье ограничение: поддержка браузерами. В целом поддержка хорошая. Но лучше определить целевую аудиторию и использовать фоллбек.

/* Статический шрифт для браузеров без поддержки вариативных шрифтов */
@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url(../fonts/Inter.woff2) format('woff2');
}

/* Вариативный шрифт */
@font-face {
  font-family: 'Inter variations';
  font-weight: 100 900; /* Диапазон жирности */
  font-style: normal;
  font-display: swap;
  src: url(../fonts/inter-variations.woff2) format('woff2-variations');
}

body {
  font-family: 'Inter', sans-serif;
}

@supports (font-variation-settings: normal) {
  /* Усовершенствованные стили для современных браузеров */
  body {
    font-family: 'Inter variations', sans-serif;
  }
}

Итоги

Вариативные шрифты становятся всё более популярными, а браузеры совершенствуют свою работу с новыми технологиями.

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

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