Переход на переменные шрифты

1. Введение

Последнее обновление: 11.05.22

269e1597309e5d7a.png

Используйте динамическую изменчивость в своем пользовательском интерфейсе с помощью переменных шрифтов, которые обеспечат большую отзывчивость макетов, тем и специальных возможностей, одновременно ускоряя работу ваших приложений!

Что вы узнаете

  • Что такое вариативные шрифты.
  • Как с их помощью можно настроить шрифт.
  • Как применять переменные шрифты в ваших проектах.
  • Как реализовать переменные шрифты с помощью Google Fonts API и CSS.

Предварительные условия

В этой лабораторной работе мы будем опираться на некоторые фундаментальные концепции дизайна.

  • Знание типовых шкал.
  • Знание Фигмы.
  • Базовые знания HTML и CSS.

Что вам понадобится

2. Начните работу

Настраивать

Для начала вам необходимо получить доступ к файлу Designlab Figma. Все, что вам нужно для лаборатории, находится в файле Figma. Вы можете скачать и импортировать файл или продублировать его из сообщества Figma.

Сначала войдите в Figma или создайте учетную запись .

Дубликат из сообщества Figma

Перейдите к файлу шрифтов «Миграция на переменные» или найдите шрифты «Миграция на переменные» в сообществе Figma . Нажмите «Дублировать» в правом верхнем углу, чтобы скопировать файл в свои файлы.

2cb1a5f77aab6012.png

Макет файла

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

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

Начиная с артборда Intro , есть кнопки, которые связывают артборды вместе по порядку. Чтобы перейти по ссылке, нажмите кнопку.

289defd9d067d2f0.png

Проверьте переменный шрифт

Прежде чем начать, нам нужно убедиться, что у нас есть переменный шрифт! В этом файле используется Roboto Flex, уже доступный в Figma, или вы можете загрузить его с сайта fonts.google.com.

3. Что такое вариативные шрифты?

Переменные шрифты — это новый инновационный формат шрифтов, который позволяет пользователям контролировать их тип и значки. Roboto Serif и Roboto Flex — это новые шрифты, созданные специально для технологии переменных шрифтов, каждый из которых имеет широкий диапазон осей. 64c74a7d7844423.png

Эстетическое выражение и оси

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

Преимущества

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

77346d3812d79acc.png

4. Используйте переменные шрифты в дизайне

Изменить оси

Давайте пройдемся по всем доступным нам параметрам (или осям) и их эффекту. Выберите тип справа и откройте модальное окно «Сведения о типе» (значок «больше»), чтобы открыть ползунки осей и просмотреть каждый параметр.

  1. Вес определяет толщину буквы. Он обеспечивает полный, непрерывный диапазон толщины хода.

5f18f2f50f6dc4da.gif

  1. Ширина — это результат того, сколько горизонтального пространства занимают символы шрифта.

dddc87cccfcb47f9.gif

  1. Отрегулируйте стиль от вертикального до наклонного, который типографы также называют «наклонным». Хотя и редко, наклон может работать и в другом направлении, что называется стилем «наклонный назад» или «обратный наклон».

1b7fbf03fcbf16dc.gif

  1. Оценка — это вторичный модификатор оптического веса шрифта, который не зависит от оси «Вес». И Вес, и Оценка влияют на толщину буквы, но настройки с помощью Grade гораздо более детальны.

35705cb05c8df559.gif

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

ed569d469ebd40d6.gif

Посмотрите демо-версию Variable Fonts , чтобы поиграть с осями переменных шрифтов за пределами Figma.

5. Развивайте стиль

Если вы работаете с руководством по фирменному стилю, у вас может быть установленный масштаб шрифта, позволяющий учитывать типографские ограничения. Использование переменных шрифтов не означает отказа от этой последовательности. Это дает возможность дальнейшего уточнения гибкости масштабирования шрифта (для таких случаев использования, как увеличение веса оценки на темном фоне) в одном файле.

ecb7c0b0056fc315.png

Хотя шрифтовая шкала может состоять из нескольких семейств шрифтов, здесь мы будем использовать только одно для настройки сокращенной версии типовой шкалы Материала по умолчанию.

  1. Давайте начнем настройку масштаба шрифта с основного текста. Это позволяет нам сначала установить размер базового шрифта сайта и затем оптически настроить его. По умолчанию для Body Large установлено значение 18pt , выбрано и установлено значение Roboto Flex . Раньше настройка для большей читаемости означала обновление размера и веса шрифта, что означало новый файл шрифта, но теперь мы можем точно настроить некоторые оси. Отрегулируйте оптический размер, класс и вес.
  2. Продолжите с меткой . Ярлыки более утилитарны и используются в более коротких контекстах, например кнопках. Оптически отрегулируйте сорт, чтобы этикетка правильно отображалась на контейнерах для пуговиц и чипсах.
  3. Продолжайте совершенствовать Title , Headline и Display . Все три используются для более коротких текстов со средним и высоким акцентом, таких как заголовки страниц и разделы. Заголовок и отображение могут быть более выразительными из-за их размера и акцента. Не стесняйтесь экспериментировать со всеми осями здесь!
  4. Выбрав тип, щелкните 4 точки и добавьте (+), чтобы установить стиль текста, который обеспечивает единообразие настроек многократного использования текста.

Вы можете создать масштаб типа материала по умолчанию в виде стилей Figma с помощью Material Theme Builder или дублируя комплект дизайна M3.

6. Применяется к пользовательскому интерфейсу

Настроив масштаб типа, давайте применим его к элементам пользовательского интерфейса для реализации в коде! Рассмотрим, как можно использовать переменные шрифты, чтобы добавить большей выразительности и разборчивости. Если вы настроили стили Figma в последнем упражнении, их можно применить, а затем обновить оси стиля.

18efaa2c7bc6ecac.png

  1. Взгляните на элементы пользовательского интерфейса слева. Первая карточка содержит тип растения, описание и некоторые теги категории, а остальные карточки описывают инструкции по уходу за растением. Тип растения имеет смысл играть важную роль, поэтому используйте наш стиль «заголовка». Установите то, что мы ранее установили в качестве заголовка. Карточки ухода также имеют заголовок, но не имеют такого же акцента, поэтому установите для них название «заголовок».
  2. Сведения о заводе и копию инструкции можно назначить «большому телу», а меткам категорий — «большую метку».
  3. Поэкспериментируйте с разными ролями и настройте элементы пользовательского интерфейса и шкалу шрифтов, чтобы найти правильный баланс.

f646755b99db0161.png

7. Реализовать в коде

789408aab925944f.png

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

Для реализации мы будем использовать базовый HTML и CSS, а не MWC или какой-либо другой фреймворк.

Вариативные шрифты в Google Fonts

Используйте Google Fonts в качестве службы доставки шрифтов, чтобы легко реализовать на своем веб-сайте множество шрифтов, включая переменные шрифты!

Узнайте, какие вариативные шрифты доступны, на сайте fonts.google.com . В разделе поиска установите флажок «Показывать только переменные шрифты для фильтрации». Переменные шрифты включают в себя игровую площадку в нижней части страницы, где вы можете установить ползунки для каждой из осей, доступных в семействе.

9ecb4721afd8faa2.png

Стиль с помощью CSS

Не все шрифты имеют одинаковое количество осей, доступных для настройки. В настоящее время наиболее распространенными являются «Вес», «Ширина», «Наклон», «Курсив» и «Оптический размер».

Их можно установить с помощью основных свойств шрифта CSS, которые существовали до появления переменных шрифтов. Хотя все еще не получило широкой поддержки (по состоянию на май 2022 года), все оси можно надежно настроить с помощью нового свойства font-variation-settings .

Axes

Abbreviation

CSS property

Weight

wght

font-weight

Width

wdth

font-stretch

Slant

slnt

font-style*

Italic

ital

font-style*

Optical Size

opsz

font-optical-sizing

*Наклонный (slnt) и курсив (итал) в стиле шрифта не являются надежными.

8. Импорт с помощью Google Fonts API

Мы использовали только Roboto, но сейчас вы можете просмотреть все доступные нам шрифты на сайте fonts.google.com.

Мы будем придерживаться Roboto до конца работы над кодом и настроим тип на следующих карточках на основе нашего предыдущего упражнения.

  1. Скопируйте этот код, содержащий образец пользовательского интерфейса карты, в выбранную вами веб-IDE.
<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */


/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {   
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>
  1. Обратите внимание на характеристики стиля, которые мы установили в последнем упражнении для заголовка , заголовка , тела и метки . Имея это в виду, перейдите на страницу Roboto Flex. Установите ползунки в соответствии со спецификациями, которые вы установили в Figma, а затем выберите этот стиль для каждого, чтобы добавить его в боковой ящик.
  2. В ящике под выбранными стилями найдите «Использовать в Интернете». Есть два способа добавить шрифт в ваш код: с помощью <link> или @import. Вам нужен только один, давайте выберем @import .
  3. Скопируйте из @import точку с запятой и вставьте ее в теги стиля после комментария к импорту.
  4. Поскольку Roboto Flex является единственным используемым шрифтом, настройте тело для вызова семейства шрифтов, добавив «правила CSS для указания семейств», которые включены в код импорта.
body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

При этом импортируется выбранный шрифт и набор стилей, но использование диапазонов Axis позволяет использовать непрерывный диапазон стилей вместо отдельных стилей. Чтобы создать диапазон, соедините два значения с помощью .. (например, 100..900). Убедитесь, что вы добавляете только те диапазоны, которые существуют в ползунках шрифта, иначе он не загрузится должным образом.

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

9. Свойства переменного шрифта CSS

После импорта шрифта давайте вернемся к Figma, чтобы применить некоторые свойства CSS к стилю, и взглянем на свойство CSS font-variation-settings .

  1. Начиная с h1 заголовков, выбранного на правой панели, выберите вкладку «Проверка» вверху. Это переключит панель в режим проверки кода для передачи управления разработчикам. Код — это последний раздел.
  2. Если вы еще этого не сделали, измените раскрывающийся список формата на CSS . Перечисляются стандартные атрибуты, если они используются ( font-weight, font-stretch, font-style, font-optical-sizing ), за которыми следуют низкоуровневые font-variation-settings , которые содержат незарегистрированные пользовательские оси. Сначала используйте стандартные атрибуты, прежде чем переходить к font-variation-settings .

Figma использует настройки изменения шрифта для ширины (wdth) вместо шрифта-растяжения.

62fbb715711beb75.png

  1. Скопируйте этот CSS-код, относящийся к типу, чтобы стилизовать наш селектор h1.
h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}
  1. Стиль заголовка карты медицинского обслуживания можно скопировать в h2 . Сделайте то же самое для основной копии, скопировав ее в p . Стили меток можно скопировать в .label

73252104c94e2053.png

10. Поздравления

62930ad88ed65971.png

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

Если у вас есть вопросы, задавайте их нам в любое время, используя @MaterialDesign в Твиттере .

Оставайтесь с нами, чтобы увидеть больше материалов и руководств по дизайну на youtube.com/MaterialDesign.