Figma: https://www.figma.com/file/bEm9RDSMMKidd1epwXlRAW/Content?node-id=39%3A0

В основе любого интерфейса лежит типографика. В вебе у текстовых блоков есть много разных свойств влияющих на отображение. Поэтому для более легкого управления внешним видом текста существует одноимённый блок text с модификаторами на цвет, размер, жирность, регистр и еще несколько дополнительных. Используя их в различных комбинациях, можно получить любое необходимое отображение.

В интерфейсе text встречается двух типов:

Первый вариант используется внутри смысловых интерфейсных блоков. Например лейбл поля формы или комментарий под публикацией, в таких случаях текстовый блок в нужной модификации кладётся внутрь элемента смысловой сущности. Такой подход к типографики даёт всю нужную выразительность в конкретном контексте, при этом поддерживается общая продуктовая консистентность.

Размерные модификаторы блока как правило используются для формирования информационной иерархии с помощью модификатора size.

{
  block: 'text',
  mods: { size: 'm' },
  content: 'Typography'
}

Для подчёркивания статусности и первичности (или второстепенности) информации используется модификатор view с соответствующими значениями.

{
  block: 'text',
  mods: { view: 'primary' },
  content: 'Typography'
}

Регистр используется для увеличения массы, обычно применяется для подзаголовков третьего и четвёртого уровня при совпадении их размера с базовым текстом для усиления контраста. За верхний регистр в текстовом блоке отвечает модификатор transform в значении uppercase.

{
  block: 'text',
  mods: { transform: 'uppercase' },
  content: 'Typography'
}

Межбуквенный увеличивается, при наличии у текста верхнего регистра. Он выставляется с помощью модификатора spacing и его значение увеличивается прямо пропорционально значению модификатора size.