Материальный дизайн — Типографика
Перевод раздела Typography официальной документации Google: http://www.google.com/design/spec/material-design/.
После релиза Android Ice Cream Sandwich, стандартным шрифтом, используемым в Android, стал Roboto. После релиза Froyo штрифт Noto стал стандартным шрифтом, используемым в Android для всех языков, не поддерживаемых шрифтом Roboto. Кроме того, Noto — это стандартный шрифт для всех языков в Chrome OS.
Содержание
- Классификация языков
- Гарнитура шрифта
- Стили
- Высота строки
- Прочие типографические нормы
- Справочник по категориям языков
Классификация языков
Системы письма можно разделить на 3 категории:
Английская и подобные ей: Латиница (кроме вьетнамского), греческий и кириллица, которые поддерживаются и Roboto, и Noto. Roboto был расширен и теперь полностью охватывает все символы латинского, греческого и кириллического шрифтов, определенных в стандарте Unicode 7.0. Количество поддерживаемых символов удвоилось, по сравнению с предыдущими релизами, с приблизительно 2000 до примерно 4000 символов.
Высокие: Системы письма, требующие увеличения высоты строки, чтобы уместить более крупные знаки, они включают в себя Языки Южной и Юго-восточной Азии, а также Среднего Востока, такие как арабский, хинди, телугу, тайский и вьетнамский. Noto поддерживает два значения насыщенности шрифтов этих языков.
Плотные: Системы письма, требующие увеличения высоты строки, чтобы уместить более крупные знаки, они включают в себя китайский, японский и корейский. Noto поддерживает семь значений насыщенности шрифтов этих языков.
См. полный список в таблице категорий языков.
Гарнитура шрифта
Roboto
Шрифт Roboto был значительно доработан, чтобы быть пригодным к использованию на еще большем количестве платформ. Он стал немного шире и округлее, что придало ему большую четкость и более оптимистичный внешний вид.

Примеры использования Roboto

Буквы A-Z и цифры шрифта Roboto
Насыщенность шрифта Roboto
Шрифт Roboto имеет шесть значений насыщенности: Тонкий (Thin), Ненасыщенный (Light), Обычный (Regular), Средний (Medium), Насыщенный (Bold) и Черный (Black).

Насыщенность шрифта Roboto
Noto
Вертикальные метрики Noto совместимы с Roboto.

Примеры использования Noto Sans с английским алфавитом и CJK-алфавитами (китайский, японский и корейский)

Примеры использования Noto Sans с тайским и хинди (деванагари)
Насыщенность шрифта Noto
CJK-алфавиты (китайский, японский и корейский) Noto Sans имеют семь значений насыщенности: Тонкий (Thin), Светлый (Light), Полусветлый (DemiLight), Обычный (Regular), Средний (Medium), Насыщенный (Bold) и Черный (Black). Насыщенность Noto Sans CJK Regular и Roboto Regular одинакова.

Насыщенность шрифтов CJK-алфавитов Noto Sans
Шрифты Noto для тайского, деванагари и всех других широко используемых живых языков имеют насыщенность Обычный (Regular) и Насыщенный (Bold).

Насыщенность шрифтов тайского и хинди (деванагари) алфавитов Noto Sans
Шрифты с хинтовкой
Хинтовка — это инструкции, встроенные в шрифт, указывающие, как нужно изменить (деформировать) символ, чтобы он выглядел лучше на экранах с низким разрешением. Побочным эффектом использования хинтовки является больший размер файла шрифта, чем его версия без хинтовки.
И Roboto, и Noto имеют версии с хинтовкой и без нее. Google рекомендует:
- Используйте версии без хинтовки в Android и Mac OS X, поскольку хинтовка в них не используется.
- Используйте шрифты с хинтовкой в Chrome OS, Windows и Linux.
Стек шрифтов
В свойствах элементов, используемых в Android и в вебе, стек шрифтов должен включать в себя Roboto, Noto, и затем sans-serif.
Стили
Одновременное использование слишком большого количества размеров и стилей шрифтов может поломать любую верстку. Типографическая шкала содержит ограниченный набор размеров шрифтов, которые хорошо сочетаются с сеткой любого макета.
Эти размеры и стили были разработаны, чтобы сбалансировать плотность размещения контента и удобство чтения в среднестатистических условиях использования. Размеры шрифтов указаны в единицах измерения sp (масштабируемые пиксели), позволяя использовать режимы с крупными шрифтами для упрощения восприятия.
Английская и подобные ей системы письма
Латиница, греческий и кириллица.
Базовый набор стилей основан на типографической шкале 12, 14, 16, 20 и 34.


Примеры использования стиля Акцидентный (Display), английский язык


Примеры использования стиля Заголовок (Headline), английский язык

При использовании в форм-факторах текст, используемый на панели приложения, должен использовать стиль Титульнй (Title), Medium 20sp.

Примеры использования стиля Титульный (Title), английский язык

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

Примеры использования стиля Подзаголовок (Subhead), английский язык


Примеры использования стиля Основной (Body), английский язык


Примеры использования стиля Основной (Body), английский язык

Стиль Кнопка (Button) (Medium 14sp, все буквы заглавные) используется во всех кнопках. В тех языках, где используются заглавные буквы, текст кнопок должен быть написан заглавными. В языках, не использующих заглавные буквы, рассмотрите возможность использования цветного текста на плоских кнопках, чтобы отделить их от обычного текста.

Примеры использования стиля Кнопка (Button), английский язык

Плотные системы письма
Китайский, японский и корейский.
Насыщенность: Поскольку Noto CJK имеет семь значений насыщенности, соответствующих Roboto, используйте те же параметры насыщенности, что и в английском языке.
Размер шрифта: В стилях от Титульного (Title) до Подписи (Caption) размер шрифта на 1px больше, чем указанный для английского языка. В стилях крупнее Титульного (Title) можно использовать размер шрифта, используемый для английского языка.

Стили плотных систем письма

Пример, плотная система письма

Пример стиля Подзаголовок (Subhead), японский

Пример стиля Основной (Body), японский

Пример стиля Основной (Body 1), японский

Пример стиля Подзаголовок (Subhead), традиционный китайский

Пример стиля Основной (Body), традиционный китайский

Пример стиля Основной1 (Body1), традиционный китайский
Высокие системы письма
Языки Южной и Юго-восточной Азии, а также Среднего Востока, такие как арабский, хинди и тайский.
Насыщенность: Используйте значение насыщенности Regular, поскольку значение Medium в Noto отсутствует. Google рекомендует избегать использования насыщенности Bold, поскольку по отзывам носителей языка шрифт выглядит слишком тяжелым.
Размер шрифта: В стилях от Title до Caption размер шрифта на 1px больше, чем указанный для английского языка. В стилях крупнее Title можно использовать размер шрифта, указанный для английского языка.

Стили высоких систем письма

Пример, высокая система письма

Пример стиля Подзаголовок (Subhead), хинди

Пример стиля Основной (Body), хинди

Пример стиля Основной1 (Body1), хинди

Пример стиля Подзаголовок (Subhead), тайский

Пример стиля Основной (Body), тайский

Пример стиля Основной1 (Body1), тайский
Высота строки
Для достижения надлежащей читабельности и нужного тема высота строк была рассчитана исходя из индивидуального размера и насыщенности каждого из стилей. Перенос строк используется только в стилях Основной (Body), Подзаголовок (Subhead), Заголовок (Headline), и в более мелком Акцидентном (Display). Все остальные стили должны существовать только в виде одиночных строк.
Английская и подобные ей системы письма

Типографика и высота строки в английском и подобная английскому

Примеры использования в паре

Примеры отдельного использования — Высота строки увеличена
Плотные и высокие системы письма
У всех стилей высота строки будет на 0.1em больше, чем у подобных английских языков. Английский и подобный английскому языки в основном используют лишь часть печатной строки, чаще всего — ее нижнюю часть, расположенную ниже уровня высоты символов нижнего регистра. Китайские, японские и корейские (CJK) идеографические символы используют всю высоту печатной строки. Символы в высоких шрифтах часто имеют длинные нижние и/или верхние выносные элементы. Для того, чтобы в шрифтах CJK донести те же дизайнерские идеи, что и в английском, и чтобы избежать потенциального обрезания текста двумя расположенными по соседству строками в высоких шрифтах, в высоких и в плотных системах письма высота строки должна быть больше, чем в английском.

Высота строки в высоких и плотных системах письма

Пример использования различной высоты строк в паре, тайский и хинди

Пример использования различной высоты строк в паре, китайский и японский
Прочие типографические нормы
Цвета и контраст
Текст, цвет которого будет очень напоминать цвет фона, будет трудночитаемым. Текст с очень высоким контрастом тоже может быть трудночитаемым. Это особенно заметно в случаях, когда светлый текст расположен на темном фоне.
Для сохранения читабельности текст должен сохранять соотношение контраста не ниже 4.5:1 (рассчитывается исходя из уровня яркости). Предпочтительным является соотношение 7:1.
Данные цветовые комбинации также включают в себя соотношения контраста, подходящие для пользователей с нарушенным цветовосприятием.


Контраст при размещении на светлом фоне

Контраст при размещении на темном фоне

Контраст при размещении над изображением

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

Динамический шрифт


Применение в UI

Перенос строк
На изображениях показаны передовые методы переноса строк.


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

Длина строки
Примите во внимание следующий совет по достижению лучшей читабельности и длины строк от Baymard Institute:
«Если вы хотите оставить от чтения хорошие впечатления, используйте в строке около 60 символов. На каждой строке должно находиться правильное количество символов — это ключ к достижению читабельность вашего текста.»
«Слишком длинная — если строка текста слишком длинная, взгляду пользователя будет трудно сфокусироваться на тексте. Это связано с тем, что большая длина затрудняет понимание того, где строка начинается, и где заканчивается. Кроме того, в крупных блоках текста может быть трудно найти следующую строку для продолжения чтения.»
«Слишком короткая — если строка слишком короткая, взгляду придется слишком часто возвращаться обратно, что сбивает читатетя с ритма. Слишком короткие строки тоже раздражают людей, заставляя их взгляд перескакивать на следующую строку, не успев закончить текущую (тем самым пропуская потенциально важные слова).»
Источник: «Читабельность: оптимальная длина строки,»
http://baymard.com/blog/line-length-readability

Идеальные длины строк для основного английского текста

Идеальные длины строк для коротких строк текста английского шрифта
Справочник по категориям языков
Для упрощения процесса локализации Google разделила языки на три категории: Английская и подобные ей системы письма, высокие системы письма и плотные системы письма.
Английская и подобные ей: Латиница (кроме вьетнамского), греческий, кириллица, иврит, армянский и грузинский.
Высокие: Системы письма, требующие увеличения высоты строки, чтобы уместить более крупные знаки, они включают в себя языки Южной и Юго-восточной Азии, а также Среднего Востока, такие как арабский, хинди, телугу, тайский и вьетнамский.
Плотные: Системы письма, требующие увеличения высоты строки, чтобы уместить более крупные знаки, но чьи метрики отличаются от высоких шрифтов. Включают в себя китайский, японский и корейский.
Код |
Значение |
Категория |
af |
Африкаанс |
Подобный английскому |
am |
Амхарский |
Подобный английскому |
ar |
Арабский (современный стандарт) |
Высокий |
az |
Азербайджанский |
Подобный английскому |
bg |
Болгарский |
Подобный английскому |
bn |
Бенгальский |
Высокий |
ca |
Каталонский |
Подобный английскому |
cs |
Чешский |
Подобный английскому |
cy |
Уэльский |
Подобный английскому |
da |
Датский |
Подобный английскому |
de |
Немецкий |
Подобный английскому |
el |
Греческий |
Подобный английскому |
en |
Английский (США) |
Подобный английскому |
en-GB |
Английский (Великобритания) |
Подобный английскому |
es |
Испанский (Европейский) |
Подобный английскому |
es-419 |
Испанский (Латинская Америка) |
Подобный английскому |
et |
Эстонский |
Подобный английскому |
eu |
Баскский |
Подобный английскому |
fa |
Персидский |
Высокий |
fi |
Финский |
Подобный английскому |
fil |
Филиппинский |
Подобный английскомуp> |
fr |
Французский (Европейский) |
Подобный английскому |
fr-CA |
Французский (Канадский) |
Подобный английскому |
gl |
Галисийский |
Подобный английскому |
gu |
Гуджарати |
Высокий |
hi |
Хинди |
Высокий |
hr |
Хорватский |
Подобный английскому |
hu |
Венгерский |
Подобный английскому |
hy |
Армянский |
Подобный английскому |
id |
Индонезийский |
Подобный английскому |
is |
Исландский |
Подобный английскому |
it |
Итальянский |
Подобный английскому |
iw |
Иврит |
Подобный английскому |
ja |
Японский |
Плотный |
ka |
Грузинский |
Подобный английскому |
kk |
Казахский |
Подобный английскому |
km |
Кхмерский |
Высокий |
kn |
Каннада |
Высокий |
ko |
Корейский |
Плотный |
ky |
Киргизский |
Подобный английскому |
lo |
Лаосский |
Высокий |
lt |
Литовский |
Подобный английскому |
lv |
Латвийский |
Подобный английскому |
mk |
Македонский |
Подобный английскому |
ml |
Малайялам |
Высокий |
mn |
Монгольский |
Подобный английскому |
mr |
Маратхи |
Высокий |
ms |
Малайский |
Подобный английскому |
my |
Бирманский (Мьянманский) |
Высокий |
ne |
Непальский |
Высокий |
nl |
Голландский |
Подобный английскому |
no |
Норвежский (Букмол) |
Подобный английскому |
pa |
Панджаби |
Высокий |
pl |
Польский |
Подобный английскому |
pt |
Португальский (Бразильский) |
Подобный английскому |
pt-PT |
Португальский (Европейский) |
Подобный английскому |
ro |
Румынский |
Подобный английскому |
ru |
Русский |
Подобный английскому |
si |
Сингальский |
Высокий |
sk |
Словацкий |
Подобный английскому |
sl |
Словенский |
Подобный английскому |
sq |
Албанский |
Подобный английскому |
sr |
Сербский (Кириллица) |
Подобный английскому |
sr-Latn |
Сербский (Латиница) |
Подобный английскому |
sv |
Шведский |
Подобный английскому |
sw |
Суахили |
Подобный английскому |
ta |
Тамильский |
Высокий |
te |
Телугу |
Высокий |
th |
Тайский |
Высокий |
tr |
Турецкий |
Подобный английскому |
uk |
Украинский |
Подобный английскому |
ur |
Урду |
Высокий |
uz |
Узбекский |
Подобный английскому |
vi |
Вьетнамский |
Высокий |
zh-CN |
Китайский (упрощенный, мандаринский) |
Плотный |
zh-HK |
Китайский (мандаринский, гонконгский) |
Плотный |
zh-TW |
Китайский (традиционный, мандаринский) |
Плотный |
zu |
Зулусский |
Подобный английскому |
P.S. Это тоже может быть интересно:
Как здорово, что есть перевод…
Спасибо!