От создателя: не так давно я работала над проектом, в каком поднялась тема переменных шрифтов при обсуждении определения очертаний. Я слышала этот термин ранее, но я не совершенно соображала, что такое переменный шрифт. Я незначительно покопалась в Сети и была взволнована, найдя все способности, которые переменные шрифты нам предоставляют.
Что такое переменный шрифт?
Большая часть сайтов употребляют несколько шрифтов, принадлежащих к одному семейству шрифтов. Любой шрифт хранится в отдельном файле и имеет неповторимый набор параметров, таковых как ширина, толщина и стиль. Переменные шрифты хранят все эти варианты в одном файле шрифта. В отличие от статических шрифтов, переменные шрифты предоставляют доступ ко всему спектру ширины, толщины и остальных параметров. К примеру, большая часть семейств шрифтов содержат в себе данное количество шрифтов с различной шириной, доступное в инкрементальных значениях от 100 до 900. Переменные шрифты предоставляют возможность применять всякую толщину в границах обозначенного спектра. Так что, если font-weight: 470 совершенно подступает для вашего веб-сайта, вы сможете применять его.
Переменные шрифты в действии
Демонстрация ниже предоставляет пример всего спектра стилей, которые вероятны с одним переменным шрифтом. Ползунки можно применять для опции толщины, ширины и наклона.
Звучит круто, но …
Если вы похожи на меня и ранее не слышали о переменных шрифтах, вы сможете опешиться, как они полезны. Есть несколько главных обстоятельств, по которым стоит применять переменные шрифты.
Производительность
Как вы уже додумались, возможность доступа ко всему семейству шрифтов из 1-го файла может повысить производительность. Переменные шрифты уменьшают количество HTTP-запросов к файлом шрифтов и размер данных, которые нужно извлечь. Невзирая на то, что файлы переменных шрифтов имеют больший размер, они обычно меньше, чем несколько статических файлов шрифтов. Но есть исключения. Если на вашем веб-сайте употребляется лишь одна толщина либо стиль шрифта, вы сможете не получить такого же прироста производительности, что и веб-сайты, использующие несколько шрифтов.
80% сайтов из ТОП выдачи имеют плохие показатели Core Web Vitals
Адаптивный дизайн
Размер экрана нередко описывает типографские решения, такие как толщина, размер и т. д. Переменные шрифты разрешают лучше надзирать эти характеристики. Такие характеристики, как высота х, оптический размер, можно настроить зависимо от размера экрана, чтоб сделать лучше читаемость. В демонстрации ниже употребляет переменный шрифт Amstelvar, чтоб показать переход от низкого к высочайшему оптическому размеру. При огромных размерах контраст возрастает.
Все буковкы масштабируются до схожего размера для сопоставления
Как работают переменные шрифты?
Сейчас, когда вы узрели, что могут переменные шрифты, давайте поглядим, как они работают. Переменные шрифты хранят один контур для всякого знака. Точки, составляющие контур, содержат аннотации о том, как они должны двигаться для сотворения остальных стилей. Отдельные стили интерполируются с внедрением этих инструкций. Конфигурации выполняются по различным осям, к примеру по оси толщины.
Оси вариантов
Оси варианты обрисовывают, какие характеристики являются переменными и каковой допустимый спектр для этих параметров. Переменные шрифты могут иметь два типа осей: зарегистрированные оси и пользовательские оси.
Зарегистрированные оси являются более всераспространенными и определяются очевидно. Есть 5 зарегистрированных осей: weight, width, italic, slant и optical size. Любая зарегистрированная ось имеет соответственный четырехбуквенный тег и быть может сопоставлена с существующими качествами CSS.
Направьте внимание, что зарегистрированные оси не являются неотклонимой функцией. Решение о том, какие оси включать, принимается дизайнером шрифтов.
В дополнение к зарегистрированным осям создатели шрифтов могут включать пользовательские оси. Пользовательские оси открывают огромное количество творческих способностей, поэтому что не существует ограничений по размеру, определению либо количеству разрешенных пользовательских осей. Подобно зарегистрированным осям, пользовательские оси имеют соответственный четырехбуквенный тег. Но теги пользовательских осей должны указываться в верхнем регистре. К примеру, всераспространенная пользовательская ось — это уровень, она обычно представлена четырехбуквенным тегом GRAD.
Создание JavaScript приложения для распознавания лиц, как в кино
Пристальный взор на теги
Я упоминала теги пару раз, так что вы сможете быть удивлены, как их применять. Спецификации CSS предпочитают применять font-weight, font-stretch, font-style и font-optical-sizing для контроля зарегистрированных осей, где это может быть. Пользовательские оси могут быть доступны с помощью характеристики font-variation-settings. В приведенном ниже примере GRAD — это пользовательская ось.
CSS .my-style { font-stretch: 120%; font-variation-settings: ‘GRAD’ 120; font-weight: 450;
}
| 12345 | .my-style { font-stretch: 120%; font-variation-settings: ‘GRAD’ 120; font-weight: 450;} |
Новейшие способности
Переменные шрифты делают новейшие способности для преобразования типографики. От практических случаев использования, таковых как улучшение читабельности, до наиболее творческих применений, таковых как эти иллюстративные шрифты от Typearture. Если вы желаете провести свои собственные исследования, есть несколько хороших мест для поиска переменных шрифтов: Axis-Praxis и V-шрифты.
Создатель: Danielle Romo
Редакция: Команда webformyself.