Материальный дизайн — Типографика
Перевод раздела 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
Шрифт Roboto имеет шесть значений насыщенности: Тонкий (Thin), Ненасыщенный (Light), Обычный (Regular), Средний (Medium), Насыщенный (Bold) и Черный (Black).
Noto
Вертикальные метрики Noto совместимы с Roboto.
Насыщенность шрифта Noto
CJK-алфавиты (китайский, японский и корейский) Noto Sans имеют семь значений насыщенности: Тонкий (Thin), Светлый (Light), Полусветлый (DemiLight), Обычный (Regular), Средний (Medium), Насыщенный (Bold) и Черный (Black). Насыщенность Noto Sans CJK Regular и Roboto Regular одинакова.
Шрифты Noto для тайского, деванагари и всех других широко используемых живых языков имеют насыщенность Обычный (Regular) и Насыщенный (Bold).
Шрифты с хинтовкой
Хинтовка — это инструкции, встроенные в шрифт, указывающие, как нужно изменить (деформировать) символ, чтобы он выглядел лучше на экранах с низким разрешением. Побочным эффектом использования хинтовки является больший размер файла шрифта, чем его версия без хинтовки.
И Roboto, и Noto имеют версии с хинтовкой и без нее. Google рекомендует:
- Используйте версии без хинтовки в Android и Mac OS X, поскольку хинтовка в них не используется.
- Используйте шрифты с хинтовкой в Chrome OS, Windows и Linux.
Стек шрифтов
В свойствах элементов, используемых в Android и в вебе, стек шрифтов должен включать в себя Roboto, Noto, и затем sans-serif.
Стили
Одновременное использование слишком большого количества размеров и стилей шрифтов может поломать любую верстку. Типографическая шкала содержит ограниченный набор размеров шрифтов, которые хорошо сочетаются с сеткой любого макета.
Эти размеры и стили были разработаны, чтобы сбалансировать плотность размещения контента и удобство чтения в среднестатистических условиях использования. Размеры шрифтов указаны в единицах измерения sp (масштабируемые пиксели), позволяя использовать режимы с крупными шрифтами для упрощения восприятия.
Английская и подобные ей системы письма
Латиница, греческий и кириллица.
Базовый набор стилей основан на типографической шкале 12, 14, 16, 20 и 34.
При использовании в форм-факторах текст, используемый на панели приложения, должен использовать стиль Титульнй (Title), Medium 20sp.
В особых сценариях используйте более крупный стиль Subhead, вместе меньшего стиля Основной (Body). Некоторые из этих сценариев включают в себя случаи, когда информация представляется небольшими фрагментами, либо когда заголовки стоят рядом с текстом, использующим стиль Основной (Body).
Стиль Кнопка (Button) (Medium 14sp, все буквы заглавные) используется во всех кнопках. В тех языках, где используются заглавные буквы, текст кнопок должен быть написан заглавными. В языках, не использующих заглавные буквы, рассмотрите возможность использования цветного текста на плоских кнопках, чтобы отделить их от обычного текста.
Плотные системы письма
Китайский, японский и корейский.
Насыщенность: Поскольку Noto CJK имеет семь значений насыщенности, соответствующих Roboto, используйте те же параметры насыщенности, что и в английском языке.
Размер шрифта: В стилях от Титульного (Title) до Подписи (Caption) размер шрифта на 1px больше, чем указанный для английского языка. В стилях крупнее Титульного (Title) можно использовать размер шрифта, используемый для английского языка.
Высокие системы письма
Языки Южной и Юго-восточной Азии, а также Среднего Востока, такие как арабский, хинди и тайский.
Насыщенность: Используйте значение насыщенности Regular, поскольку значение Medium в Noto отсутствует. Google рекомендует избегать использования насыщенности Bold, поскольку по отзывам носителей языка шрифт выглядит слишком тяжелым.
Размер шрифта: В стилях от Title до Caption размер шрифта на 1px больше, чем указанный для английского языка. В стилях крупнее Title можно использовать размер шрифта, указанный для английского языка.
Высота строки
Для достижения надлежащей читабельности и нужного тема высота строк была рассчитана исходя из индивидуального размера и насыщенности каждого из стилей. Перенос строк используется только в стилях Основной (Body), Подзаголовок (Subhead), Заголовок (Headline), и в более мелком Акцидентном (Display). Все остальные стили должны существовать только в виде одиночных строк.
Английская и подобные ей системы письма
Плотные и высокие системы письма
У всех стилей высота строки будет на 0.1em больше, чем у подобных английских языков. Английский и подобный английскому языки в основном используют лишь часть печатной строки, чаще всего — ее нижнюю часть, расположенную ниже уровня высоты символов нижнего регистра. Китайские, японские и корейские (CJK) идеографические символы используют всю высоту печатной строки. Символы в высоких шрифтах часто имеют длинные нижние и/или верхние выносные элементы. Для того, чтобы в шрифтах CJK донести те же дизайнерские идеи, что и в английском, и чтобы избежать потенциального обрезания текста двумя расположенными по соседству строками в высоких шрифтах, в высоких и в плотных системах письма высота строки должна быть больше, чем в английском.
Прочие типографические нормы
Цвета и контраст
Текст, цвет которого будет очень напоминать цвет фона, будет трудночитаемым. Текст с очень высоким контрастом тоже может быть трудночитаемым. Это особенно заметно в случаях, когда светлый текст расположен на темном фоне.
Для сохранения читабельности текст должен сохранять соотношение контраста не ниже 4.5:1 (рассчитывается исходя из уровня яркости). Предпочтительным является соотношение 7:1.
Данные цветовые комбинации также включают в себя соотношения контраста, подходящие для пользователей с нарушенным цветовосприятием.
Крупный и динамический шрифт
Для достижения наилучшего пользовательского восприятия используйте динамический шрифт, а не одни лишь шрифты малого размера или обрезку крупноразмерного текста.
При правильном применении крупные шрифты могут делать приложения интереснее, видоизменять макеты и помогать пользователям быстрее усваивать контент.
Динамический шрифт позволяет использовать крупный шрифт, когда длина текста в макете неизвестна. Динамические размеры выбираются из типографической шкалы на основании доступного места и приблизительного значения величины букв.
Перенос строк
На изображениях показаны передовые методы переноса строк.
Разрядка и кернинг
Длина строки
Примите во внимание следующий совет по достижению лучшей читабельности и длины строк от 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. Это тоже может быть интересно:
Как здорово, что есть перевод…
Спасибо!