Typography

Typography — единая точка входа для любого текстового стиля. Комбинация variant × size × weight покрывает всю типографическую шкалу дизайн-системы; тег (h1/h2/p/label) выбирается автоматически и переопределяется через as.

Демо

<Typography size="m" variant="body" weight="regular" children="The quick brown fox jumps over the lazy dog" />

Когда использовать

• Любой текст в интерфейсе — заголовки, параграфы, подписи, метки.
• Вместо точечных CSS-классов на font-size/font-weight.

Когда не нужен Typography: для чистых UI-примитивов, где текст входит в состав компонента (например, Button label), — используйте встроенные пропсы компонента.

Анатомия

Variant

Типографическая роль: display — крупные промо-заголовки, headline — заголовки секций, title — заголовки подсекций и карточек, label — подписи и бэйджи, body — основной текст.

Size

Ступень размера внутри варианта: s, m, l. Конкретные px задаются токенами @cloud-ru/ds-figma-variables.

Weight

Начертание: regular — дефолт, thin — облегчённое (display/headline), mono — моноширинное (коды, значения, ID).

Установка

pnpm add @cloud-ru/ds-typography

import { Typography, VARIANT, SIZE, WEIGHT } from '@cloud-ru/ds-typography'

Примеры использования

Базовое использование

import { Typography } from '@cloud-ru/ds-typography';

export function TypographyBasic() {
  return <Typography>Обычный body-текст по умолчанию</Typography>;
}

Заголовок раздела

import { Typography } from '@cloud-ru/ds-typography';

export function TypographyHeadline() {
  return (
    <Typography variant='headline' size='l'>
      Заголовок страницы
    </Typography>
  );
}

Моноширинный

import { Typography } from '@cloud-ru/ds-typography';

export function TypographyMono() {
  return (
    <Typography variant='body' weight='mono'>
      const answer = 42
    </Typography>
  );
}

Кастомный тег (полиморфизм)

import { Typography } from '@cloud-ru/ds-typography';

export function TypographyPolymorphic() {
  return (
    <Typography as='span' variant='body'>
      Body внутри inline-потока
    </Typography>
  );
}

Props

Types

TypographyProps

Unions

TypographySize

TypographyVariant

TypographyWeight

Storybook

Figma