font-stretch в CSS: как управлять шириной шрифта

font-stretch в CSS задаёт ширину начертания шрифта: браузер выбирает узкую, стандартную или расширенную версию гарнитуры, если она доступна. Свойство не сжимает и не растягивает буквы как графический объект. В статье разберём ключевые значения, проценты, variable fonts, практические сценарии, отличия от transform и типичные ошибки.

Дата актуальности: 22 июля 2026 года. Материал ориентирован на разработчиков, дизайнеров и всех, кто настраивает веб-типографику без потери читаемости и визуального качества.

Свойство font-stretch управляет параметром ширины шрифтового начертания. Для одной гарнитуры могут существовать варианты normal, condensed и expanded. Браузер сопоставляет заданное значение с доступными файлами шрифта и выбирает наиболее подходящий вариант. Если нужного начертания нет, визуальный результат может не измениться.

Начальное значение свойства — normal, которое соответствует стандартной ширине, или примерно 100 процентам. font-stretch является наследуемым свойством, поэтому его значение, заданное контейнеру, обычно применяется к дочерним элементам. Это удобно для отдельных текстовых зон, но требует осторожности: узкое начертание заголовка не всегда подходит для основного текста внутри того же блока.

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

Процент записывается непосредственно в CSS: font-stretch: 90%;. Чем меньше значение, тем уже выбранное начертание; чем больше, тем шире. Однако проценты не означают универсальное масштабирование каждой буквы. Итог зависит от того, какие ширины предусмотрены конкретной гарнитурой и какой диапазон объявлен в описании шрифта.

При подборе шрифта браузер учитывает семейство, начертание, насыщенность и ширину. Если в семействе есть отдельные файлы для обычной и узкой версий, font-stretch помогает выбрать нужный файл без изменения font-family. Поэтому для корректной работы важно подключить все требуемые варианты и правильно описать их в правилах @font-face.

Если подходящей ширины нет, браузер применяет алгоритм сопоставления шрифтов и может выбрать ближайший доступный вариант. В результате font-stretch: condensed у гарнитуры без узкого начертания часто выглядит так же, как normal. Это не ошибка свойства: CSS не обязан искусственно деформировать шрифт, если подходящей формы в семействе нет.

В статической гарнитуре ширина обычно представлена отдельными файлами. Например, у семейства могут быть Regular, Condensed Regular и Expanded Regular. В таком случае правила @font-face описывают каждую версию как один и тот же font-family, но с разным значением font-stretch. Элемент с font-stretch: condensed получит узкий файл, если он зарегистрирован корректно.

Практическая схема может выглядеть так: font-family: 'Studio Sans', sans-serif; font-stretch: condensed;. Если браузер не найдёт объявленную condensed-версию, он перейдёт к доступному начертанию из этого семейства или к резервному шрифту. Поэтому fallback-цепочка должна быть визуально совместимой по пропорциям и насыщенности, особенно в интерфейсах с фиксированной шириной карточек.

Вариативный шрифт хранит диапазон параметров в одном файле. Ширина обычно управляется стандартной осью wdth, а font-stretch становится удобным CSS-интерфейсом для обращения к этой оси. Например, значение 82% может выбрать промежуточную ширину между стандартным и конденсированным вариантом, если такой диапазон предусмотрен автором гарнитуры.

При подключении variable font желательно указать диапазон ширины в @font-face, например font-stretch: 75% 125%;. Это сообщает браузеру, какие значения поддерживаются данным ресурсом. Если запрашивать значение за пределами диапазона, браузер может ограничить его ближайшей доступной границей. Фактический результат также зависит от дизайна оси wdth: разные шрифты меняют пропорции неодинаково.

Condensed-начертание полезно для коротких заголовков, подписей кнопок, навигации и числовых показателей, когда ширина блока ограничена. Пример: .dashboard-title { font-family: 'Studio Sans', sans-serif; font-stretch: 85%; font-weight: 700; }. Значение 85% сохраняет характер гарнитуры и помогает уместить заголовок, но перед публикацией его нужно проверить на кириллице и в разных размерах.

Для вариативной гарнитуры можно задать умеренно сжатую ширину для карточек каталога: .card-title { font-family: 'Studio Sans Variable', sans-serif; font-stretch: 92%; font-weight: 650; }. Такое решение подходит, когда нужно сохранить одинаковое количество строк без грубого уменьшения размера текста. Если ширина меняется динамически, тестируйте длинные слова, дефисы и переносы.

На мобильном экране более узкая версия может помочь заголовку не выходить за границы, но не должна заменять адаптивную сетку. Например, в медиазапросе можно использовать .hero-title { font-stretch: condensed; }, а на широком экране вернуть normal. Если текст всё равно плохо читается, сначала уменьшите размер заголовка или измените ширину контейнера, а не применяйте экстремальное сжатие.

font-stretch выбирает дизайнерски подготовленную ширину шрифта. Свойство transform: scaleX() визуально масштабирует весь элемент после расчёта раскладки: оно может исказить буквы, повлиять на видимый размер блока и привести к наложениям. letter-spacing меняет расстояние между символами, но не ширину самих глифов. Поэтому эти инструменты решают разные задачи.

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

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

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

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

font-stretch: condensed просит браузер выбрать сжатую версию шрифта, обычно более узкую, чем normal. Точное соотношение зависит от семейства и его внутренних метрик. У одной гарнитуры condensed будет заметно плотным, у другой — лишь немного уже стандартного начертания.

Да, если подключаемая гарнитура предоставляет соответствующие ширины или является вариативной. Для локальных файлов нужно правильно описать font-family, src и font-stretch в @font-face. Сам факт загрузки шрифта не гарантирует поддержку condensed или expanded: это свойство конкретного семейства, а не браузера.

Да. Процентные значения позволяют указать более точную ширину, например font-stretch: 92%;. Такой подход особенно полезен для variable fonts и дизайн-систем, где нужно согласовать длину заголовков в нескольких компонентах. Для статической гарнитуры браузер выберет ближайший доступный вариант, поэтому точность зависит от подключённых файлов.

Чаще всего в подключённом семействе нет нужной ширины, либо браузер использует резервный шрифт. Проверьте загрузку файла, совпадение имени font-family и диапазон font-stretch в @font-face. Также убедитесь, что декларация не переопределяется более специфичным правилом или значением из font shorthand.

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

font-stretch — инструмент выбора пропорций начертания, а не универсальный способ сжимать текст. Используйте его с готовыми condensed и expanded-версиями или variable fonts, проверяйте диапазон оси wdth и не заменяйте им адаптивную вёрстку. Такой подход помогает сохранить характер гарнитуры и управлять плотностью интерфейса без грубой деформации букв.

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