Typography
В состав входят компоненты, реализующие типографическую систему.
Они заменяют обычные HTML-теги, такие, как h1, h2, h3, h4, p, etc.
Установка шрифта
Компоненты типографики используют фирменный шрифт SB Sans Text.
<html>
<head>
<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css" />
<link
rel="stylesheet"
href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css"
/>
<link
rel="stylesheet"
href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansTextMono.0.2.0.css"
/>
</head>
</html>
Отступы
По умолчанию типографика поддерживает стандартные отступы.
Переносы
По умолчанию в типографике слова переносятся по слогам.
Чтобы отключить данный функционал, необходимо установить свойство breakWord в значении false.
Пробелы
По умолчанию в типографике если текст превышает ширину элемента, то слова будут переноситься по пробелам.
Чтобы запретить перенос по пробелам, необходимо установить свойство noWrap в значении true.
Смена тега
Если при использовании компонентов необходимо сменить тег, то можно использовать свойство as:
Управление насыщенностью шрифта
Для корректной работы насыщенности шрифта убедитесь, что в конфигурациях типографических компонентов указаны соответствующие значения для font-weight.
За это отвечают свойства: medium, bold, extraBold
Курсивное начертание текста
Задается свойством isItalic.
Моноширинные числа (группа Numbers)
Для работы с типографическим компонентом из группы Numbers, достаточно указать свойство: isNumeric.
<BodyS isNumeric={true} />
Состав
Hero unit
Заголовки
Интерфейсы
Типографика для таких частей интерфейса, как button, label, подписи, и т.п.