Иерархия передается через различия в весе шрифта, размере, высоте строки и межбуквенном интервале. Обновленная шкала шрифтов организует стили в шесть ролей, названия которых описывают их назначение: отображение, заголовок, метка, тело, цифра и дуга. Новые роли не зависят от размера экрана, что упрощает применение в различных вариантах использования.
Стили отображения
Дисплей используется для больших, коротких строк текста, используемых для отображения легко читаемой главной информации, важных показателей, уверенности или выразительных моментов бренда.
- DisplayLarge — самый большой заголовок. Displays — самый большой текст на экране, зарезервированный для краткой, легко читаемой информации о герое, важных показателей, уверенности или выразительных моментов бренда, которые выигрывают от заметного масштаба и стиля.
- DisplayMedium — второй по величине заголовок. Displays — это самый большой текст на экране, зарезервированный для краткой, легко читаемой информации о герое, важных показателей, уверенности или выразительных моментов бренда, которые выигрывают от заметного масштаба и стиля.
- DisplaySmall — самый маленький заголовок. Displays — самый большой текст на экране, зарезервированный для краткой, легко читаемой информации о герое, важных показателей, уверенности или выразительных моментов бренда, которые выигрывают от заметного масштаба и стиля.
Заголовок
Заголовок — это иерархический текст, используемый в качестве механизма навигации, например, заголовок страницы, раздела или подраздела (в случае TitleSmall).
- TitleLarge — самый большой заголовок. Заголовки меньше, чем Displays. Обычно они зарезервированы для текста средней выразительности, который короче по длине и не рекомендуется для интерактивных компонентов, а скорее для заголовков страниц или подзаголовков.
- TitleMedium — средний заголовок. Заголовки меньше, чем Displays. Обычно они зарезервированы для текста средней выразительности, который короче по длине и не рекомендуется для интерактивных компонентов, а скорее заголовков страниц или подзаголовков.
- TitleSmall — самый маленький заголовок. Заголовки меньше, чем Displays. Обычно они зарезервированы для текста средней выразительности, который короче по длине и не рекомендуется для интерактивных компонентов, а скорее для заголовков страниц или подзаголовков.
Этикетка
Метка используется для текста на уровне компонента, который описывает действие, которое произойдет при взаимодействии. Наиболее распространенное и широко используемое применение метки — для текста, вложенного в кнопку.
- LabelLarge — самая большая метка. Метки используются для отображения заметных текстов, таких как метки на кнопках заголовков, применяемых к интерактивным компонентам.
- LabelMedium — это средняя метка, и она используется чаще всего. Метки используются для отображения текстов, как первичная метка на кнопках, применяемых к интерактивным компонентам.
- LabelSmall — маленькая метка. Метки используются для отображения текстов, как вторичные метки на кнопках, метки на компактных кнопках, применяемые к интерактивным компонентам.
Тело
Поле body зарезервировано для текста контента, например абзацев основного текста, текста, используемого в сложной визуализации данных, временных меток и метаданных.
- BodyLarge — самый большой текст. Основной текст обычно используется для длинных текстов, так как он хорошо подходит для небольших размеров текста. Для более длинных разделов текста рекомендуется использовать шрифт с засечками или без засечек.
- BodyMedium — второй по величине размер основного текста. Основной текст обычно используется для длинных текстов, так как он хорошо подходит для небольших размеров текста. Для более длинных разделов текста рекомендуется использовать шрифт с засечками или без засечек.
- BodySmall — третий по величине текст. Основной текст обычно используется для длинных текстов, так как он хорошо подходит для небольших размеров текста. Для более длинных разделов текста рекомендуется использовать шрифт с засечками или без засечек.
- BodyExtraSmall — наименьший размер. Основной текст обычно используется для длинных текстов, так как он хорошо подходит для небольших размеров текста. Для более длинных разделов текста рекомендуется использовать шрифт с засечками или без засечек.
Цифра
Для числовых цифр используются стили текста, обычно ограниченные несколькими символами. Могут приобретать более выразительные свойства при больших размерах дисплея. Дают гибкость для расширения оси ширины с минимальными проблемами локализации и масштабирования шрифта.
- NumeralsExtraLarge — самая большая роль для цифр. Цифры используют табличный интервал по умолчанию. Они выделяют и выражают скользящие цифры, которые ограничены только двумя или тремя символами, где не требуется локализация, как на экране зарядки или выборе времени.
- NumeralsLarge — вторая по величине роль для цифр. Цифры используют табличный интервал по умолчанию. Это большие числовые строки, которые ограничены большими отображениями времени, где не требуется локализация, как в обратном отсчете таймера или выборе времени.
- NumeralsMedium — третья по величине роль для цифр. Цифры используют табличный интервал по умолчанию. Это средние числа, которые ограничены короткими строками цифр, где не требуется локализация, как для счетчика шагов или выбора времени.
- NumeralsSmall — четвертая по величине роль для цифр. Цифры используют табличный интервал по умолчанию. Они предназначены для чисел, которые требуют акцентирования в меньшем масштабе, где не требуется локализация, как в случае выбора даты и времени.
- NumeralsExtraSmall — самая маленькая роль для цифр. Цифры используют табличный интервал по умолчанию. Они предназначены для чисел, которые должны вмещать более длинные строки цифр, где не требуется локализация, как в показателях тренировки.
Дуга
Текст заголовка дуги используется для изогнутого текста, составляющего указательные знаки в пользовательском интерфейсе, такие как текст времени и изогнутые метки. Специализированная ось шрифта, которая специально оптимизирует тип вдоль кривой и для того, чтобы приспособить разный интервал, который появляется между символами, когда они расположены сверху, по сравнению с нижней частью изогнутого экрана.
Вершина
- 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) |