Типографические свойства

Chakra UI предоставляет гибкую систему управления типографикой, позволяя создавать интерфейсы с консистентным и адаптивным текстовым стилем. Основные элементы управления включают шрифты, размеры, вес, межстрочный интервал, интервалы между буквами и цвет текста.

Шрифты и семейства

Для задания семейства шрифта используется свойство fontFamily. Chakra UI по умолчанию поставляется с системой токенов:

<Box fontFamily="heading">Заголовок</Box>
<Text fontFamily="body">Основной текст</Text>
  • heading — используется для заголовков.
  • body — используется для основного текста.
  • mono — моноширинные шрифты, например, для кода.

Семейства шрифтов можно задавать напрямую, передавая строку с названием шрифта или массив с несколькими вариантами:

<Text fontFamily="'Roboto', sans-serif">Текст с Roboto</Text>

Размер шрифта

Свойство fontSize отвечает за размер текста и может задаваться как:

  • Токенами из темы (sm, md, lg, xl, 2xl и т.д.)
  • Абсолютными значениями (px, em, rem)

Примеры:

<Text fontSize="xl">Большой текст</Text>
<Text fontSize="18px">Текст с фиксированным размером</Text>
<Text fontSize={['sm', 'md', 'lg']}>Адаптивный текст</Text>

Адаптивные размеры позволяют автоматически менять шрифт в зависимости от размеров экрана.

Вес шрифта

fontWeight контролирует толщину текста. Chakra UI поддерживает стандартные CSS-значения:

<Text fontWeight="normal">Обычный текст</Text>
<Text fontWeight="bold">Жирный текст</Text>
<Text fontWeight={600}>Полужирный текст</Text>

Значения можно указывать через числа (100–900) или ключевые слова (light, normal, semibold, bold).

Межстрочный интервал (line-height)

lineHeight задает расстояние между строками. Это важный параметр для читаемости текста:

<Text lineHeight="short">Сжатый межстрочный интервал</Text>
<Text lineHeight="tall">Расширенный межстрочный интервал</Text>
<Text lineHeight="1.5">1.5em</Text>

Использование токенов из темы (short, base, tall) обеспечивает консистентность стилей по всему приложению.

Интервал между буквами (letter-spacing)

Свойство letterSpacing управляет расстоянием между символами:

<Text letterSpacing="tight">Плотный текст</Text>
<Text letterSpacing="wide">Разреженный текст</Text>
<Text letterSpacing="0.1em">Фиксированное значение</Text>

Значения могут задаваться токенами темы или конкретными CSS-единицами.

Цвет текста

color отвечает за цвет текста. Chakra UI поддерживает токены цвета из темы и стандартные CSS-значения:

<Text color="gray.600">Серый текст</Text>
<Text color="red.500">Красный текст</Text>
<Text color="#3498db">Текст с кастомным цветом</Text>

Использование токенов темы (gray.500, blue.300) позволяет легко менять тему приложения без редактирования всех компонентов вручную.

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

<Box fontFamily="heading" fontSize="3xl" fontWeight="bold" lineHeight="short" letterSpacing="wide" color="teal.600">
  Основной заголовок
</Box>

<Text fontFamily="body" fontSize={['sm', 'md', 'lg']} fontWeight="normal" lineHeight="tall" letterSpacing="0.05em" color="gray.700">
  Многострочный текст с адаптивным размером и комфортной читаемостью.
</Text>

Такое сочетание свойств обеспечивает консистентность, адаптивность и визуальную иерархию текста в интерфейсе.

Токены типографики в теме

Chakra UI позволяет расширять и настраивать типографику через объект темы:

const theme = extendTheme({
  fonts: {
    heading: "'Poppins', sans-serif",
    body: "'Inter', sans-serif",
    mono: "'Fira Code', monospace",
  },
  fontSizes: {
    xs: "12px",
    sm: "14px",
    md: "16px",
    lg: "20px",
    xl: "24px",
    "2xl": "30px",
  },
  fontWeights: {
    normal: 400,
    medium: 500,
    bold: 700,
  },
  lineHeights: {
    short: 1.2,
    base: 1.5,
    tall: 1.8,
  },
  letterSpacings: {
    tight: "-0.05em",
    normal: "0em",
    wide: "0.05em",
  },
});

Использование этих токенов позволяет создавать гибкий и управляемый дизайн, который легко масштабируется.

Итоговые рекомендации

  • Использовать токены из темы для единообразия.
  • Применять адаптивные значения для мобильных устройств.
  • Сочетать fontFamily, fontSize, fontWeight, lineHeight, letterSpacing и color для создания визуальной иерархии.
  • Расширять тему при необходимости для соответствия фирменному стилю.

Эти принципы делают типографику в Chakra UI мощным инструментом для построения читаемых и эстетически приятных интерфейсов.

Оглавление