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:

Live Editor
Result
Open in CodeSandbox

Управление насыщенностью шрифта​

info

Для корректной работы насыщенности шрифта убедитесь, что в конфигурациях типографических компонентов указаны соответствующие значения для font-weight.

За это отвечают свойства: medium, bold, extraBold

Live Editor
Result
Open in CodeSandbox

Курсивное начертание текста​

Задается свойством isItalic.

Live Editor
Result
Open in CodeSandbox

Моноширинные числа (группа Numbers)​

Для работы с типографическим компонентом из группы Numbers, достаточно указать свойство: isNumeric.

<TextM isNumeric={true} />

Состав​

Hero unit​

Live Editor
Result
Open in CodeSandbox

Заголовки​

Live Editor
Result
Open in CodeSandbox

Интерфейсы​

Типографика для таких частей интерфейса, как button, label, подписи, и т.п.

Live Editor
Result
Open in CodeSandbox

Текст​

Типографические элементы для описаний к статьям, дополнительной информации и т.д.

Live Editor
Result
Open in CodeSandbox