Roboto Flex

Попробовать Roboto Flex

Насыщенности и начертания

• Thin 100Roboto Flex Thin
• ExtraLight 200Roboto Flex ExtraLight
• Light 300Roboto Flex Light
• Regular 400Roboto Flex Regular
• Medium 500Roboto Flex Medium
• SemiBold 600Roboto Flex SemiBold
• Bold 700Roboto Flex Bold
• ExtraBold 800Roboto Flex ExtraBold
• Black 900Roboto Flex Black
• ExtraBlack 1000Roboto Flex ExtraBlack

Roboto Flex — вариативный шрифт: весь диапазон насыщенностей в архиве умещается в одном файле, а названные выше насыщенности — точки в этом диапазоне. Отдельного файла с курсивом нет: наклонные начертания задаются осью «Наклон».

О шрифте Roboto Flex

Roboto Flex — гротеск, который берёт рисунок Roboto и расширяет его до вариативного шрифта с 13 осями. Пять из них привычные: насыщенность от 100 до 1000, ширина от 25 до 151, оптический размер от 8 до 144, градация (grade) от -200 до 150 и наклон от 0 до -10. Ещё восемь — параметрические оси, которые управляют деталями: толщиной штриха (XOPQ, YOPQ), шириной внутрибуквенного просвета (XTRA) и высотой прописных, строчных, верхних и нижних выносных элементов и цифр. По официальным заметкам, Google заказал у Font Bureau переработку Roboto с расчётом на большие экраны, а кириллицу и греческий разрабатывали вместе со специалистами по этим письменностям. Всё поставляется в одном прямом файле на 896 глифов с наборами латиницы, кириллицы, греческого и вьетнамского. Среди авторов названы Font Bureau и David Berlow, всего семь имён. Roboto Flex выпущен под SIL Open Font License 1.1.

Где уместен Roboto Flex

Адаптивные макеты

Ось ширины от 25 до 151 позволяет заголовку сужаться на телефоне и расширяться на большом экране без смены шрифта.

Текст в тёмной теме

Ось градации от -200 до 150 делает штрихи легче или тяжелее для тёмного или светлого фона, а сам шрифт остаётся прежним.

Очень крупный и очень мелкий кегль

Оптический размер от 8 до 144 подстраивает рисунок: с одной стороны под сноски, с другой — под заголовки размером со стену.

Выразительные заголовки в вебе

Насыщенность доходит до 1000, а ширина до 151, и такой диапазон позволяет делать анимацию и экстремальные акцидентные настройки из одного файла.

Тонкая типографская настройка

Параметрические оси вроде XTRA и YTLC меняют внутрибуквенные просветы и высоту строчных, например чтобы выровнять текст по ширине.

Глифы

Поддержка языков

В семействе есть основные буквы, которыми пишут на этих языках:

• Английский
• Французский
• Немецкий
• Испанский
• Португальский
• Итальянский
• Нидерландский
• Шведский
• Норвежский
• Датский
• Финский
• Исландский
• Каталанский
• Турецкий
• Польский
• Чешский
• Словацкий
• Венгерский
• Румынский
• Хорватский
• Словенский
• Литовский
• Латышский
• Эстонский
• Вьетнамский
• Русский
• Украинский
• Болгарский
• Греческий

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

Наборы символов в файлах: cyrillic, cyrillic-ext, greek, latin, latin-ext, vietnamese. Список языков — это проверка наличия нужных букв в шрифте, а не гарантия типографского качества для каждого языка.

Лицензия

Шрифты в пару к Roboto Flex

Пары подобраны по простым правилам: контрастная классификация и достаточно насыщенностей для основного текста. Это отправная точка, а не окончательный выбор.

Подключение Roboto Flex на сайте

Скачайте семейство, разместите файлы на своём сайте и подключите их в CSS. Не ссылайтесь на файлы с trendhub.net: здесь лежат урезанные файлы для превью, и их адреса меняются.

@font-face {
  font-family: "Roboto Flex";
  src: url("/assets/fonts/RobotoFlex-VariableFont_GRAD%2CXOPQ%2CXTRA%2CYOPQ%2CYTAS%2CYTDE%2CYTFI%2CYTLC%2CYTUC%2Copsz%2Cslnt%2Cwdth%2Cwght.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Roboto Flex", sans-serif;
}

Или подключите шрифт из официального источника. Google Fonts отдаёт Roboto Flex с такой разметкой:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100..1000&display=swap" rel="stylesheet">

Что важно знать

Один файл, отдельного курсива нет

Наклонный текст получается через ось наклона от 0 до -10, а не из второго файла.

Двадцать именованных экземпляров

В шрифте названы десять насыщенностей, от Thin 100 до ExtraBlack 1000, и у каждой есть наклонный курсивный экземпляр; ширина и остальные параметры настраиваются через оси.

Параметрические оси обозначаются прописными тегами

XOPQ, YOPQ, XTRA, YTUC, YTLC, YTAS, YTDE и YTFI задаются через font-variation-settings.

Насыщенность выходит за 900

Ось насыщенности заканчивается на 1000, дальше привычного Black 900.

Вопросы и ответы

Подборки с Roboto Flex

• Вариативные шрифты с осью оптического размера

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

• Вариативные шрифты с необычными осями

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

Похожие шрифты

Другие семейства той же классификации, по числу общих тегов назначения. Все шрифты в категории «Гротески»