Иерархия передается через различия в начертании, размере, высоте строки и межбуквенном интервале. Обновлённая шкала шрифтов разделяет стили на шесть ролей, названия которых отражают их назначение: отображение, заголовок, метка, основной текст, цифра и дуга. Новые роли не зависят от размера экрана, что упрощает их применение в различных сценариях.
Стили отображения
Дисплей используется для больших, коротких строк текста, используемых для отображения легко читаемой основной информации, важных показателей, уверенности или выразительных моментов бренда.
- DisplayLarge — самый крупный заголовок. Displays — это самый крупный текст на экране, предназначенный для краткой, легко читаемой основной информации, важных показателей, информации об уверенности или выразительных моментов бренда, которые выигрывают от заметного масштаба и стиля.
- DisplayMedium — второй по величине заголовок. Displays — это самый крупный текст на экране, предназначенный для краткой, легко читаемой информации, важных показателей, информации об уверенности или выразительных моментов бренда, которые выигрывают от заметного масштаба и стиля.
- DisplaySmall — это заголовок самого маленького размера. Displays — это самый крупный текст на экране, предназначенный для краткой, легко читаемой основной информации, важных показателей, информации об уверенности или выразительных моментов бренда, которые выигрывают от заметного масштаба и стиля.
Заголовок
Заголовок — это иерархический текст, используемый в качестве механизма навигации, например, заголовок страницы, раздела или подраздела (в случае TitleSmall).
- TitleLarge — самый большой заголовок. Заголовки меньше, чем Displays. Они обычно предназначены для текста средней выразительности, более короткого по длине, и не рекомендуются для интерактивных компонентов, а скорее для заголовков или подзаголовков страниц.
- TitleMedium — это заголовок среднего размера. Заголовки меньше, чем Displays. Они обычно предназначены для текста средней выразительности, который короче по длине, и не рекомендуются для интерактивных компонентов, а скорее для заголовков или подзаголовков страниц.
- TitleSmall — самый маленький заголовок. Заголовки меньше, чем Displays. Они обычно предназначены для текста средней выразительности, более короткого по длине, и не рекомендуются для интерактивных компонентов, а скорее для заголовков или подзаголовков страниц.
Этикетка
Метка используется для текста на уровне компонента, описывающего действие, которое произойдет при взаимодействии с элементом. Наиболее распространённое и широко распространённое применение метки — текст, вложенный в кнопку.
- LabelLarge — самая большая метка. Метки используются для отображения заметного текста, например, на кнопках заголовков, а также для интерактивных компонентов.
- LabelMedium — это средний и наиболее распространённый тип меток. Метки используются для отображения текста, например, основной надписи на кнопках, а также для интерактивных компонентов.
- LabelSmall — это маленькая метка. Метки используются для отображения текста, например, второстепенных меток на кнопках, надписей на компактных кнопках, а также для интерактивных компонентов.
Тело
Тело зарезервировано для текста содержимого, например абзацев основного текста, текста, используемого для визуализации сложных данных, временных меток и метаданных.
- BodyLarge — самый крупный шрифт. Основной текст обычно используется для длинных текстов, так как хорошо подходит для текстов небольшого размера. Для более длинных фрагментов текста рекомендуется использовать шрифт с засечками или без засечек.
- BodyMedium — второй по величине основной текст. Основной текст обычно используется для длинных текстов, так как хорошо подходит для текстов небольшого размера. Для более длинных фрагментов текста рекомендуется использовать шрифт с засечками или без засечек.
- BodySmall — третий по величине основной текст. Основной текст обычно используется для длинных текстов, так как хорошо подходит для текстов небольшого размера. Для более длинных фрагментов текста рекомендуется использовать шрифт с засечками или без засечек.
- BodyExtraSmall — самый маленький размер основного текста. Основной текст обычно используется для длинных текстов, так как хорошо подходит для текстов небольшого размера. Для более длинных фрагментов текста рекомендуется использовать шрифт с засечками или без засечек.
Цифра
Стили цифрового текста используются для отображения цифр, обычно ограниченных несколькими символами. Они могут приобретать более выразительные свойства на больших экранах. Они обеспечивают гибкость для расширения оси ширины с минимальными проблемами локализации и масштабирования шрифта.
- NumeralsExtraLarge — самая крупная роль для цифр. Цифры по умолчанию используют табличный интервал. Они выделяют и отображают легко читаемые цифры, ограниченные двумя-тремя символами, где локализация не требуется, например, для экрана зарядки или выбора времени.
- NumeralsLarge — вторая по значимости роль для цифр. Числа по умолчанию используют табличный интервал. Это большие числовые строки, которые ограничены большими дисплеями времени, где не требуется локализация, например, для обратного отсчёта таймера или выбора времени.
- NumeralsMedium — третья по величине роль для цифр. Цифры по умолчанию используют табличный интервал. Это средние числа, ограниченные короткими последовательностями цифр, для которых не требуется локализация, например, для количества шагов или выбора времени.
- NumeralsSmall — четвёртая по значимости роль для цифр. Цифры по умолчанию используют табличный интервал. Они предназначены для чисел, которые необходимо выделить при мелком масштабе, где не требуется локализация, например, для выбора даты и времени.
- NumeralsExtraSmall — самая маленькая роль для цифр. Для цифр по умолчанию используется табличный интервал. Они предназначены для чисел, которые должны содержать более длинные последовательности цифр, когда локализация не требуется, как в случае с показателями в ходе тренировки.
Дуга
Текст заголовка Arc используется для изогнутого текста, создающего указатели в пользовательском интерфейсе, такие как время и изогнутые надписи. Специальная ось шрифта, которая оптимизирует шрифт вдоль кривой и учитывает разницу в интервалах между символами, расположенными вверху и внизу изогнутого экрана.
Вершина
- ArcLarge предназначен для заголовков и названий в виде дуг. Arc предназначен для текста, расположенного вдоль изогнутой траектории на экране, и зарезервирован для коротких строк текста заголовков в самом верху или внизу экрана, например, для подтверждения.
- ArcMedium предназначен для заголовков и названий в виде дуг. Arc предназначен для текста, расположенного вдоль изогнутой траектории на экране, и предназначен для коротких строк текста в самом верху или внизу экрана, например, заголовков страниц.
- ArcSmall предназначен для ограниченных дугообразных текстовых строк. Arc предназначен для текста, расположенного вдоль изогнутой траектории на экране, и предназначен для коротких изогнутых текстовых строк в верхней части экрана, например, для обозначения времени.
Нижний
- ArcLarge предназначен для заголовков и названий в виде дуг. Arc предназначен для текста, расположенного вдоль изогнутой траектории на экране, и зарезервирован для коротких строк текста заголовков в самом верху или внизу экрана, например, для подтверждения.
- ArcMedium предназначен для заголовков и названий в виде дуг. Arc предназначен для текста, расположенного вдоль изогнутой траектории на экране, и предназначен для коротких строк текста в самом верху или внизу экрана, например, заголовков страниц.
- ArcSmall предназначен для ограниченных дугообразных текстовых строк. Arc предназначен для текста, расположенного вдоль изогнутой траектории на экране, и предназначен для коротких изогнутых текстовых строк в нижней части экрана, например, призыва к действию.
Набор текста
Вертикальная верстка основана на отступах, ограничивающих рамках и базовых линиях для обеспечения читабельности текста любого размера. При выборе верстки, изменения размера текста, плотности и использования текста в адаптивной верстке учитывайте технические особенности и правила вашей платформы.
Используйте базовую линию
Базовая линия — это невидимая линия, на которой располагается строка текста. В Material Design базовая линия играет важную роль в измерении вертикального расстояния между текстом и элементом.
Проверьте читаемость
Чтобы улучшить читаемость шрифтов в вашем приложении, выполните следующие проверки читаемости.
Табличные и моно числа
Используйте табличные цифры (также известные как моноширинные числа) вместо пропорциональных цифр в местах, где значения могут часто меняться, анимироваться или иметь быстро меняющиеся значения, например, в таймерах обратного отсчета, средствах выбора или текущих показателях фитнеса.
Используйте моноширинные табличные цифры, чтобы значения были оптически выровнены для лучшего сканирования и выравнивания, а также чтобы избежать смещений цифр или соседнего текста.
Высота строки
Высота строки — это расстояние между строками текста, которое напрямую связано с размером шрифта. В Watch вертикальное расстояние ограничено, поэтому высота строки оптимизируется для обеспечения читабельности, при этом максимально увеличивая количество строк текста, видимых в области просмотра.
Дополнительная высота строки
В Jetpack Compose и на Android типографика автоматически увеличивает высоту последней строки, чтобы предотвратить наложение длинных символов. Именно поэтому некоторые скриншоты не идеально выравниваются.
Дополнительная шпаргалка по высоте строки
| Стиль по умолчанию (размер текста/высота строки) | Высота строки по умолчанию для каждой строки | Дополнительная высота строки только в нижней строке | Расчет |
|---|---|---|---|
| 60 / 60 | 0 (100%) | + 15 (125%) | 60 / 75 (15/125%) (60+15) |
| 50 / 50 | 0 (100%) | + 13 (126%) | 50 / 63 (13/126%) (50+13) |
| 40 / 44 | 4 (110%) | + 7 (127,5%) | 40 / 51 (11/127,5%) (44+7) |
| 30 / 34 | 4 (113%) | + 3 (123,3%) | 30 / 37 (7/123,3%) (34+3) |
| 24 / 26 | 2 (108%) | + 4 (125%) | 24 / 30 (6/125%) (26+4) |
| 20 / 22 | 2 (110%) | + 3 (125%) | 20 / 25 (5/125%) (22+3) |
| 18 / 20 | 2 (111%) | + 3 (125%) | 18 / 23 (5/125%) (20+3) |
| 16 / 18 | 2 (112,5%) | + 2 (125%) | 16 / 20 (4/125%) (18+2) |
| 15 / 18 | 3 (120%) | + 1 (126,6%) | 15 / 19 (4/126,6%) (18+1) |
| 14 / 16 | 2 (114%) | + 2 (128,5%) | 14 / 18 (4/128,5%) (16+2) |
| 13 / 16 | 3 (123%) | + 0 (123%) | 13 / 16 (3/123%) (16+0) |
| 12 / 14 | 2 (116,6%) | + 1 (125%) | 12 / 15 (3/125%) (14+1) |
| 10 / 12 | 2 (120%) | + 0 (120%) | 10 / 12 (2/120%) (12+0) |