Шрифты roboto: Roboto Regular шрифт

Шрифты и работа с ними

Страшным сном дизайнера и верстальщика является фраза заказчика «Поиграйся со шрифтами». Многие эту фразу слышали, но, а как же поиграть со шрифтами? CSS предоставляет много правил для стилизации шрифтов. С некоторыми из таких свойств вы уже знакомы — это свойство font-weight и font-size.

Помимо насыщенности, CSS позволяет управлять следующими настройками:

• Семейство шрифтов;
• Стиль шрифта;
• Стиль строчных символов;
• Размер шрифта;
• Межстрочный интервал.

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

Семейство шрифтов

CSS позволяет указывать шрифты, которые будут использованы на сайте. Для этого используется свойство font-family. Оно принимает список шрифтов, которые могут быть загружены на сайте. Это может быть одно семейство шрифтов или сразу несколько. Если указано несколько шрифтов, то браузер будет считывать их слева направо до первого шрифта, который он сможет использовать. Остальные шрифты будут игнорироваться. Например:

.font {
  font-family: Georgia, "Times New Roman";
}

Если у пользователя в системе есть шрифт Georgia, то будет применён он. В противном случае браузер будет искать шрифт Times New Roman. Теперь возможны две ситуации:

• У пользователя в системе установлен шрифт Times New Roman — шрифт применится к странице.
• У пользователя в системе не установлен шрифт Times New Roman — браузер подставит шрифт из основных настроек браузера. Это необходимо для возможности отобразить контент на странице.

А какой шрифт именно выберет браузер? Тут всё зависит от настроек. Может случиться так, что стандартный шрифт будет из другого типа. Это может «сломать» визуальную часть сайта. Все шрифты можно разделить на три большие группы:

• Антиква или шрифты с засечками. Такие шрифты чаще всего используется в книгах и новостных сайтах. В CSS обозначается serif.
• Гротеск или шрифты без засечек. Основной тип шрифтов на сайтах. Прямо сейчас вы читаете именно такой шрифт. В CSS обозначается sans-serif.
• Моноширинный шрифт. У этого семейства все символы имеют одинаковую ширину. Вы можете увидеть такой шрифт в терминалах или редакторах кода. В CSS обозначается monospace.

При указании шрифтов также возможно указать и основное семейство шрифтов. Если ни один из указанных шрифтов не был найден, то браузер подберёт системный шрифт из того семейства, которое было указано. Дополним пример семейством шрифтов по умолчанию. В примере указаны шрифты из семейства антиква, поэтому стоит добавить соответствующее значение.

.font {
  font-family: Georgia, "Times New Roman", serif;
}

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

Установка новых шрифтов

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

• .woff/.woff2 — шрифт формата Web Open Font Format. Распространённый формат, который поддерживается большинством современных браузеров. В настоящих условиях вы можете использовать только этот формат, если нет альтернатив.
• .ttf — шрифт формата TrueType. Данный формат был придуман в 80-е года 20 века и сейчас используется для поддержки старых браузеров. Совместим с современными браузерами. Золотая середина форматов.
• .eot — шрифт формата Embedded OpenType. Это наиболее старый формат. Его использование необходимо только в случае поддержки старых браузеров, например, Internet Explorer 6.0. Ситуация редкая, поэтому его использование почти не встречается.

Для установки шрифта используется конструкция @font-face. Она позволяет подключить шрифт в различных расширениях, определить имя и путь к файлу. На примере шрифта Roboto воспользуемся такой конструкцией.

Пусть наш проект имеет директорию fonts, внутри которой находятся файлы шрифтов.

project/
├── css/
│   └── style.css
├── fonts/
│   │── Roboto-Regular.ttf
│   │── Roboto-Bold.ttf
│   └── Roboto-Light.ttf
 

Хорошим тоном является указание @font-face в самом начале CSS файла, а не перед первым использованием шрифта. Это позволит правильнее структурировать CSS. Есть два основных свойства, которые принимает @font-face:

• font-family — Имя подключаемого шрифта. Именно по нему можно обратиться после подключения.
• src — Путь к файлу со шрифтом.

После указания этих свойств уже можно пользоваться шрифтом. Подключим Roboto-Regular.

@font-face {
  font-family: 'Roboto Regular';
  src: url('../fonts/Roboto-Regular.ttf');
}

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

Следующий шаг — подключить другие два начертания. Можно воспользоваться примером выше. Тогда наш CSS приобретёт следующий вид:

@font-face {
  font-family: 'Roboto Regular';
  src: url('../fonts/Roboto-Regular.ttf');
}

@font-face {
  font-family: 'Roboto Bold';
  src: url('../fonts/Roboto-Bold.ttf');
}

@font-face {
  font-family: 'Roboto Light';
  src: url('../fonts/Roboto-Light.ttf');
}

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

h2 {
  font-family: 'Roboto Bold', sans-serif;
}

h3 {
  font-family: 'Roboto Light', sans-serif;
}

Способ хоть и рабочий, но немного сложный. Вместо одного названия шрифта и управления его насыщенностью свойством font-weight приходится указывать три разных названия для каждого начертания в отдельности.

@font-face позволяет указывать насыщенность шрифта с помощью font-weight. Это позволит подключить все начертания с использованием всего одного имени. В остальном запись не будет отличаться от того, что было в прошлом примере.

@font-face {
  font-weight: 400; /* Соответствует значению normal */
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.ttf');
}

@font-face {
  font-weight: 700; /* Соответствует значению bold */
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Bold.ttf');
}

@font-face {
  font-weight: 300;
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Light.ttf');
}

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

h2 {
  font-weight: bold;
}

h3 {
  font-weight: 300;
}
 

Стиль шрифта

Помимо обычного начертания, CSS позволяет задать и другой вариант отображения шрифта — курсивный. Для этого используется свойство font-style, которое может принимать одно из трёх значений:

• normal — стандартное значение. Соответствует нормальному стилю отображению шрифта. Именно такой стиль вы читаете прямо сейчас.
• italic — курсивное начертание. Данное начертание имеет наклонные буквы, в отличие от нормального стиля. Вот так выглядит курсивный шрифт.
• oblique — тоже курсивное начертание. Зачастую оно не отличается от значения italic.

Но почему существует два похожих значения для курсива? На самом деле они не очень похожие. Курсив, который задаётся значением italic, является самостоятельным шрифтом, для которого есть отдельный файл в системе или на сервере. Он относится больше к рукописному тексту, тогда как oblique искусственно наклоняет символы текущего шрифта.

.italic {
  font-style: italic;
}

Строчные символы

С помощью CSS можно задать такой вид строчных символов как «Капитель».

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

Текст с использованием капители

По своей высоте эта фраза не отличается от простого набора строчными символами, но стилистически они подстраиваются под заглавные символы.

Капитель устанавливается с помощью свойства font-variant. У него возможны два значения:

• normal — стандартная стилистика строчных символов.
• small-caps — капитель.

p {
  font-variant: small-caps;
}

Межстрочный интервал

Межстрочный интервал, или, как его ещё называют интерлиньяж — это расстояние по вертикали между базовыми линиями одного и другого символа в соседних строках. Так создаётся расстояние между этими строками. Важным элементом при создании дизайна является использование достаточного межстрочного интервала. Чаще всего это 150% от значения размера шрифта. Например, если шрифт имеет размер 16 пикселей, то межстрочный интервал должен быть не менее 24 пикселей. Такое значение не является необходимым правилом и от него всегда можно отступить.

Для указания межстрочного интервала используется свойство line-height. Оно может принимать значения с различными единицами измерениями. Чаще всего используют число, указывающее, во сколько раз интервал больше размера шрифта.

p {
  font-size: 16px;
  line-height: 1.5;
}

Обобщённое правило

• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family

Их можно указывать не только по отдельности, но и все вместе с помощью одного CSS правила font. Шесть разных правил внутри одного! Это может быть удобно, если действительно нужны все значения. При этом вы не обязаны указывать все значения. Единственное ограничение — наличие значений для font-size и font-family. Остальные значения можно не указывать. Укажем значения для всех этих свойств внутри правила font:

p {
  font: italic small-caps bold 16px/24px Roboto, sans-serif;
}

Важно обратить внимание на запись 16px/24px. Внутри правила font так обозначаются свойства font-size и line-height.

Использование одного правила или нескольких

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

1. Запоминание правильного порядка значений. Используя обобщённые свойства вам всегда стоит держать в голове верный порядок значений свойств. В этом легко можно ошибиться на первых этапах изучения. Хорошим вариантом будет использование отдельных свойств, но в том порядке, в котором они идут в обобщённом свойстве. С опытом вы сможете переключиться на одно правило.
2. Обобщённые свойства перебивают отдельные. Если в коде вы указали font-variant: small-caps;, а потом для этого же элемента применили font: 16px/24px sans-serif;, то капитель будет сброшена в значение по умолчанию.

Используйте обобщённые свойства только один раз при задании стандартных стилей. Например, свойство font отлично подойдёт для селектора body, а модификации текста будут производиться одиночными свойствами.

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

• задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
• расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
• изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

Roboto Regular шрифт

Roboto семейство состоит из 16 шрифты

Cобственный текст

Pазмер очень маленькиймаленькийсреднийбольшойочень большой

Oтправить

Назад

• Ударения (частичные)
• Ударения (полные)
• Евро

Roboto-Regular.ttf

Таблица символов

Основная информация о шрифте

О авторских правах

Font data copyright Google 2011

Шрифтовая семья

Roboto

Шрифтовая подсемья

Regular

Уникальная подсемейная идентификация

Google:Roboto:2011

Полное имя шрифта

Roboto Regular

Имя настольной версии

Version 1.00000; 2011

Имя поскрипт шрифта

Roboto-Regular

О торговой марке

Roboto is a trademark of Google.

Дизайнер

Дополнительная информация о шрифте

Поддерживаемые платформы

ПлатформаКодировка

ЮникодЮникод 2.0 и прогрессивная семантика, только Юникод BMP

MacintoshЛатинская

MicrosoftТолько BMP юникод

Детали шрифта

Создан2008-09-12

Просмотр1

Количество глифов856

Единиц на Em2048

Права внедренияPазрешено внедрение для предварительного просмотра и печати

Класс семействаБез засечек

НасыщенностьСредний (нормалный)

ШиринаСредний (нормальный)

Mac стильЖирные

НаправлениеГлифы направленные слева направо + нейтральные

УзорPегулярный

ВысотаНе моноширинный

Roboto-Regular.ttf
Roboto-CondensedItalic.ttf
Roboto-BoldCondensed.ttf
Roboto-Condensed.ttf
DroidSans-Bold.ttf
Roboto-BoldItalic.ttf
Roboto-Italic.ttf
Roboto-BoldCondensedItalic.ttf
Roboto-BlackItalic.ttf
Roboto-LightItalic.ttf
Roboto-Black.ttf
Roboto-MediumItalic.ttf
Roboto-ThinItalic.ttf
Roboto-Medium.ttf
Roboto-Light.ttf
Roboto-Thin.ttf

• Ударения (частичные)
• Ударения (полные)
• Евро

Roboto-CondensedItalic.ttf

• Ударения (частичные)
• Ударения (полные)
• Евро

Roboto-BoldCondensed.ttf

• Ударения (частичные)
• Ударения (полные)
• Евро

Roboto-Condensed.ttf

• Ударения (частичные)
• Ударения (полные)
• Евро

DroidSans-Bold.ttf

• Ударения (частичные)
• Ударения (полные)
• Евро

Roboto-BoldItalic.ttf

• Ударения (частичные)
• Ударения (полные)
• Евро

Roboto-Italic.ttf

• Ударения (частичные)
• Ударения (полные)
• Евро

Roboto-BoldCondensedItalic.ttf

• Ударения (частичные)
• Ударения (полные)
• Евро

Roboto-BlackItalic.ttf

• Ударения (частичные)
• Ударения (полные)
• Евро

Roboto-LightItalic.ttf

• Ударения (частичные)
• Ударения (полные)
• Евро

Roboto-Black.ttf

• Ударения (частичные)
• Ударения (полные)
• Евро

Roboto-MediumItalic.ttf

• Ударения (частичные)
• Ударения (полные)
• Евро

Roboto-ThinItalic.ttf

• Ударения (частичные)
• Ударения (полные)
• Евро

Roboto-Medium.ttf

• Ударения (частичные)
• Ударения (полные)
• Евро

Roboto-Light.ttf

• Ударения (частичные)
• Ударения (полные)
• Евро

Roboto-Thin.ttf

Дизайн-вопрос: как выбрать шрифт

У меня на главной странице давно висит такой текст:

Веду рубрику «Дизайн-вопрос». Отвечаю на вопросы о дизайне и смежных областях. Не халтурю, не пишу отписки и отвечаю на совесть: частенько для ответа приходится найти, прочитать и изучить исследования, рекомендации, набрать и подобрать иллюстрации или примеры. Вопросы пишите на [email protected].

Я не думал, что кто-то его вообще видит, но на днях получил неожиданный вопрос. Что ж. Назвался груздем — полезай в кузов.

Матвей Правосудов спрашивает:

Я решил использовать несистемный Робото в интерфейсе, потому что он показался мне нейтральным и подходящим для дизайна. Часть команды была против использования несистемного шрифта, потому что это лишнее время на загрузку интерфейса, траблы с лицензией и вообще, пользователи не заметят разницы между каким-нибудь Ариалом и Робото. В конечном итоге мы оставили Робото, но вот нормально обосновать выбор я не смог.

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

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

Матвей!

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

Системный шрифт

Отсутствие загрузки и более хороший рендеринг — это, на мой взгляд, справедливые аргументы за системный шрифт. Но есть и аргументы против.

Системный — разный везде

Первый — системный шрифт означает разный внешний вид на разных платформах.

Для получения некоего «системного шрифта» недостаточно просто вписать Ариал. Ариала нет на маке, компьютерах с линуксом и мобильных. Если на этих платформах есть целевые пользователи, то кроме Ариала для них понадобится другой шрифт: Робото для андроида, Сан-Франциско для макос и айос, какой-нибудь sans-serif для линуксов (Опенсанс, Либерейшен или какой-нибудь Дежавю).

На нативный стэк перешел, например, Бутстрап:
getbootstrap.com/docs/4.1/content/reboot/#native-font-stack.

Атлассиан тоже перешел: Typography

По своей идее на «системный шрифт» похож native font stack. По сути это самый родной шрифт на каждой из платформ. Вот как это выглядит в виде CSS-кода:

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Нативный стэк выглядит везде по-разному и местами эти отличия существенны. Даже не каждый дизайнер заметит разницу между Ариалом, Робото и Сан-Франциско. А вот Сан-Франциско и Сегой отличаются между собой сильней, из-за этого разницу могут увидеть больше людей.

Интерактивный пример: https://jsfiddle.net/mikeozornin/3q0hLgpk.
Веб-шрифты не подключены, потребуется установить оба шрифта локально

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

Сегой и Робото

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

Каждая поддерживаемая платформа это дополнительный системный шрифт, который нужно перепроверить и при необходимости адаптировать. Лишний код на адаптацию: компенсация пиксельных отступов, размеров глифов, — это лишнее визуальное тестирование. Можно обойтись и без тестирования, но тогда будет выглядеть «как получится». Общий шрифт снимает бо́льшую часть этих вопросов. Такие аргументы особенно понятны разработчикам и инженерам по качеству. Им бы вообще лишь бы что-то везде сделать одинаковым, чтобы не ломалось в будущем :—)

Системный — без своего «Я»

Шрифт Яндекса — Yandex Sans — рассказ Кости Горского о том, зачем и как делали фирменный шрифт Яндекса. Костя был в то время дизайн-директором Яндекса

Второй важный аргумент против системного шрифта — продукт не получает свой язык. На Ариале сложно сделать какой-то узнаваемый визуальный язык, интерфейс будет похож на другие продукты. Наличие своего уникального языка не всегда важно, но часто это может быть определяющим фактором. В этом плане Робото, например, стал языком Гугла, и все интерфейсы с ним выглядят немного по-гугловому.

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

Конкретно Ариал — не очень

Третий минус конкретно у ариала. Он не очень хороший (но это мало кто заметит) и у него может быть не хватить начертаний. Если вы захотите тонкое начертание, то ариал вам не помощник.

Вместо вывода

Типографика в гайдах Контура

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

Как выбрать свой шрифт

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

1. Формулирую требования

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

Про функцию, эстетику и доступность я писал в посте Дизайн-вопрос: зачем в мире столько шрифтов

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

Функция

1. Начертания
   Минимум: Обычное, полужирное, тонкое (все с курсивом), хорошо если больше.

2. Набор цифр
   Есть маюскульные цифры, минускульные опциональны. Есть пропорциональные и моноширинные цифры (скорей всего это есть у всех), моноширинные дефолт.

3. Хорошая читаемость
   Лучше открытый или полуоткрытый шрифт с высоким x-height. Хорошо бы иметь форму 6 и 9 как в Авенире и Лато, а не как в Гельветике (иногда доступны Opentype-фичей Straight-sided six and nine). Должен хорошо читаться даже на плохих экранах с TN-матрицей.

4. Универсальный
   Было бы хорошо, чтобы он хорошо работал и в печатной продукции (руководства, отчеты, маркетинговые материалы). Вдруг мы сможем использовать его и там.

5. Высокая емкость
   В наших продуктах много данных, поэтому хорошо бы, чтобы шрифт не был слишком широким.

Эстетика

1. Чистый.

2. Простой, но не упрощенный.

3. Выглядит технологично.
   Создаёт ощущение технологий и хай-тека, а не теплой ламповости или стимпанка (как Текстбук, Гилл или 20 копеек).

4. Нормальная кириллица.

5. Не должен казаться очень чужеродным, создавать из-за непривычности ощущение халтуры.

Доступность

1. Доступен в качестве веб-шрифта для использования в непубличном веб-интерфейсе.

2. Желательно не сильно заезженный, как минимум не фирменный шрифт наших основных конкурентов.

3. Желательно не космически дорогой.

У вас требования могут быть другие.

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

paratype.livejournal.com/58340.html о создании шрифтов PT Astra

У кого-то будут другие требования к функции: кто-то предпочтет узнаваемость и уникальность в угоду считываемости. У кого-то будут очень строгие требования к емкости шрифта. Именно из-за особых требований к емкости шрифта родились шрифты PT Astra.

Другие фирменные шрифты:
YouTube
Airbnb
Uber
Государственные системы России

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

1. Шрифт должен иметь своё лицо, отличаться от конкурентов.
2. И в то же время быть спокойным, нейтральным, не слишком характерным.
3. Выражающим наши ценности:
   открытый,
   современный,
   умный,
   нейтральный,
   локальный,
   технологичный, но с человеческим лицом.
4. Сделанным в первую очередь для кириллического набора.
5. Очень хорошо читаемым, разборчивым и применимым во всех современных средах.
6. Совпадающим по основным метрикам и пропорциям с Ариалом.
7. Имеющим несколько степеней насыщенности.

Отсюда: https://medium.com/@k00/шрифт-яндекса-yandex-sans-1c2ab7dfd537

Или вот требования от которых отталкивались при разработке шрифта для интерфейса государственных систем России (ещё не вышел):

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

• Высокие прописные;
• Очень крупные строчные;
• Большая ёмкость, т. е. знаки скорее узкие, чем широкие;
• Просторные межбуквенные расстояния с расчётом на экран не слишком высокого разрешения;
• Короткие выносные элементы, чтобы экономить место на служебных панелях и кнопках;
• Скорее гротеск, чем антиква;
• Скорее открытый или полуоткрытый;
• Технически подготовленный для работы на экране.

Эти параметры, в общем, не имеют отношения к характеру шрифта, но в рамках жанра должны выдерживаться. Можно привести примеры интерфейсных шрифтов: Lucida Grande, Segoe UI, Roboto, San Francisco UI и т. д.

Отсюда: https://leksandra.livejournal.com/120045.html

Один из авторов шрифта Yandex Sans Кристиан Шварц в своей лекции про шрифты рассказывает как они искали форму шрифтов для разных компаний. Показателен пример ДойчеБана (немецких железных дорог). Кристиан с командой долго не могли ничего придумать. В какой-то момент решили начать с расписания, ключевой вещи. И они сделали цифры, которые в этом расписании хорошо различаются. И конкретна эта различимость букв стала основной будущего шрифта:

Лекция Кристиана Шварца (начало дойчебана с 16:25).
001. Making something out of something: Typefaces, history, culture, and meaning

2. Собираю таблицу

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

Таблица выглядит как-то так:

Про проблемы с кириллицей в Гугл.Фонтсе я писал в посте: Гугл.Фонтс и кириллица

Шрифты с Гугл.Фонтс нужно я дополнительно проверяю:

3. Смотрю в деле

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

Через некоторое время понятно, как он: ок или нет, какие плюсы и какие минусы. Иногда после использования какого-то шрифта я уточняю требования и отсеиваю шрифты.

Вот некоторые советы Ани Даниловой на сайте бюро:

4. Выбираю доступные

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

Как убедить команду в выбранном шрифте

Алгоритма как убедить у меня нет. Мне не приходилось много спорить о шрифтах с недизайнерами. Мои собеседники соглашались с результатом (картинкой), или мне верили заранее, или мои объяснения (все 4 шага), помогали.

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

Мне кажется ключевое в «убеждении» — отсутствие этого убеждения. Если не пытаться убедить, а настроить себя на помощь своему слушателю, сформулировать миссию наподобие «помочь человеку вместе с тобой принять взвешенное решение о выборе шрифта», то и убеждение пройдет легче.

Надеюсь чем-нибудь помог. Пишите, если остались вопросы.

В заключение оставлю разные шрифтовые доклады, которые мне кажутся подходящими к теме поста:

Как установить Google Roboto Font на Windows, Mac и Linux

Шрифт Roboto — это шрифт без засечек, созданный Google со времен Android 4.0 (Ice Cream Sandwich). Это элегантный шрифт, который хорошо отрисовывается на экранах с высоким разрешением, таких как телефоны Android.

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

Если вы любите шрифт и хотите использовать его в Windows, Mac, Linux или даже на своем веб-сайте, то вам повезло. Разработчики Google выпустили шрифт Roboto бесплатно, и вы можете использовать его без ограничений (в рамках лицензии на программное обеспечение Apache).

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

Загрузить Google Roboto

На какой бы платформе вы ни работали, вам сначала нужно скачать пакет шрифтов Roboto.

Перейдите на сайт шрифтов Roboto и загрузите шрифт (ZIP-файл). Вам нужно нажать «Выбрать этот шрифт», а затем в нижней части экрана щелкнуть на темной вкладке с надписью «1 выбрано семейство».

Во вновь открывшейся вкладке щелкните значок «Загрузить», чтобы загрузить шрифт Roboto в виде zip-файла.

Извлеките заархивированный файл в папку по вашему выбору. Откройте папку, и вы увидите все шрифты Roboto внутри.

Установите шрифт Roboto в Windows 10

Откройте папку шрифтов Roboto. Выберите все шрифты. Щелкните правой кнопкой мыши и выберите «Установить».

Это установит шрифты на ваш компьютер с Windows. Теперь вы можете использовать шрифт Roboto в своих приложениях.

Установить шрифт Roboto в Linux

Откройте домашнюю папку и включите опцию для просмотра скрытых файлов / папок. Найдите папку .fonts. Если его не существует, создайте его. Затем переместите папку шрифтов Roboto в эту папку .fonts.

Перезапустите LibreOffice, GIMP, Photoshop или любые другие приложения, которые вы используете. Вы должны увидеть шрифт Roboto, доступный для выбора.

Установить шрифт Roboto на Mac

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

Установить шрифт Roboto на свой веб-сайт

Если вы хотите использовать шрифт Roboto на своем веб-сайте, вы можете используйте синтаксис CSS3 @ font-face для встраивания внешнего шрифта в вашу веб-страницу.

Перейдите на страницу шрифта FontSquirrel Roboto, нажмите «Набор шрифтов», затем выберите предпочитаемые форматы шрифта, подмножество (если есть) и нажмите «Загрузить». @ Font-Face Kit.

Извлеките заархивированный файл в папку шрифтов вашего сайта. Откройте таблицу веб-стилей и добавьте следующий код:

@ font-face {font-family: ‘Roboto’, src: url’Roboto-Regular-webfont.eot ‘, src: url’Roboto-Regular-webfont. eot? #iefix ‘format’embedded-opentype’, url’Roboto-Regular-webfont.woff ‘format’woff’, url’Roboto-Regular-webfont.ttf ‘format’truetype’, url’Roboto-Regular-webfont.svg # RobotoRegular ‘format’svg’, font-weight: normal, font-style: normal, @ font-face {font-family: ‘Roboto’, src: url’Roboto-Italic-webfont.eot ‘, src: url ‘Roboto-Italic-webfont.eot? #Iefix’ format’embedded-opentype ‘, url’Roboto-Italic-webfont.woff’ format’woff ‘, url’Roboto-Italic-webfont.ttf’ format’truetype ‘, url ‘Roboto-Italic-webfont.svg # RobotoItalic’ format’svg ‘, font-weight: normal, font-style: italic, @ font-face {font-family:’ Roboto ‘, src: url’Roboto-Bold-webfont .eot ‘, src: url’Roboto-Bold-webfont.eot? #iefix’ format’embedded-opentype ‘, url’Roboto-Bold-webfont.woff’ format’woff ‘, url’Roboto-Bold-webfont.ttf ‘format’truetype’, url’Roboto-Bold-webfont.svg # RobotoBold ‘format’svg’, font-weight: bold, font-style: normal, @ font-face {font-family: ‘Roboto’, src: url’Roboto-BoldItalic-webfont.eot ‘, src: url’Roboto-BoldItalic-webfont.eot? #iefix’ format’embedded-opentype ‘, url’Roboto-BoldItalic-webfont.woff’ format’woff ‘, url’ Roboto-BoldItalic-webfont.ttf ‘format’truetype’, url’Roboto-Bold Italic-webfont.svg # RobotoBoldItalic ‘format’svg’, font-weight: полужирный, font-style: italic, @ font-face {font-family: ‘Roboto’, src: url’Roboto-Thin-webfont.eot ‘ , src: url’Roboto-Thin-webfont.eot? #iefix ‘format’embedded-opentype’, url’Roboto-Thin-webfont.woff ‘format’woff’, url’Roboto-Thin-webfont.ttf ‘format’ truetype ‘, url’Roboto-Thin-webfont.svg # RobotoThin’ format’svg ‘, font-weight: 200, стиль шрифта: обычный, @ font-face {font-family:’ Roboto ‘, источник: url’Roboto -ThinItalic-WebFont.eot ‘, src: url’Roboto-ThinItalic-webfont.eot? #iefix’ format’embedded-opentype ‘, url’Roboto-ThinItalic-webfont.woff’ format’woff ‘, url’Roboto-ThinItalic-webfont.ttf’ format’truetype ‘, url’Roboto-ThinItalic-webfont.svg # RobotoThinItalic’ format’svg ‘, в соответствии с лицензией на программное обеспечение Apache. font-weight: 200, font-style: italic, @ font-face {font-family: ‘Roboto’, источник: url’Roboto-Light-webfont.eot ‘, источник: url’Roboto-Light-webfont.eot? #iefix ‘format’embedded-opentype’, url’Roboto-Light-webfont.woff ‘format’woff’, url’Roboto-Light-webfont.ttf ‘format’truetype’, url’Roboto-Light-webfont.svg # RobotoLight ‘format’svg’, font-weight: 100, стиль шрифта: нормальный, @ font-face {font-family: ‘Roboto’, src: url’Roboto-LightItalic-webfont.eot ‘, src: url’Roboto -LightItalic-webfont.eot? #Iefix ‘format’embedded-opentype’, url’Roboto-LightItalic-webfont.woff ‘format’woff’, url’Roboto-LightItalic-webfont.ttf ‘format’truetype’, url’Roboto -LightItalic-webfont.svg # RobotoLightItalic ‘format’svg’, font-weight: 100, стиль шрифта: курсив, @ font-face {font-family: ‘Roboto’, источник: url’Roboto-Medium-webfont.eot ‘, src: url’Roboto-Medium-webfont.eot? #iefix’ format’embedded-opentype ‘, url’Roboto-Medium-webfont.woff’ format’woff ‘, url’Roboto-Medium-webfont.ttf’ формат ‘TrueType’, url’Roboto-Medium-webfont.svg # Robo toMedium ‘format’svg’, font-weight: 300, стиль шрифта: обычный, @ font-face {font-family: ‘Roboto’, src: url’Roboto-MediumItalic-webfont.eot ‘, src: url’Roboto -MediumItalic-webfont.eot?#iefix ‘format’embedded-opentype’, url’Roboto-MediumItalic-webfont.woff ‘format’woff’, url’Roboto-MediumItalic-webfont.ttf ‘format’truetype’, url’Roboto-MediumItalic-webfont.svg # RobotoMediumItalic ‘format’svg’, font-weight: 300, font-style: italic,

Убедитесь, что вы изменили src так, чтобы он указывал на путь к папке шрифтов.

Далее вы можете использовать синтаксис

font-family: Roboto,

для отображения шрифта Roboto на вашей веб-странице.

Вот и все. Наслаждайтесь!

Эта статья полезна? Да Нет

Электронные книги

Полное руководство для начинающих по Linux MintПолное руководство для начинающих по Ubuntu 18.04Linux для начинающих Другие электронные книги Комментарии (1)

Просмотров: 32

Компонент React Typography — Material-UI

Используйте оформление для максимально четкого и эффективного представления своего дизайна и содержания.

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

Основное

Шрифт Roboto не будет автоматически загружен в Material-UI. Разработчик отвечает за загрузку всех шрифтов, используемых в его приложении. Есть несколько простых способов начать использование шрифта Roboto. Для более продвинутой конфигурации ознакомьтесь с разделом настроек темы.

Шрифт Roboto через CDN

Ниже показан пример HTML-разметки, используемой для загрузки шрифта Roboto с CDN:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

Установка используя npm

Вы можете установить его набрав команду ниже в терминале:

npm install fontsource-roboto

Затем вы можете импортировать его в вашу точку входа.

import 'fontsource-roboto';

Для получения дополнительной информации ознакомьтесь с Fontsource.

⚠️ Будьте осторожны при использовании этого подхода. Убедитесь, что ваш сборщик не загружает все вариации шрифта (100/300/400/500/700/900, italic/regular, SVG/woff). Fontsource может быть настроен на загрузку определенных подмножеств, жирности и стилей. Включение всех файлов шрифтов может значительно увеличить размер вашего итогового файла. Стандартная конфигурация оформления в стиле Material-UI зависит только от жирности шрифта: 300, 400, 500 и 700.

Компоненты

Темы

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

Изменение семантического элемента

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

• Вы можете изменить лежащий в основе элемент один раз с помощью свойства component:

Heading
</Typography> {}
<Typography variant="h2" component="h3">
  h2. Заголовок
</Typography>

const theme = createMuiTheme({
  props: {
    MuiTypography: {
      variantMapping: {
        h2: 'h3',
        h3: 'h3',
        h4: 'h3',
        h5: 'h3',
        h5: 'h3',
        h6: 'h3',
        subtitle1: 'h3',
        subtitle2: 'h3',
        body1: 'span',
        body2: 'span',
      },
    },
  },
});

Доступность

Несколько ключевых факторов для доступности оформления:

Оптимизация шрифтов – Николай Громов

Столкнулся (в очередной раз) с некорректной работой конвертера fontsquirrel.com (для некоторых шрифтов он очень заметно деформирует символы шрифта) и решил разобраться каким образом можно самостоятельно получить оптимизированные файлы шрифта для использования при верстке сайтов.

Требования к инструментарию:

• на выходе должен получаться минимальный размер файлов (скармливать инструменту набор символов, которые нужно оставить в шрифте),
• отсутствие деформаций символов после конверсии,
• работа с форматами TTF, WOFF/WOFF2,
• кроссплатформенность,
• бесплатность,
• локальность (не веб-сервис).

Рассматривать буду все в разрезе использования консоли и nodejs/npm. Если вы еще не начали использовать консольные инструменты, самое время начать.

Оптимизация шрифта

Задача: оставить в шрифте только те символы, которые необходимы на проекте. В моем случае, это цифры, латиница, кириллица (не целиком) и некоторые другие (кавычки, тире и т.п.) символы.

Для этих целей обнаружил три инструмента:

• fonttools — набор консольных инструментов, в т.ч. инструмент, оставляющий в файле шрифта только символы с указанными utf-кодами.
• fontforge — бесплатный редактор шрифта (полноценный редактор с GUI).
• fontmin — набор китайских инструментов (есть консольные варианты, вебсервис и приложение с GUI).

fonttools

Лучший из найденных инструментов. Требует установленного Python. Ставим инструмент и потом в консоли:

pyftsubset fonts/Roboto-Black.ttf --output-file=fonts/Roboto-Black--pyftsubset.ttf --unicodes-file=codes.txt

• fonts/Roboto-Black.ttf — исходный файл,
• fonts/Roboto-Black--pyftsubset.ttf — результат,
• codes.txt — файл с кодами символов, которые нужно оставить в шрифте (пример, получить свой набор можно любым конвертером символов).

Результат для TTF:

После конвертации в WOFF и WOFF2 размеры файлов становятся еще приятнее.

Из обнаруженных минусов:

1. Пропущенные через инструмент шрифты при открытии стандартным инструментом просмотра шрифтов (по кр. мере, на Windows) выдают ошибку (браузер переваривает их корректно).
2. Я получил файл нулевой длинны для одного из конвертируемых шрифтов. Странный глюк с неизвестной причиной (пришлось использовать fontforge).

fontforge

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

Увы, мною не были обнаружены адекватные инструменты автоматизации, позволяющие поточно обработать несколько файлов по одной маске. А выделять символы вручную — минут по 5-7 на файл — не хочется категорически. Если подскажите способ сохранить выделение символов или как-то консольно вызвать fontforge, чтобы от взял ttf-файл, вырезал символы и сохранил, буду благодарен.

fontmin

Устанавливаем глобально и потом в консоли можно:

text="`cat subset.txt`" && fontmin -t "$text" fonts/lato.ttf > fonts/lato--fontmin.ttf

• subset.txt — файл с символами, которые хочется оставить в шрифте (пример),
• fonts/lato.ttf — исходный файл,
• fonts/lato--fontmin.ttf — результат.

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

Конвертирование шрифта

ttf2woff

Ставим инструмент глобально и потом в консоли:

ttf2woff fonts/lato.ttf fonts/lato--ttf2woff.woff

Указывается путь и имя исходного и результирующего файла.

ttf2woff2

• Конвертирует TTF в WOFF2.
• Консольный инструмент. Нужно владеть азами работы с консолью и иметь установленный node.js.
• У меня (Windows 10) работает медленно: до пары минут на конверсию одного файла.

Ставим инструмент глобально и потом в консоли:

cat fonts/lato.ttf | ttf2woff2 >> fonts/lato--ttf2woff2.woff2

Указывается путь и имя исходного и результирующего файла.

Прочие инструменты (веб-сервисы)

font2web.com — конвертер

• Работает не со всеми шрифтами (чёрный список обнаружить не удалось, попытка сконвертировать Open Sans привела к скачиванию архива без шрифтов).
• Настроек не имеет.
• Не отдаёт шрифты в формате WOFF2.
• Работает с одним файлом за раз.

freefontconverter.com — конвертер

• Отдаёт TTF, WOFF, WOFF2, EOT, SVG.
• Настроек не имеет.
• Работает с одним файлом за раз.
• Получает TTF, который становится немного меньшего размера в результирующем архиве.

web-font-generator.com — конвертер

• Отдаёт TTF, WOFF, EOT, SVG.
• Настроек не имеет.
• Работает с одним файлом за раз.
• Показывает превью результата.
• Умеет конвертировать в base64.
• Иногда выдает бОльший размер файла, чем у закачанного оригинала.

webfont.ru — конвертер и оптимизатор

• Отдаёт TTF, WOFF, WOFF2.
• Позволяет работать только с имеющимися на проекте шрифтами, свой загрузить нельзя.
• Одновременная работа только с одним шрифтом (при переходе от шрифта к шрифту в рамках гарнитуры сохраняются настройки конвертера).
• Есть настройка с указанием сохраняемых в шрифте диапазонов символов или конкретных символов, что в несколько раз уменьшает вес файла (212Кб → 27Кб для Open Sans с минимальным набором символов).
• Умеет конвертировать в base64.
• Меняет визуальную плотность, портит полуовалы, деформирует вертикальные размеры букв, меняет высоту строки.

fontsquirrel.com — конвертер и оптимизатор

• Отдаёт TTF, WOFF, WOFF2, EOT, SVG.
• Работает не со всеми шрифтами (чёрный список имеется, но не опубликован).
• Множество настроек, в том числе указание диапазонов символов или конкретных символов (212Кб → 34Кб для Open Sans с минимальным набором символов).
• С настройками по умолчанию убирает из шрифта все нелатинские символы (в т.ч. кириллические).
• Работает с несколькими файлами за раз.
• Умеет конвертировать в base64.
• Меняет визуальную плотность, портит полуовалы, деформирует вертикальные размеры букв, меняет высоту строки, для некоторых размеров «съедает» внутрибуквенные просветы.

Смотри так же

Шрифты текстов заменились на Roboto Condensed, заголовки остались прежними

Эээ… Ну как бы вот и всё описание.

{ «author_name»: «Pixel Lens», «author_type»: «self», «tags»: [], «comments»: 1, «likes»: -2, «favorites»: 0, «is_advertisement»: false, «subsite_label»: «bugs», «id»: 96575, «is_wide»: true, «is_ugc»: true, «date»: «Mon, 09 Dec 2019 22:36:26 +0300», «is_special»: false }

{«id»:133655,»url»:»https:\/\/vc.ru\/u\/133655-pixel-lens»,»name»:»Pixel Lens»,»avatar»:»9a1c6002-3c9f-c512-6e3d-f291940af805″,»karma»:11797,»description»:»»,»isMe»:false,»isPlus»:false,»isVerified»:false,»isSubscribed»:false,»isNotificationsEnabled»:false,»isShowMessengerButton»:false}

{«url»:»https:\/\/booster.osnova.io\/a\/relevant?site=vc»,»place»:»entry»,»site»:»vc»,»settings»:{«modes»:{«externalLink»:{«buttonLabels»:[«\u0423\u0437\u043d\u0430\u0442\u044c»,»\u0427\u0438\u0442\u0430\u0442\u044c»,»\u041d\u0430\u0447\u0430\u0442\u044c»,»\u0417\u0430\u043a\u0430\u0437\u0430\u0442\u044c»,»\u041a\u0443\u043f\u0438\u0442\u044c»,»\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c»,»\u0421\u043a\u0430\u0447\u0430\u0442\u044c»,»\u041f\u0435\u0440\u0435\u0439\u0442\u0438″]}},»deviceList»:{«desktop»:»\u0414\u0435\u0441\u043a\u0442\u043e\u043f»,»smartphone»:»\u0421\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u044b»,»tablet»:»\u041f\u043b\u0430\u043d\u0448\u0435\u0442\u044b»}},»isModerator»:false}

Что должны знать дизайнеры о гарнитуре Roboto? | автор: Ян Марек

В прошлой статье я говорил о гарнитуре San Francisco , которая является системным шрифтом в iOS , поэтому будет жаль, если я также не посмотрю на Roboto , шрифт, используемый в Android .
Roboto был впервые представлен в 2011 году с запуском Android 4.0 «Ice Cream Sandwich» . Он заменил предыдущий шрифт под названием Droid .

С тех пор Google начал использовать эти шрифты в Android , Youtube , Google Maps , Google Plus и многих других сервисах Google.

История

Шрифт был полностью разработан собственными силами в Google Кристианом Робертсоном , дизайнером интерфейсов Google, и тогда его отзывы не всегда были положительными. Комментатор по типографике Стивен Коулз назвал первоначальный выпуск Roboto « Frankenfont » из-за сходства некоторых символов в Helvetica , Univers , Myriad , DIN и Ronnia . .

Но с тех пор шрифт претерпел несколько обновлений и улучшений , которые исправили многие проблемы с первоначальным выпуском.

Семейство Roboto

По сравнению с гарнитурой Apple San Francisco, Roboto настолько прост. Гарнитура Roboto имеет 4 семейства с несколькими весами:

Roboto имеет отличную онлайн-документацию, как и остальные части Google Material Design . Итак, когда вы создадите приложение для Android или веб-сайт , у вас будет отличный источник информации, включая различные стили и размеры, которые вы должны использовать, какую высоту строки для достижения правильной читаемости и другие вещи, такие как рекомендации по цветам, отслеживание и Т. Д.И вы должны использовать его, потому что все эти размеры, стили и правила были разработаны , чтобы сбалансировать плотность контента и комфорт чтения .

И да, для Roboto Condensed тоже есть рекомендации. Интернет-документация

Как использовать Roboto в Photoshop и Sketch?

По сравнению с Сан-Франциско у нас почти нет работы. Работа с Roboto такая же, как и с любым другим шрифтом.
Я настоятельно рекомендую взглянуть на официальные Наклейки , чтобы у вас было лучшее представление о том, как все правильно использовать.Актуальная версия всегда находится на странице ресурсов по дизайну материалов. Существуют версии для Photoshop , Sketch и даже Illustrator или After Effects .

Шрифт Noto

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

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

И Google, как глобальная интернет-организация, которая в последнее время уделяет повышенное внимание Китаю, приходится много работать с проблемой « тофу ». Поэтому они создали этот шрифт для поддержки всех языков с одинаковым гармоничным внешним видом. Отсюда и название Noto , например « no more to fu ».

Вы, вероятно, уже видели этот шрифт, потому что Google использует его для Chrome и Android для всех языков, не поддерживаемых Roboto.

Как использовать Noto в Photoshop и Sketch?

Вы можете видеть, что Noto — идеальный шрифт для глобальных служб , даже в странах, которые используют « неанглийский, как сценарий », все дополнительных символов будут идеальными и будут поддерживать тот же внешний вид . .Но помните о странах, использующих « Tall script » (как это называется в Google), потому что вы можете использовать только два веса.

Вы не уверены, какой шрифт вам следует использовать для страны, для которой вы разрабатываете? Посмотрите на эту подробную таблицу, является ли страна «английской письменностью» или нет.

Работа с Noto очень похожа на Roboto, но у них есть некоторые отличия . Например: в заголовке вы должны использовать размер шрифта на 1px больше , чем указано для Roboto, и высоту строки на больше .
Все это снова рассматривается в спецификации.

Где скачать?

Даже здесь у нас работы меньше. Вы можете легко загрузить все семейства Roboto со страницы шрифтов Google. То же самое с Noto fonts или здесь, если вам нужна более конкретная версия.

И с лицензированием тоже все просто. Все шрифты Roboto находятся под лицензией Apache, поэтому использование довольно доброжелательно . И все шрифты Noto публикуются под лицензией SIL Open Font License (OFL) v1.1, что позволяет копировать , изменять , а распространять при необходимости.

Debian — Результаты поиска пакетов — fonts-roboto

Вы искали пакеты, в именах которых есть fonts-roboto . Были просмотрены все комплекты, все секции и все архитектуры. Найдено 5 подходящих пакетов.

Точное совпадение

Пакет fonts-roboto

• jessie (oldoldstable) (шрифты): семейство шрифтов без засечек, выпущенное вместе с Android Ice Cream Sandwich
  1: 4.4.4r2-6: все
• stretch (oldstable) (шрифты): метапакет для загрузки шрифтов Roboto
  2: 0 ~ 20160106-2: все
• buster (стабильный) (шрифты): метапакет для загрузки шрифтов Roboto
  2: 0 ~ 20170802-3: все
• яблочко (тестирование) (шрифты): метапакет для загрузки шрифтов Roboto
  2: 0 ~ 20170802-3: все
• sid (нестабильный) (шрифты): метапакет для загрузки шрифтов Roboto
  2: 0 ~ 20170802-3: все

Прочие обращения

Пакет fonts-roboto-fontface

• stretch (oldstable) (шрифты): в основном геометрический, дружелюбный и открытый изогнутый шрифт
  0.4.3-1: все
• buster (стабильный) (шрифты): в основном геометрический, дружелюбный и открытый изогнутый шрифт
  0.5.0-2: все
• яблочко (тестирование) (шрифты): в основном геометрический, дружелюбный и открытый изогнутый шрифт
  0.5.0-3: все
• sid (нестабильный) (шрифты): в основном геометрический, дружелюбный и открытый изогнутый шрифт
  0.5.0-3: все

Пакет шрифтов-роботов-подсказок

• stretch (oldstable) (шрифты): Фирменное семейство шрифтов Google (подсказка)
  2: 0 ~ 20160106-2: все
• buster (стабильный) (шрифты): Фирменное семейство шрифтов Google (переходный пакет)
  2: 0 ~ 20170802-3: все
• яблочко (тестирование) (шрифты): Фирменное семейство шрифтов Google (переходный пакет)
  2: 0 ~ 20170802-3: все
• sid (нестабильный) (шрифты): Фирменное семейство шрифтов Google (переходный пакет)
  2: 0 ~ 20170802-3: все

Пакет fonts-roboto-slab

• buster (стабильный) (шрифты): Фирменное семейство шрифтов Google (slab)
  1.100263 + 20170512-1: все
• яблочко (тестирование) (шрифты): Фирменное семейство шрифтов Google (slab)
  1.100263 + 20170512-2: все
• sid (нестабильный) (шрифты): Фирменное семейство шрифтов Google (slab)
  1.100263 + 20170512-2: все

Пакет шрифтов-робото-без хинтинга

• stretch (oldstable) (шрифты): Фирменное семейство шрифтов Google (без хинтинга)
  2: 0 ~ 20160106-2: все
• buster (стабильный) (шрифты): Фирменное семейство шрифтов Google (без хинтинга)
  2: 0 ~ 20170802-3: все
• яблочко (тестирование) (шрифты): Фирменное семейство шрифтов Google (без хинтинга)
  2: 0 ~ 20170802-3: все
• sid (нестабильный) (шрифты): Фирменное семейство шрифтов Google (без хинтинга)
  2: 0 ~ 20170802-3: все

FontPair — Робото

Робото и Нунито

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

Рубрика: Roboto

Кузов: Nunito

Скачать Font Pair

Roboto Slab и Roboto

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

Рубрика: Roboto Slab

Кузов: Roboto

Скачать Font Pair

Rokkitt & Roboto

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

Рубрика: Rokkitt

Кузов: Roboto

Скачать Font Pair

Raleway и Roboto

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

Заголовок: Raleway

Кузов: Roboto

Скачать Font Pair

Тени и Робото

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

Рубрика: Тени

Кузов: Roboto

Скачать Font Pair

Space Mono и Roboto

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

Рубрика: Space Mono

Кузов: Roboto

Скачать Font Pair

React Typography component — Material-UI

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

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

General

Шрифт Roboto будет , а не , который будет автоматически загружаться Material-UI. Разработчик несет ответственность за загрузку всех шрифтов, используемых в их приложении. У Roboto Font есть несколько простых способов начать работу. Для более продвинутой настройки ознакомьтесь с раздел настройки темы.

Roboto Font CDN

Ниже показан пример разметки ссылки, используемой для загрузки шрифта Roboto из CDN:

Установить с помощью npm

Вы можете установить его, введя следующую команду в своем терминале:

npm установить fontsource-roboto

Затем вы можете импортировать его в свою точку входа.

  import 'fontsource-roboto';  

Для получения дополнительной информации посетите Fontsource.

⚠️ Будьте осторожны при использовании этого подхода. Убедитесь, что ваш комплектовщик не загружает все варианты шрифтов (100/300/400/500/700/900, курсив / обычный, SVG / woff). Fontsource можно настроить для загрузки определенных подмножеств, весов и стилей. Встраивание всех файлов шрифтов может значительно увеличить размер вашего пакета. Конфигурация типографики по умолчанию Material-UI зависит только от веса шрифта 300, 400, 500 и 700.

  {}
<Вариант оформления = "h2" component = "h3">
  h2.Заголовок
  

  const theme = createMuiTheme ({
  props: {
    MuiTypography: {
      optionMapping: {
        h2: 'h3',
        h3: 'h3',
        h4: 'h3',
        h5: 'h3',
        h5: 'h3',
        h6: 'h3',
        subtitle1: 'h3',
        subtitle2: 'h3',
        body1: 'промежуток',
        body2: 'промежуток',
      },
    },
  },
});