CSS-live.ru

Материальный дизайн — Типографика

Перевод раздела 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 был значительно доработан, чтобы быть пригодным к использованию на еще большем количестве платформ. Он стал немного шире и округлее, что придало ему большую четкость и более оптимистичный внешний вид.

whatismaterial_materialproperties_physicalproperties_thickness_01_yes

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

whatismaterial_materialproperties_physicalproperties_thickness_01_yes

Буквы A-Z и цифры шрифта Roboto

Насыщенность шрифта Roboto

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

whatismaterial_materialproperties_physicalproperties_thickness_01_yes

Насыщенность шрифта Roboto

Noto

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

whatismaterial_materialproperties_physicalproperties_thickness_01_yes

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

whatismaterial_materialproperties_physicalproperties_thickness_01_yes

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

Насыщенность шрифта Noto

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

whatismaterial_materialproperties_physicalproperties_thickness_01_yes

Насыщенность шрифтов CJK-алфавитов Noto Sans

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

whatismaterial_materialproperties_physicalproperties_thickness_01_yes

Насыщенность шрифтов тайского и хинди (деванагари) алфавитов Noto Sans

Шрифты с хинтовкой

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

И Roboto, и Noto имеют версии с хинтовкой и без нее. Google рекомендует:

  • Используйте версии без хинтовки в Android и Mac OS X, поскольку хинтовка в них не используется.
  • Используйте шрифты с хинтовкой в Chrome OS, Windows и Linux.

Стек шрифтов

В свойствах элементов, используемых в Android и в вебе, стек шрифтов должен включать в себя Roboto, Noto, и затем sans-serif.

Стили

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

Эти размеры и стили были разработаны, чтобы сбалансировать плотность размещения контента и удобство чтения в среднестатистических условиях использования. Размеры шрифтов указаны в единицах измерения sp (масштабируемые пиксели), позволяя использовать режимы с крупными шрифтами для упрощения восприятия.

Английская и подобные ей системы письма

Латиница, греческий и кириллица.

Базовый набор стилей основан на типографической шкале 12, 14, 16, 20 и 34.

style_typography_styles_scale
style_typography_styles_01_display1.png

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

style_typography_styles_02_display2.pngs
style_typography_styles_03_headline1.png

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

style_typography_styles_04_headline2

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

style_typography_styles_05_title1.png

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

style_typography_styles_06_title2.png

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

style_typography_styles_07_subhead1.png

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

style_typography_styles_08_subhead2.png
style_typography_styles_09_body1.png

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

style_typography_styles_10_body2.png
style_typography_styles_11_body3.png

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

style_typography_styles_12_body4.png

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

style_typography_styles_13_button1.png

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

style_typography_styles_14_button2.png

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

Китайский, японский и корейский.

Насыщенность: Поскольку Noto CJK имеет семь значений насыщенности, соответствующих Roboto, используйте те же параметры насыщенности, что и в английском языке.

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

style_typography_style3.png

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

style_typography_style4.png

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

style_typography_example_japanese1.png

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

style_typography_example_japanese2.png

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

style_typography_example_japanese3.png

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

style_typography_example_chinese1.png

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

style_typography_example_chinese2.png

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

style_typography_example_chinese3.png

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

Высокие системы письма

Языки Южной и Юго-восточной Азии, а также Среднего Востока, такие как арабский, хинди и тайский.

Насыщенность: Используйте значение насыщенности Regular, поскольку значение Medium в Noto отсутствует. Google рекомендует избегать использования насыщенности Bold, поскольку по отзывам носителей языка шрифт выглядит слишком тяжелым.

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

style_typography_style1.png

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

style_typography_style2.png

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

style_typography_example_hindi1.png

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

style_typography_example_hindi2.png

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

style_typography_example_hindi3.png

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

style_typography_example_thai1.png

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

style_typography_example_thai2.png

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

style_typography_example_thai3.png

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

Высота строки

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

Английская и подобные ей системы письма

style_typography_styles_lineheight1.png

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

style_typography_styles_lineheight2.png

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

style_typography_styles_lineheight3.png

Примеры отдельного использования — Высота строки увеличена

Плотные и высокие системы письма

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

style_typography_lineheight_tall1.png

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

style_typography_lineheight_tall2.png

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

style_typography_lineheight_dense2.png

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

Прочие типографические нормы

Цвета и контраст

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

Для сохранения читабельности текст должен сохранять соотношение контраста не ниже 4.5:1 (рассчитывается исходя из уровня яркости). Предпочтительным является соотношение 7:1.

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

style_typography_styles_contrast.png
style_typography_styles_15_contrast1.png

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

style_typography_styles_16_contrast2.png

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

style_typography_styles_17_contrast3.png

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

style_typography_styles_18_contrast4.png

Контраст при размещении над иллюстрацией

Крупный и динамический шрифт

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

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

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

style_typography_styles_19_dynamic1.png

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

style_typography_styles_20_dynamic2.png
style_typography_styles_21_dynamic3.png

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

style_typography_styles_22_dynamic4.png

Перенос строк

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

style_typography_styles_linebreaks1.png
Правильно
style_typography_styles_linebreaks2.png
Неправильно.

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

Разрядка и кернинг

style_typography_styles_tracking.png

Длина строки

Примите во внимание следующий совет по достижению лучшей читабельности и длины строк от Baymard Institute:

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

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

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

Источник: «Читабельность: оптимальная длина строки,»

http://baymard.com/blog/line-length-readability

style_typography_styles_linelengths1.png

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

style_typography_styles_linelengths2.png

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

Справочник по категориям языков

Для упрощения процесса локализации 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. Это тоже может быть интересно:

1 комментарий

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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