Адаптивная типографика

Chakra UI предоставляет мощный и гибкий инструмент для работы с текстом, позволяя создавать интерфейсы, которые одинаково хорошо выглядят на любых устройствах. Центральным элементом адаптивной типографики является использование responsive values — значений, которые изменяются в зависимости от размеров экрана.

В Chakra UI это реализуется через массивы или объекты, задаваемые для свойств компонентов, таких как fontSize, lineHeight, letterSpacing и других.

import { Text } from "@chakra-ui/react";

<Text fontSize={["sm", "md", "lg", "xl"]}>
  Пример адаптивного текста
</Text>

В этом примере:

"sm" применяется на самых маленьких экранах,
"md" — на небольших планшетах,
"lg" — на стандартных десктопах,
"xl" — на больших мониторах.

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

Использование объектов для точной настройки

Для более сложной адаптивной типографики можно использовать объекты с ключами, соответствующими breakpoint-ам из темы Chakra UI:

<Text
  fontSize={{ base: "sm", md: "lg", lg: "2xl" }}
  lineHeight={{ base: "short", md: "shorter", lg: "shortest" }}
>
  Текст с объектной адаптивной типографикой
</Text>

Здесь:

base — значение по умолчанию (мобильные устройства),
md — для экранов средних размеров,
lg — для больших экранов.

Использование объектов позволяет более явно контролировать переходы между точками останова, чем массивы.

Компоненты Chakra и системные свойства

Chakra UI предоставляет несколько компонентов, которые облегчают работу с типографикой:

Text — базовый компонент для любого текста.
Heading — компонент для заголовков с поддержкой уровней (h1, h2 и т.д.).
Code — для отображения кода.
Link — для текста-ссылок с возможностью стилизации.

Все эти компоненты поддерживают системные свойства:

fontSize — размер шрифта.
fontWeight — толщина текста.
lineHeight — высота строки.
letterSpacing — межбуквенный интервал.
textAlign — выравнивание текста.
noOfLines — обрезка текста по количеству строк.

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

Масштабирование заголовков

Адаптивная типографика заголовков позволяет поддерживать иерархию текста на всех устройствах. Например:

<Heading
  as="h1"
  fontSize={{ base: "2xl", md: "4xl", lg: "6xl" }}
>
  Адаптивный заголовок
</Heading>

Здесь заголовок автоматически увеличивается на больших экранах, сохраняя читаемость и визуальную гармонию.

Использование theme для глобальных настроек

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

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  fonts: {
    heading: "Inter, sans-serif",
    body: "Roboto, sans-serif",
  },
  fontSizes: {
    sm: "0.875rem",
    md: "1rem",
    lg: "1.125rem",
    xl: "1.5rem",
    "2xl": "2rem",
    "3xl": "3rem",
  },
  lineHeights: {
    normal: 1.5,
    short: 1.25,
    shorter: 1.1,
    shortest: 1,
  },
});

export default theme;

Настройка темы позволяет:

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

Адаптивные свойства и медиазапросы

Chakra UI автоматически использует медиазапросы на основе breakpoints, определённых в теме. По умолчанию это:

const breakpoints = {
  sm: "30em",   // 480px
  md: "48em",   // 768px
  lg: "62em",   // 992px
  xl: "80em",   // 1280px
  "2xl": "96em" // 1536px
};

При использовании адаптивных свойств:

<Text fontSize={{ sm: "sm", md: "md", lg: "lg" }}>...</Text>

Chakra UI автоматически вставляет медиазапросы для каждого breakpoint, упрощая написание адаптивного CSS.

Практика с lineHeight и spacing

Для сохранения читаемости важно правильно комбинировать fontSize с lineHeight и letterSpacing:

<Text
  fontSize={{ base: "md", md: "lg" }}
  lineHeight={{ base: "short", md: "shorter" }}
  letterSpacing="wider"
>
  Оптимизированный текст для разных экранов
</Text>

lineHeight регулирует вертикальное пространство между строками.
letterSpacing помогает тексту “дышать” на больших размерах шрифта.

Такое комбинирование делает текст легким для восприятия на любых устройствах.

Комбинирование с Flex и Grid

Адаптивная типографика особенно эффективна, когда используется вместе с адаптивной версткой:

import { Box, SimpleGrid, Text } from "@chakra-ui/react";

<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={6}>
  <Box>
    <Text fontSize={{ base: "sm", md: "md", lg: "lg" }}>
      Блок 1
    </Text>
  </Box>
  <Box>
    <Text fontSize={{ base: "sm", md: "md", lg: "lg" }}>
      Блок 2
    </Text>
  </Box>
</SimpleGrid>

SimpleGrid и Box обеспечивают гибкое позиционирование.
Адаптивный fontSize сохраняет пропорции текста внутри сетки.