Типографика
Шрифт кита — типографическая шкала Material Design 3: пятнадцать стилей, по три размера в пяти ролях. Стиль задаёт гарнитуру, начертание, кегль, интерлиньяж и трекинг сразу, поэтому текст на любом экране выглядит одной системой.
Шкала#
Роли шкалы — по назначению текста:
- display — самый крупный текст: число или фраза заставки. Сам кит его не берёт.
- headline — заголовок страницы и окна.
- title — заголовок раздела, карточки, колонки; имя записи.
- body — основной текст и значения.
- label — подписи управления: кнопка, вкладка, плашка.
--type-display-large--type-display-medium--type-display-small--type-headline-large--type-headline-medium--type-headline-small--type-title-large--type-title-medium--type-title-small--type-body-large--type-body-medium--type-body-small--type-label-large--type-label-medium--type-label-small| Стиль | Кегль / интерлиньяж | Начертание | Трекинг |
|---|---|---|---|
display-large |
57 / 64 | 400 | −0,25 |
display-medium |
45 / 52 | 400 | 0 |
display-small |
36 / 44 | 400 | 0 |
headline-large |
32 / 40 | 400 | 0 |
headline-medium |
28 / 36 | 400 | 0 |
headline-small |
24 / 32 | 400 | 0 |
title-large |
20 / 28 | 400 | 0 |
title-medium |
16 / 24 | 500 | 0,15 |
title-small |
14 / 20 | 500 | 0,1 |
body-large |
15 / 22 | 400 | 0,5 |
body-medium |
14 / 20 | 400 | 0,25 |
body-small |
12 / 16 | 400 | 0,4 |
label-large |
14 / 20 | 500 | 0,1 |
label-medium |
12 / 16 | 500 | 0,5 |
label-small |
11 / 16 | 500 | 0,5 |
Значения — в пикселях, это значения спецификации M3 с двумя поправками кита на плотность: body-large — 15 / 22 вместо 16 / 24, title-large — 20 вместо 22. Рабочему экрану со списками и формами нужно больше строк, чем витрине.
Токены#
У каждого стиля пять токенов Material: --md-sys-typescale-<стиль>-font, -weight, -size, -line-height и -tracking. Шестой — сокращение кита --type-<стиль>: вся запись font одним значением, чтобы правило не собирало её из пяти переменных.
Трекинг в запись font не входит. Ставьте его рядом отдельным letter-spacing:
.report__title {
font: var(--type-title-medium);
letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}Гарнитуры тоже токены. --md-ref-typeface-brand — для display, headline и title-large, --md-ref-typeface-plain — для остального. Сегодня это одна гарнитура, но место для фирменной у заголовков уже есть. Код и машинные значения идут гарнитурой --md-ref-typeface-mono.
Прежние имена --font-heading, --font-body, --font-mono, --font-size-body, --font-size-small, --font-size-h1 и --font-size-h2 остались псевдонимами этих токенов.
Шрифт Roboto#
Шрифт Material — Roboto. Кит его не везёт, как не везёт и MUI. Где Roboto установлен (Android, ChromeOS) или подключён инсталляцией, страница говорит им. Остальные видят системный гротеск: system-ui, San Francisco, Segoe UI.
Чтобы все видели Roboto, подключите его в листе своей инсталляции через @font-face и положите файлы шрифта в её статику. Шкала от этого не меняется: она описана кеглями, а не гарнитурой.
ТокеныТемы.Гарнитура()src/Классы/оформление/ТокеныТемы.os
Шрифт интерфейса. Roboto — шрифт Material; кит его не везёт, как не везёт и MUI: где он установлен (Android, ChromeOS, подключён инсталляцией), страница говорит им, остальные получают системный гротеск той же метрики. Возвращаемое значение: Строка - значение font-family.
Где какой стиль в ките#
Компоненты уже выбрали стиль по своей роли. Своему экрану берите стиль по той же логике, а не по нужному размеру.
| Где | Стиль |
|---|---|
| Текст страницы, значение поля | body-large |
h1 — заголовок страницы |
headline-medium |
h2 — раздел, заголовок карточки, знак в шапке |
title-large |
h3 — подраздел, имя записи в сводке |
title-medium |
| Заголовок окна | headline-small |
| Значение плитки показателя | headline-medium |
| Шапка таблицы, вкладка, заголовок тоста | title-small |
| Ячейка таблицы, лид карточки, текст тоста | body-medium |
| Пояснение и ошибка под полем | body-small |
| Подпись кнопки, ход в шапке | label-large |
| Малая кнопка, плашка | label-medium |
| Счётчик на вкладке и кнопке | label-small |
| Большая кнопка | title-medium |
Заголовки страницы — h1, h2 и h3 по шкале
Отчёты
Расписание
Еженедельные
Отчёт уходит в понедельник в девять утра.
HTML = Кит.Холст(
Кит.Заголовок(1, "Отчёты"),
Кит.Заголовок(2, "Расписание"),
Кит.Заголовок(3, "Еженедельные"),
Кит.Примечание("Отчёт уходит в понедельник в девять утра.")).Рендер();Карточка — заголовок title-large, лид body-medium, текст body-large
Хранилище
Общий объём файлов проекта
Занято 12 из 100 ГБ.
HTML = Набор.Карточка().Отрисовать(Новый Структура("Заголовок, Описание, Иконка, Тело",
"Хранилище", "Общий объём файлов проекта", "пакет",
"<p>Занято 12 из 100 ГБ.</p>"));Плитка — одно число стилем headline-medium
HTML = Набор.Плитка().Отрисовать(Новый Структура("Значение, Подпись",
"1 204", "документов"));Гайдлайны#
Доступ
Ключи
Код
HTML = Кит.Холст(
Кит.Заголовок(2, "Доступ"),
Кит.Заголовок(3, "Ключи")).Рендер();Доступ
Ключи
Код
HTML = Кит.Холст(
Кит.Заголовок(3, "Доступ"),
Кит.Заголовок(2, "Ключи")).Рендер();Сводка за неделю
Код
HTML = "<p style=""margin:0;font:var(--type-title-medium);"
+ "letter-spacing:var(--md-sys-typescale-title-medium-tracking)"">Сводка за неделю</p>";Сводка за неделю
Код
HTML = "<p style=""margin:0;font:bold 19px Georgia,serif"">Сводка за неделю</p>";Код
HTML = Набор.Кнопка().Отрисовать(Новый Структура("Подпись, Иконка", "Сохранить", "сохранить"));Код
HTML = Набор.Кнопка().Отрисовать(Новый Структура("Подпись, Иконка", "СОХРАНИТЬ", "сохранить"));Доступность#
- Кегли заданы в пикселях, но масштаб страницы браузера увеличивает их вместе с остальной вёрсткой.
- Заголовки — настоящие
h1–h3: по ним скринридер строит оглавление страницы. Не пропускайте уровни и не берите заголовок ради размера. - Основной текст —
body-large, 15 пикселей. Мельчеbody-small(12) текст, который человек должен прочитать, не делайте.