Типографика

Обзор компонентов

Базовые свойства

weight

Определяет насыщенность шрифта со значениями '1' | '2' | '3', где '3' - обычное начертание, а '1' - самое жирное (используются токены семейства --vkui--font_weight_base[1,2,3]).

<Text weight="3">Жирный текст</Text>

useAccentWeight

Позволяет использовать акцентную насыщенность (токены семейства --vkui--font_weight_accent[1,2,3]). Использование возможно только при явном указании свойства weight.

<Text weight="1" useAccentWeight>
  Акцентная жирная насыщенность для текста
</Text>

normalize

Позволяет “нормализовать” компонент, делая его блочным и отключая браузерные отступы. По умолчанию true для всех типографических компонентов, кроме Paragraph.

<Paragraph Component="p" normalize>
  Текст в теге <p>
</Paragraph>

Component

Позволяет переопределить тег, в котором рендерится контент. По умолчанию значение span. Обратите внимание на использование свойства normalize для отключения браузерных стилей тега p.

<Paragraph Component="p" normalize>
  Текст в теге <p>
</Paragraph>

inline

Задает display: inline-block, для возможности строчного отображения компонента. Полезно, когда необходимо расположить разные типографические компоненты в строку.

<Text inline>Основной текст</Text> <Caption inline>(мелкая подпись)</Caption>

Уникальные свойства

level

Ряд компонентов (DisplayTitle, Title, Headline и Caption) обладают свойством level. Оно позволяет определить иерархию типографики, схожую со стандартными тегами <h1>...<h6>, где level="1" самый крупный вариант шрифта и далее по нисходящей. Для того, чтобы узнать, сколько уровней поддерживает тот или иной компонент, обратитесь к документации компонентов выше.

caps

Компоненты Footnote и Caption поддерживают свойство caps, которое трансформирует все буквы в заглавные.

Как устроено

Каждый компонент типографики задаёт параметры шрифта (font-family, font-size, font-weight, line-height), которые будут применяться ко всему вложенному текстовому контенту, полагаясь на значения собственных токенов.

Например, для Headline существует следующий набор токенов:

--vkui--font_headline1--font_family--regular
--vkui--font_headline1--font_family--compact
 
--vkui--font_headline1--font_size--regular
--vkui--font_headline1--font_size--compact
 
--vkui--font_headline1--font_weight--regular
--vkui--font_headline1--font_weight--compact
 
--vkui--font_headline1--line_height--regular
--vkui--font_headline1--line_height--compact
 
 
--vkui--font_headline2--font_family--regular
--vkui--font_headline2--font_family--compact
 
--vkui--font_headline2--font_size--regular
--vkui--font_headline2--font_size--compact
 
--vkui--font_headline2--font_weight--regular
--vkui--font_headline2--font_weight--compact
 
--vkui--font_headline2--line_height--regular
--vkui--font_headline2--line_height--compact

В сумме 16 токенов для regular/compact представлений. В разных темах могут быть свои значения токенов.

При стандартном использовании вам не нужно задумываться о применении regular/compact-токенов, потому что этим управляет VKUI, однако, если вы хотите “зафиксировать” параметры шрифта, можно любой компонент типографики обернуть в AdaptivityProvider с нужным значением:

<AdaptivityProvider sizeY="regular">
  <Text>Всегда regular-значения токенов</Text>
</AdaptivityProvider>

Своё семейство шрифтов

Если вам не подходит значение font-family по-умолчанию или в выбранной теме, то вы можете переопределить значение токенов на своё значение, но сделать это будет нужно для всех токенов типографики. В качестве примера можно обратиться к нашей настройке окружения ↗ для e2e-тестирования.

Непосредственно подключить свой шрифт необходимо самостоятельно, руководствуясь выбранными фреймворками и системой сборки.

Как использовать

Оберните текст или другие элементы, к которым вы хотите применить нужные параметры шрифта, выбранным тегом:

<Title>Мой заголовок</Title>
 
<Text Component="div">
  {/* Параметры шрифта применятся для любого вложенного контента. */}
  {children}
</Text>

Если вы используете готовые компоненты VKUI (например, Header или SimpleCell) вам не нужно задумываться о выборе конкретного компонента типографики, потому что подходящие уже применяются внутри компонентов библиотеки. Если вы делаете свои компоненты на базе VKUI, то при выборе компонентов типографики ориентируйтесь на назначение каждого компонента.

Свойства и методы