Дизайн
#статьи

Шрифт Roboto: где используют и с чем сочетают

Рассказываем, для каких проектов подходит Roboto, и показываем примеры удачных шрифтовых пар с ним.

Изображение: Saumya Shah / Behance

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

Разберём одну из самых популярных гарнитур — Roboto — и расскажем, с чем её сочетать.

Roboto — что это за шрифт

Roboto — это суперсемейство гарнитур Material Design дизайн-системы Google. Эти шрифты с насыщенностью от Light до Medium используют в типографике приложений на Android — во всех блоках описаний, в подсказках и кнопках.

Геометрический неогротеск Roboto был разработан внутри компании Google дизайнером интерфейсов Кристианом Робертсоном. Его представили в 2011 году одновременно с Ice Cream Sandwich, четвёртой версией Android. Он заменил предыдущую системную гарнитуру — Droid.

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

В рисунке букв есть черты одновременно несколько суперпопулярных гарнитур — DIN, Univers, Helvetica. Из-за этого критик Stephen Coles когда-то назвал его «франкеншрифтом».

Скриншот: сайт Fonts.google / Skillbox Media

В целом Roboto можно считать не просто готовым набором шрифтов, а work-in-progress ― «проектом в стадии разработки». Все шрифты постоянно дорабатывают и улучшают, добавляют опции и новые шрифтовые продукты.

Сейчас в это суперсемейство входят:

Логотип ООН версии 2020 года оформлен Roboto Bold. Этот шрифт используют в версиях на шести официальных языках организации: английском, китайском, французском, арабском, испанском и русском
Изображение: Wikimedia Commons
Типографика с Roboto — популярное решение в дизайне лендингов. Например, этим шрифтом оформлены ёмкие тексты в лонгриде об агенте Купере из сериала «Твин Пикс»
Скриншот: Agent Dale Cooper FBI / Skillbox Media
Дизайн интернет-магазина свечей и ароматического мыла — с Roboto Condensed. Вне интерфейсов Android он выглядит трендово и минималистично
Скриншот: сайт Patissoncha / Skillbox Media
Шрифтовая пара Roboto Mono и Bebas Neue в дизайне портфолио. Основной текст кажется набранным на печатной машинке, но при этом читать его с экрана легко
Скриншот: сайт Alexis Pazoumain / Skillbox Media
Компания Google представила Roboto Serif в своём блоге Material Design 16 февраля 2022 года. Его создали специально для оформления больших текстов в цифровом формате — лонгридов и даже романов
Скриншот: сайт Fonts.google / Skillbox Media

Roboto в интерфейсе

Шрифтовая пара Roboto и Roobert
Скриншот: сайт Skylum / Skillbox Media

Заголовки в карточках о преимуществах фоторедактора Luminar Neo оформлены Roobert, а пояснения — Roboto. Оба шрифта — геометрические гротески, но у Roobert более акцидентный характер.

Roboto в фирменном стиле

Шрифтовая пара Roboto и Roboto Slab
Изображение: MARTA CERDA ALIMBAU / Behance

Omelet — независимое креативное агентство из Лос-Анджелеса. Для его айдентики дизайнеры собрали пару из Roboto Slab и Roboto ― шрифтов, которые обязаны хорошо работать вместе. К тому же рядом с броским «битым» логотипом такое сочетание не перетягивает на себя слишком много внимания.

Roboto в постере

Экспериментальная типографика на плакате
Изображение: Oksana Hrabko / Behance

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

Roboto в логотипе

Шрифтовая пара Roboto и Vicenza
Скриншот: сайт Simone Scarcelli / Skillbox Media

Логотип видеомейкера Симона Скарчелли оформлен парой из Roboto и Vicenza. Такое, кажется, классическое сочетание «гротеск + антиква» здесь выглядит эффектно: Roboto — максимально простой шрифт, а Vicenza ― по-итальянски роскошный.

Roboto в больших текстах и печати

Руководство по использованию айдентики Стэнфордского университета
Скриншот: сайт Stanford / Skillbox Media

У пресс-релизов и статей Стэнфордского университета оригинальная фирменная типографика. Для заголовков авторы брендбука рекомендуют использовать переходную антикву Source Serif, а для основного текста — шрифт без засечек Roboto. Традиционно большие тексты оформляют иначе — антикву берут для основного объёма.

Где скачать Roboto

Все шрифты, входящие в суперсемейство Roboto, бесплатны. Они распространяются под щедрой лицензией Apache.

Проще всего их брать в библиотеке Google Fonts: файлы и коды будут качественными и с полным набором опций.

Также любое начертание можно активировать в Adobe Fonts, если у вас есть подписка на сервис.

Аналоги Roboto

Главный аналог и конкурент Roboto ― это San Francisco, или SF, системный шрифт iOS. Это тоже неогротеск, созданный специально для цифровых пространств.

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

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

Гротеск Noto в дизайне сайта на японском языке
Скриншот: сайт Food Culture 2021 / Skillbox Media

Больше интересного про дизайн в нашем телеграм-канале.  Подписывайтесь!


Жизнь можно сделать лучше!
Освойте востребованную профессию, зарабатывайте больше и получайте от работы удовольствие.
Каталог возможностей
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована