Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>21 мар 2023</li>

3 <li>0</li>

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

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

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

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

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

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

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

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

12 Скриншот: сайт<a>Fonts.google</a>/ Skillbox MediaВ целом Roboto можно считать не просто готовым набором шрифтов, а work-in-progress ― "проектом в стадии разработки". Все шрифты постоянно дорабатывают и улучшают, добавляют опции и новые шрифтовые продукты.

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

14 <ul><li>базовый гротеск<a>Roboto</a>,</li>

15 <li>брусковый<a>Roboto Slab</a>,</li>

16 <li>зауженный<a>Roboto Condensed</a>,</li>

17 <li>моноширинный<a>Roboto Mono</a>,</li>

18 <li>антиква<a>Roboto Serif</a>,</li>

19 <li>вариативный<a>Roboto Flex</a>.</li>

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

21 Шрифтовая пара Roboto и Roboto SlabИзображение: MARTA CERDA ALIMBAU /<a>Behance</a>Omelet - независимое креативное агентство из Лос-Анджелеса. Для его айдентики дизайнеры собрали пару из Roboto Slab и Roboto ― шрифтов, которые обязаны хорошо работать вместе. К тому же рядом с броским "битым" логотипом такое сочетание не перетягивает на себя слишком много внимания.

22 Экспериментальная типографика на плакатеИзображение: Oksana Hrabko /<a>Behance</a>Roboto - универсальный и нейтральный, но это не мешает использовать его в типографических экспериментах. Композиция этого плаката составлена только из текстов, оформленных Roboto.

23 Шрифтовая пара Roboto и VicenzaСкриншот: сайт<a>Simone Scarcelli</a>/ Skillbox MediaЛоготип видеомейкера Симона Скарчелли оформлен парой из Roboto и <a>Vicenza</a>. Такое, кажется, классическое сочетание "гротеск + антиква" здесь выглядит эффектно: Roboto - максимально простой шрифт, а Vicenza ― по-итальянски роскошный.

24 Руководство по использованию айдентики Стэнфордского университетаСкриншот: сайт<a>Stanford</a>/ Skillbox MediaУ пресс-релизов и статей Стэнфордского университета оригинальная фирменная типографика. Для заголовков авторы брендбука рекомендуют использовать переходную антикву<a>Source Serif</a>, а для основного текста - шрифт без засечек Roboto. Традиционно большие тексты оформляют иначе - антикву берут для основного объёма.

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

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

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

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

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

30 <ul><li><a>FF DIN</a>,</li>

31 <li><a>DIN PT</a>,</li>

32 <li><a>System Blank</a>,</li>

33 <li><a>Akkurat</a>,</li>

34 <li><a>Open Sans</a>.</li>

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

36 Гротеск Noto в дизайне сайта на японском языкеСкриншот: сайт<a>Food Culture 2021</a>/ Skillbox Media<a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>