Как анимировать начертание вариативного шрифта с помощью CSS

Анимировать начертание вариативного шрифта в CSS можно через ось веса wght: подключите variable font в @font-face, задайте начальное и конечное значение font-weight или font-variation-settings, а затем используйте transition либо @keyframes. Такой подход плавно меняет толщину букв без подмены файла шрифта и подходит для заголовков, кнопок и интерактивных элементов.

Актуально на 22 июля 2026 года. В статье рассмотрены подключение вариативного файла, настройка оси wght, анимация при наведении и по ключевым кадрам, работа с другими осями, доступность и типичные ошибки.

Вариативный, или variable, шрифт хранит несколько вариантов начертания в одном файле. Вместо отдельных файлов для Light, Regular, Semibold и Bold дизайнер получает непрерывный диапазон параметров, называемых осями вариации. Базовая ось wght отвечает за вес: чем выше ее значение, тем плотнее и толще выглядят штрихи.

Начертание в таком контексте — не только название стиля вроде «полужирный». Это конкретное состояние шрифта на шкале веса, например 300, 400 или 700. Если гарнитура поддерживает непрерывные значения, браузер может отрисовать и промежуточный вес 523. Именно поэтому изменение толщины выглядит плавным, а не скачкообразным.

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

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

Нужен файл вариативного шрифта в формате, который поддерживает ваш проект, например WOFF2, и сведения о диапазоне его осей. Также подготовьте тестовую HTML-страницу или компонент интерфейса, где текст можно проверить на разных размерах. Для первого эксперимента выбирайте короткий заголовок: так проще заметить изменение формы и оценить влияние на верстку.

Сначала объявите гарнитуру через @font-face и укажите диапазон оси wght. Практическая заготовка выглядит так: @font-face { font-family: 'Studio Sans'; src: url('/fonts/studio-sans.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }. Здесь диапазон 200 800 означает, что браузеру разрешены все значения веса внутри этого интервала, если они поддерживаются файлом.

После подключения назначьте шрифт элементу: .title { font-family: 'Studio Sans', sans-serif; font-weight: 350; }. На этом этапе проверьте, действительно ли браузер использует variable font, а не резервную гарнитуру. Если текст выглядит одинаково при значениях 300 и 700, проверьте путь к файлу, имя семейства и описание диапазона.

Для простого hover-эффекта задайте начальный вес, конечный вес и transition. Пример: .title { font-family: 'Studio Sans', sans-serif; font-weight: 350; transition: font-weight 300ms ease; } .title:hover { font-weight: 750; }. При наведении браузер постепенно изменит положение на оси веса за 300 миллисекунд.

Если нужно управлять сразу несколькими параметрами, используйте font-variation-settings. Например: .title { font-variation-settings: 'wght' 350, 'wdth' 100; transition: font-variation-settings 300ms ease; } .title:hover { font-variation-settings: 'wght' 750, 'wdth' 92; }. Такой вариант дает точный контроль, но делает CSS сильнее зависящим от конкретных осей шрифта.

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

Если изменение должно происходить автоматически, задайте ключевые кадры. Пример: @keyframes weightPulse { 0%, 100% { font-weight: 300; } 50% { font-weight: 750; } } .hero-title { animation: weightPulse 2.4s ease-in-out infinite; }. Значение infinite повторяет цикл, а функция ease-in-out смягчает движение в начале и конце.

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

Чтобы начертание изменилось один раз, уберите infinite и задайте animation-fill-mode: forwards. Пример: @keyframes revealWeight { from { font-weight: 250; } to { font-weight: 700; } } .hero-title { animation: revealWeight 700ms cubic-bezier(.2, .8, .2, 1) forwards; }. После завершения элемент сохранит конечное состояние.

CSS-переменная позволяет вынести значение оси в отдельное свойство и переиспользовать его в разных состояниях. Например: .font-demo { --font-weight: 400; font-variation-settings: 'wght' var(--font-weight); } .font-demo:hover { --font-weight: 700; }. Такой подход удобен для карточек, кнопок и демонстрационных блоков, где одно правило управляет несколькими элементами.

Для управляемого интерактивного примера можно связать значение с состояниями focus-visible и active: .font-demo:focus-visible { --font-weight: 650; } .font-demo:active { --font-weight: 780; }. Обязательно сохраните заметный контур фокуса. Изменение толщины само по себе не должно быть единственным сигналом состояния.

Несколько осей позволяют создать выразительную типографическую реакцию. Например, при наведении на рекламный заголовок можно немного увеличить вес и одновременно сжать буквы: font-variation-settings: 'wght' 720, 'wdth' 94, 'slnt' -4. Небольшие изменения обычно сохраняют читаемость лучше, чем экстремальные значения.

Следите за геометрией блока. Изменение wdth может поменять длину строки, перенос и высоту заголовка, а изменение slnt визуально выходит за границы исходного прямоугольника. Если текст участвует в навигации или задает высоту карточки, протестируйте длинные слова, узкие экраны и многострочный вариант.

Пользователи могут отключать движение в настройках операционной системы. Уважайте это предпочтение через медиа-запрос prefers-reduced-motion. Пример: @media (prefers-reduced-motion: reduce) { .hero-title, .font-demo { animation: none; transition: none; } }. Само начертание можно оставить в конечном или статичном состоянии, чтобы информация не зависела от анимации.

Анимация текста не должна ухудшать контраст и читаемость. Не используйте слишком тонкое начальное состояние для основного содержимого, не меняйте размер вместе с весом без необходимости и проверяйте эффект на светлом и темном фоне. Для кнопок, ссылок и полей формы оставляйте понятные состояния hover, focus и active.

Вариативный файл часто удобнее набора отдельных начертаний, но его реальный размер и способ загрузки зависят от конкретной гарнитуры. Подключайте только нужные языковые наборы и диапазоны, используйте font-display: swap и не запускайте тяжелые бесконечные эффекты на десятках элементов одновременно. Для проверки измеряйте загрузку страницы в условиях медленного соединения.

Представим карточку с названием гарнитуры, описанием и кнопкой «Попробовать». Заголовку задайте font-weight: 420, при наведении — 720, а карточке добавьте transition только для свойств, действительно меняющихся в эффекте. Описание оставьте неизменным: так пользователь быстро считывает текст, пока визуальный акцент остается на названии.

Если карточка должна реагировать на наведение целиком, используйте селектор .card:hover .card-title, а для клавиатуры добавьте .card:focus-within .card-title. Так один и тот же типографический сигнал появляется и при наведении мышью, и при переходе к интерактивному элементу с клавиатуры.

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

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

Причиной может быть статический шрифт, неправильный диапазон font-weight, отсутствие нужной оси или подмена гарнитуры резервным шрифтом. Проверьте загрузку WOFF2 в инструментах разработчика, имя font-family и значения @font-face. Также убедитесь, что transition применяется к тому же свойству, которое меняется в состоянии hover.

Да, если гарнитура действительно содержит такую ось. В font-variation-settings ее имя записывается как четырехсимвольный тег, например 'GRAD' 50. Диапазон и смысл значения определяет автор шрифта, поэтому нельзя переносить обозначения и границы из одной гарнитуры в другую.

Используйте @media (prefers-reduced-motion: reduce) и отменяйте animation и transition для декоративных эффектов. При этом оставьте доступными сам текст, контраст, фокус и другие признаки состояния. Пользователь должен получить ту же информацию без необходимости наблюдать движение букв.

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

Чтобы анимировать начертание вариативного шрифта с помощью CSS, подключите variable font, проверьте ось wght и изменяйте ее через font-weight или font-variation-settings. Для качественного результата ограничьте диапазон разумными значениями, учитывайте геометрию макета, добавьте focus-visible и настройку reduced motion.

Нужен собственный шрифт для сайта, бренда или эксперимента с анимацией? Создайте и настройте гарнитуру на fontgenerator.ru, а затем проверьте ее в интерфейсе с вариативными CSS-эффектами.