Roboto

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

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

• Thin 100Roboto Thin Thin Italic
• ExtraLight 200Roboto ExtraLight ExtraLight Italic
• Light 300Roboto Light Light Italic
• Regular 400Roboto Regular Курсив
• Medium 500Roboto Medium Medium Italic
• SemiBold 600Roboto SemiBold SemiBold Italic
• Bold 700Roboto Bold Bold Italic
• ExtraBold 800Roboto ExtraBold ExtraBold Italic
• Black 900Roboto Black Black Italic

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

О шрифте Roboto

Roboto — семейство гротесков, которое в официальном описании характеризуется как двойственное: механический, в основном геометрический скелет сочетается с дружелюбными открытыми изгибами. Буквы сохраняют естественную ширину, а не втискиваются в жёсткий ритм; в описании это связывают с ритмом чтения гуманистических шрифтов и антиквы. На образце штрихи ровные, «a» двухэтажная, а прописная «R» опирается на прямую диагональную ногу. С июля 2020 года Roboto — вариативный шрифт с двумя осями: насыщенностью от 100 до 900 и шириной от 75 до 100, причём узкий край соответствует прежнему Roboto Condensed. Девять именованных насыщенностей есть в прямом начертании и курсиве, всего 18 начертаний. В 1 326 глифах поддерживаются латиница, кириллица, греческий и вьетнамский. В авторах названы Christian Robertson, ParaType и Font Bureau, лицензия — SIL Open Font License 1.1.

Где уместен Roboto

Интерфейсы приложений и сайтов

Девять насыщенностей с курсивом покрывают все уровни интерфейса — от тонких акцидентных цифр Thin до кнопок Bold.

Плотные таблицы и боковые панели

Ось ширины сужается до 75, и в колонку помещается больше знаков, а шрифт остаётся в том же семействе.

Основной текст

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

Продукты на нескольких письменностях

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

Системы, которым нужны брусковый и моноширинный спутники

В официальном описании Roboto Slab и Roboto Mono названы членами того же суперсемейства — для заголовков и кода.

Глифы

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

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

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

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

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

Лицензия

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

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

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

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

@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/Roboto-Italic-VariableFont_wdth%2Cwght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/Roboto-VariableFont_wdth%2Cwght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

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

<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:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

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

Ось ширины — от 75 до 100

Она сужает шрифт в сторону прежнего Roboto Condensed, но не делает его шире.

Два вариативных файла

Прямое начертание и курсив лежат в отдельных файлах, в каждом обе оси.

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

Подборки с Roboto

• Чёткие гротески для интерфейсов приложений

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

• Шрифты для субтитров и подписей к видео

  Простые прочные гротески для субтитров и подписей, выбранные за чёткие буквы в мелких размерах и, как правило, широкий охват языков.

• Вариативные шрифты с осью ширины

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

• Шрифтовые системы: гротеск, антиква и моноширинный в паре

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

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

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