НачалоОсновыКомпонентыТексты
Обзор Цвет Типографика Отступы Скругления Глубина Фокус Движение Иконки Пропорции

Типографика

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

РуководствоТокены
Billing Your plan renews on the first of each month. Prices include tax.
<tk-text variant="title-md" as="h2">Billing</tk-text>
<tk-text>Your plan renews on the first of each month.</tk-text>
<tk-text variant="caption" color="secondary">Prices include tax.</tk-text>

Роли

Display Small Title Medium Heading Medium Body Medium Label Medium Caption Code Small
<tk-text variant="display-sm">Display Small</tk-text>
<tk-text variant="title-md">Title Medium</tk-text>
<tk-text variant="heading-md">Heading Medium</tk-text>
<tk-text variant="body-md">Body Medium</tk-text>
<tk-text variant="label-md">Label Medium</tk-text>
<tk-text variant="caption">Caption</tk-text>
<tk-text variant="code-sm">Code Small</tk-text>
Роль Для чего Не для чего
Display единственный крупный заголовок лендинга или промо-экрана всё внутри компонентов; длинные строки
Title заголовки страниц и разделов, три уровня промо-заголовок
Heading подзаголовок внутри блока; Heading Medium — заголовок диалога, шторки и пустого состояния заголовок страницы
Body абзацы и описания; Body Small — для плотного содержимого: таблиц, меню, подсказок заголовки
Label текст контрола: кнопки, вкладки, подписи поля абзацы; значение, которое вводят в поле, — это Body
Caption время, метаданные, мелкий шрифт, вторая строка под подписью строки списка основной текст
Code код и технические значения, моноширинным шрифтом обычный текст

Body Medium (16/24) — текст по умолчанию. У большинства ролей есть размеры Large, Medium и Small; у Heading и Code только Medium и Small, у Caption один размер. Все размеры, интерлиньяжи и начертания — в таблицах токенов.

У Label и Body общие размеры

Label на ступень мельче Body: Label Large — 16px, как Body Medium. Две пары различаются только начертанием:

  • 14/20: Body Small с весом 400, Label Medium с весом 500.
  • 12/16: Caption с весом 400, Label Small с весом 500.

Вторая строка, которая поясняет строку над ней, — это Caption. Текст маленького контрола — Label Small.

  • Label Medium — подпись контрола по умолчанию: кнопки среднего и большого размера, вкладки, подписи полей, пункты меню.
  • Label Small — маленькие кнопки и кнопки-иконки.
  • Label Large — текст контрола, который стоит в потоке чтения: заголовки аккордеона и раскрывающегося блока, действие в тосте.

У ссылки нет своей роли. tk-link берёт шрифт строки, в которой стоит, и добавляет акцентный цвет и подчёркивание. Ссылка в абзаце — 16/24, ссылка в строке навигации — 14/20 с весом 500, потому что такова сама строка.

Как применить роль

Через tk-text: variant выбирает роль, as — HTML-элемент. Уровень заголовка определяйте по структуре страницы, а роль — по тому, как он должен выглядеть.

Payment method Billing address
<tk-text variant="title-sm" as="h2">Payment method</tk-text>
<tk-text variant="heading-sm" as="h3">Billing address</tk-text>

В своём CSS: роль — это не одна переменная. Соберите её из переменных шрифта из таблиц токенов. Например, Body Small:

.summary {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body-sm);
  font-weight: var(--font-weight-regular);
}

Выделение

Выделяйте слово начертанием, а не размером и не новым цветом.

Your trial ends in 3 days.
<tk-text>Your trial ends in <tk-text as="span" weight="semibold">3 days</tk-text>.</tk-text>

Начертаний четыре: 400 regular, 500 medium, 600 semibold и 700 bold. Заголовки — 600, подписи — 500, основной текст — 400.

Цвет текста

Роль задаёт форму текста, но не его цвет. Цвет берётся из токенов text/*; у tk-text его задаёт color. Ссылки используют text/accent. Подробнее в разделе Цвет.

Last edited 5 minutes ago Card declined
<tk-text color="secondary">Last edited 5 minutes ago</tk-text>
<tk-text color="error">Card declined</tk-text>

Шрифты

Thykes не загружает шрифтов. Каждая ОС показывает свой системный шрифт:

ОС Шрифт
macOS, iOS SF
Windows Segoe UI
Android Roboto
Linux Ubuntu или Cantarell

Код набирается системным моноширинным шрифтом. Чтобы цифры в столбце стояли ровно, задайте font-variant-numeric: tabular-nums.

Задайте базовый шрифт на своей странице. CSS токенов только объявляет переменные и не стилизует ваши элементы. Без этого правила обычные элементы и текст в слотах получат браузерный шрифт с засечками:

body {
  font-family: var(--font-family-sans);
}

Доступность

  • Основной текст не мельче 14px (Body Small), по умолчанию 16px. 12px — только для Caption и Label Small.
  • Держите строку абзаца в пределах 60–80 знаков.
  • Оставляйте запас под интервалы. Вёрстка должна выдерживать интерлиньяж 1,5×, отступ между абзацами 2×, межбуквенный интервал 0,12× и межсловный 0,16× от размера шрифта. Не фиксируйте высоту, которая обрежет текст.
  • Уровень заголовка выбирайте по структуре, а не по размеру: один h1 на страницу, уровни без пропусков.
  • Не передавайте иерархию и смысл одним цветом; используйте размер, начертание и положение.
  • Обрезайте текст, только если остаток можно прочитать, например в подсказке или в подробном виде.
  • Контраст задают цветовые токены: 4,5:1 для текста, 3:1 для крупного текста (24px или 18,66px жирным). Подробнее в разделе Цвет.

Ограничения

  • Размеры шрифта заданы в px. Текст растёт при масштабировании страницы, но не следует за размером шрифта по умолчанию в настройках браузера.

Можно / нельзя

✅ Можно ❌ Нельзя
Выбирать роль по тому, что это за текст Задавать размер шрифта вручную
Display только для главного заголовка экрана Display внутри компонента
Выделять начертанием Увеличивать размер ради одного слова
Основной текст от 14px Основной текст в 12px
Выравнивать абзацы по началу строки Выравнивать по ширине: появляются неровные пробелы
Писать с заглавной только первое слово Набирать обычный текст капслоком
tabular-nums для столбцов чисел Цифры в столбце разной ширины
  • Text: компонент, который применяет роль.
  • Prose: отступы между абзацами авторского текста.
  • Link и Code block.
  • Цвет: цвета текста и контраст.
  • Отступы: интерлиньяж и отступы стоят на одной сетке 4px.