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

1. Введение

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

269e1597309e5d7a.png

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

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

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

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

В этой лабораторной работе мы будем опираться на некоторые основополагающие концепции проектирования.

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

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

2. Начните

Настраивать

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

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

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

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

2cb1a5f77aab6012.png

Структура файла

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

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

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

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. Град — это вторичный модификатор оптической толщины шрифта, независимый от оси «Толщина». И «Толщина», и градация влияют на толщину буквы, но регулировка с помощью градации гораздо более точная.

35705cb05c8df559.gif

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

ed569d469ebd40d6.gif

Ознакомьтесь с демонстрацией Variable Fonts , чтобы поэкспериментировать с осями вариативных шрифтов вне Figma.

5. Улучшите свой стиль.

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

ecb7c0b0056fc315.png

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

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

Вы можете создать стандартную шкалу типов Material в виде стилей 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) и курсивный (ital) шрифты в настройках стиля ненадежны.

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

Мы использовали только шрифт 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. В выдвижной панели, в разделе выбранных стилей, найдите пункт «Использовать в Интернете». Добавить шрифт в код можно двумя способами: с помощью <ссылки> или @import. Вам нужен только один из них, давайте выберем @import .
  3. Скопируйте фрагмент кода из @import в точку с запятой и вставьте его в теги style после комментария import.
  4. Поскольку используется только шрифт Roboto Flex, укажите в теле документа тип шрифта, добавив "Правила CSS для указания семейств шрифтов", которые включены в код импорта. 
body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

Это импортирует выбранный шрифт и набор стилей, но использование диапазонов по осям позволяет использовать непрерывный диапазон стилей вместо отдельных стилей. Чтобы создать диапазон, соедините два значения с помощью ... (например, 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) используется параметр font-variation-settings, а не font-stretch.

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