Вариативные шрифты с осью ширины
Вариативные семейства, у которых регулируется не только насыщенность, но и ширина букв: от небольшого сужения для подгонки текста до полного диапазона от узкого до широкого.
Narrow to wide
Вариативный шрифт хранит рисунок как диапазон, а не как набор фиксированных начертаний. У большинства вариативных семейств есть ось насыщенности; у меньшего числа — ещё и ось ширины, зарегистрированная под тегом wdth: она делает буквы уже или шире, сохраняя их высоту и характер. Значения выражаются в процентах от обычной ширины: 75 — узкое начертание, 100 — обычное, 125 — широкое.
Для вёрстки ширина часто практичнее насыщенности. Она позволяет точно вписать заголовок в колонку, сжать пункт навигации на маленьком экране и ослабить на большом или переключить таблицу на более узкую настройку только тогда, когда столбцам не хватает места. В CSS для этого служит свойство font-stretch или font-variation-settings, если нужен более тонкий контроль, и значение можно менять на контрольных точках или анимировать.
Прежде чем выбрать, сравните диапазоны. Несколько семейств здесь только сужаются — от 100 до 75 или около того, чего хватает для подгонки текста; два только расширяются; другие проходят путь от половины обычной ширины до удвоенной и по сути заменяют несколько гарнитур. В заметках ниже каждый диапазон указан по карточкам. Хорошо нарисованная ось ширины меняет сами формы букв, в отличие от искусственного сжатия текста.
-
Roboto
Ось ширины от 75 до 100 сужает рисунок до узкого начертания, рядом ось насыщенности от 100 до 900 и курсив.
-
Open Sans
Ширина сужается от 100 до 75 для подгонки текста, в гуманистическом гротеске с шестью насыщенностями и курсивом.
-
Archivo
Ширина от 62 до 125, от сверхузкого до широкого, и насыщенность от Thin до Black с курсивом.
-
Saira
Ширина от 50 до 125 и насыщенность от 100 до 900 в гротеске с квадратными формами, плюс курсив.
-
IBM Plex Sans
Ось ширины, которая сужает буквы до 75, семь насыщенностей и курсив.
-
Inconsolata
Моноширинный шрифт, ось ширины которого идёт от 50 до 200, от половины обычной ширины до удвоенной, рядом с насыщенностью от 200 до 900.
-
Noto Serif
Текстовая антиква, ось ширины которой сужается от 100 до 62,5, девять насыщенностей с курсивом.
-
Merriweather
Текстовая антиква с умеренным диапазоном ширины, от 87 до 112, рядом с осями насыщенности и оптического размера.
-
Asap
Насыщенность от 100 до 900 и ширина от 75 до 125, с курсивом.
-
Georama
Ось ширины от 62,5 до 150, от узкого до широкого, и девять насыщенностей с курсивом.
-
Zalando Sans
Ширина от 75 до 125 и насыщенность от 200 до 900 в простом гротеске, плюс курсив.
-
Science Gothic
Четыре оси: насыщенность 100–900, ширина 50–200, наклон и контраст.
-
Advent Pro
Ширина здесь только увеличивается, от 100 до 200, наряду с насыщенностью от 100 до 900.
-
Mozilla Headline
Насыщенность от 200 до 700 и ширина от 75 до 125 в шрифте без засечек для заголовков.
-
Anek Latin
Ширина от 75 до 125 при восьми прямых насыщенностях от Thin до ExtraBold.
-
Pliant
Ширина только увеличивается, от 100 до 125, при девяти насыщенностях, с курсивом, кириллицей и греческим.
-
Ubuntu Sans
Ось ширины, сужающаяся от 100 до 75, в шрифте без засечек для меню, кнопок и диалогов, с восемью насыщенностями и курсивом.
В образцах загружается только базовая латиница каждого семейства. Все семейства здесь — с открытой лицензией; на странице каждого указаны условия и есть исходные файлы.
Вопросы и ответы: Вариативные шрифты с осью ширины
Как задать ширину шрифта в CSS?
Используйте font-stretch с процентным значением, например font-stretch: 85%, или font-variation-settings: "wdth" 85. Значение должно лежать в диапазоне, который поддерживает шрифт; всё, что выходит за него, обрезается до ближайшего края.
Совпадает ли ось ширины с горизонтальным масштабированием текста?
Нет. Масштабирование искажает толщину штрихов и изгибы. Ось ширины использует формы, нарисованные для каждой ширины, поэтому вертикальные и горизонтальные штрихи остаются в пропорции.
Работают ли вариативные шрифты во всех браузерах и программах?
Современные браузеры и основные дизайнерские программы их поддерживают. Старое ПО может показывать только начертание по умолчанию, поэтому там, где это важно, оставьте статические файлы как запасной вариант.
Можно ли использовать эти вариативные шрифты в коммерческих проектах?
Да. Все, кроме одного, выпущены под SIL Open Font License, которая разрешает коммерческое использование, встраивание и самостоятельное размещение; Ubuntu Sans распространяется под Ubuntu Font License, которая тоже разрешает коммерческое использование. Лицензия указана на странице каждого шрифта.