# Вариативные шрифты с осью ширины > Вариативные семейства, у которых регулируется не только насыщенность, но и ширина букв: от небольшого сужения для подгонки текста до полного диапазона от узкого до широкого. Вариативный шрифт хранит рисунок как диапазон, а не как набор фиксированных начертаний. У большинства вариативных семейств есть ось насыщенности; у меньшего числа — ещё и ось ширины, зарегистрированная под тегом wdth: она делает буквы уже или шире, сохраняя их высоту и характер. Значения выражаются в процентах от обычной ширины: 75 — узкое начертание, 100 — обычное, 125 — широкое. Для вёрстки ширина часто практичнее насыщенности. Она позволяет точно вписать заголовок в колонку, сжать пункт навигации на маленьком экране и ослабить на большом или переключить таблицу на более узкую настройку только тогда, когда столбцам не хватает места. В CSS для этого служит свойство font-stretch или font-variation-settings, если нужен более тонкий контроль, и значение можно менять на контрольных точках или анимировать. Прежде чем выбрать, сравните диапазоны. Несколько семейств здесь только сужаются — от 100 до 75 или около того, чего хватает для подгонки текста; два только расширяются; другие проходят путь от половины обычной ширины до удвоенной и по сути заменяют несколько гарнитур. В заметках ниже каждый диапазон указан по карточкам. Хорошо нарисованная ось ширины меняет сами формы букв, в отличие от искусственного сжатия текста. How these were chosen: Вариативные семейства, в карточках которых указана ось ширины (wdth) помимо насыщенности; диапазоны осей приведены по карточкам. ## Fonts (17) - [Roboto](https://trendhub.net/ru/fonts/roboto.markdown) (Гротески, начертаний: 18 · вариативный, OFL): Ось ширины от 75 до 100 сужает рисунок до узкого начертания, рядом ось насыщенности от 100 до 900 и курсив. - [Open Sans](https://trendhub.net/ru/fonts/open-sans.markdown) (Гротески, начертаний: 12 · вариативный, OFL): Ширина сужается от 100 до 75 для подгонки текста, в гуманистическом гротеске с шестью насыщенностями и курсивом. - [Archivo](https://trendhub.net/ru/fonts/archivo.markdown) (Гротески, начертаний: 18 · вариативный, OFL): Ширина от 62 до 125, от сверхузкого до широкого, и насыщенность от Thin до Black с курсивом. - [Saira](https://trendhub.net/ru/fonts/saira.markdown) (Гротески, начертаний: 18 · вариативный, OFL): Ширина от 50 до 125 и насыщенность от 100 до 900 в гротеске с квадратными формами, плюс курсив. - [IBM Plex Sans](https://trendhub.net/ru/fonts/ibm-plex-sans.markdown) (Гротески, начертаний: 14 · вариативный, OFL): Ось ширины, которая сужает буквы до 75, семь насыщенностей и курсив. - [Inconsolata](https://trendhub.net/ru/fonts/inconsolata.markdown) (Моноширинные, начертаний: 8 · вариативный, OFL): Моноширинный шрифт, ось ширины которого идёт от 50 до 200, от половины обычной ширины до удвоенной, рядом с насыщенностью от 200 до 900. - [Noto Serif](https://trendhub.net/ru/fonts/noto-serif.markdown) (Антиква, начертаний: 18 · вариативный, OFL): Текстовая антиква, ось ширины которой сужается от 100 до 62,5, девять насыщенностей с курсивом. - [Merriweather](https://trendhub.net/ru/fonts/merriweather.markdown) (Антиква, начертаний: 14 · вариативный, OFL): Текстовая антиква с умеренным диапазоном ширины, от 87 до 112, рядом с осями насыщенности и оптического размера. - [Asap](https://trendhub.net/ru/fonts/asap.markdown) (Гротески, начертаний: 18 · вариативный, OFL): Насыщенность от 100 до 900 и ширина от 75 до 125, с курсивом. - [Georama](https://trendhub.net/ru/fonts/georama.markdown) (Гротески, начертаний: 18 · вариативный, OFL): Ось ширины от 62,5 до 150, от узкого до широкого, и девять насыщенностей с курсивом. - [Zalando Sans](https://trendhub.net/ru/fonts/zalando-sans.markdown) (Гротески, начертаний: 16 · вариативный, OFL): Ширина от 75 до 125 и насыщенность от 200 до 900 в простом гротеске, плюс курсив. - [Science Gothic](https://trendhub.net/ru/fonts/science-gothic.markdown) (Гротески, начертаний: 18 · вариативный, OFL): Четыре оси: насыщенность 100–900, ширина 50–200, наклон и контраст. - [Advent Pro](https://trendhub.net/ru/fonts/advent-pro.markdown) (Гротески, начертаний: 18 · вариативный, OFL): Ширина здесь только увеличивается, от 100 до 200, наряду с насыщенностью от 100 до 900. - [Mozilla Headline](https://trendhub.net/ru/fonts/mozilla-headline.markdown) (Гротески, начертаний: 6 · вариативный, OFL): Насыщенность от 200 до 700 и ширина от 75 до 125 в шрифте без засечек для заголовков. - [Anek Latin](https://trendhub.net/ru/fonts/anek-latin.markdown) (Гротески, начертаний: 8 · вариативный, OFL): Ширина от 75 до 125 при восьми прямых насыщенностях от Thin до ExtraBold. - [Pliant](https://trendhub.net/ru/fonts/pliant.markdown) (Гротески, начертаний: 18 · вариативный, OFL): Ширина только увеличивается, от 100 до 125, при девяти насыщенностях, с курсивом, кириллицей и греческим. - [Ubuntu Sans](https://trendhub.net/ru/fonts/ubuntu-sans.markdown) (Гротески, начертаний: 16 · вариативный, UFL): Ось ширины, сужающаяся от 100 до 75, в шрифте без засечек для меню, кнопок и диалогов, с восемью насыщенностями и курсивом. ## FAQs ### Как задать ширину шрифта в CSS? Используйте font-stretch с процентным значением, например font-stretch: 85%, или font-variation-settings: "wdth" 85. Значение должно лежать в диапазоне, который поддерживает шрифт; всё, что выходит за него, обрезается до ближайшего края. ### Совпадает ли ось ширины с горизонтальным масштабированием текста? Нет. Масштабирование искажает толщину штрихов и изгибы. Ось ширины использует формы, нарисованные для каждой ширины, поэтому вертикальные и горизонтальные штрихи остаются в пропорции. ### Работают ли вариативные шрифты во всех браузерах и программах? Современные браузеры и основные дизайнерские программы их поддерживают. Старое ПО может показывать только начертание по умолчанию, поэтому там, где это важно, оставьте статические файлы как запасной вариант. ### Можно ли использовать эти вариативные шрифты в коммерческих проектах? Да. Все, кроме одного, выпущены под SIL Open Font License, которая разрешает коммерческое использование, встраивание и самостоятельное размещение; Ubuntu Sans распространяется под Ubuntu Font License, которая тоже разрешает коммерческое использование. Лицензия указана на странице каждого шрифта. ## Related collections - [Вариативные шрифты с осью оптического размера](https://trendhub.net/ru/fonts/for/variable-fonts-with-optical-size.markdown) - [Вариативные шрифты с необычными осями](https://trendhub.net/ru/fonts/for/variable-fonts-with-unusual-axes.markdown) - [Узкие гротески для таблиц и плотной вёрстки](https://trendhub.net/ru/fonts/for/narrow-fonts-for-tight-layouts.markdown) - [Узкие шрифты для заголовков](https://trendhub.net/ru/fonts/for/condensed-headline-fonts.markdown) - [Широкие и расширенные шрифты для заголовков и логотипов](https://trendhub.net/ru/fonts/for/wide-and-extended-fonts.markdown) - [Семейства шрифтов с девятью насыщенностями и курсивом](https://trendhub.net/ru/fonts/for/font-families-with-nine-weights.markdown) --- Source: https://trendhub.net/ru/fonts/for/variable-fonts-with-a-width-axis (trendhub)