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

В MUI (Material-UI) типографика реализуется через компонент Typography, который обеспечивает единообразие шрифтов, размеров, отступов и стилей текста. Основная задача адаптивной типографики — сделать текст читаемым и гармоничным на любых устройствах, от мобильных телефонов до больших экранов.

Настройка шрифтов и размеров через тему

Базовая настройка шрифтов выполняется через объект theme в MUI. Для адаптивной типографики ключевым элементом является поле typography:

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
    h1: {
      fontSize: '2rem',
      fontWeight: 700,
    },
    body1: {
      fontSize: '1rem',
    },
  },
});

createTheme позволяет задавать глобальные стили текста, которые затем применяются ко всем компонентам Typography в приложении.

Использование функции responsiveFontSizes

Для автоматического масштабирования текста в зависимости от размера экрана используется функция responsiveFontSizes:

import { responsiveFontSizes } from '@mui/material/styles';

let theme = createTheme({ /* настройки темы */ });
theme = responsiveFontSizes(theme);

После применения responsiveFontSizes все заголовки (h1, h2, …) и текстовые блоки автоматически будут увеличиваться или уменьшаться на разных устройствах. Поддерживаются точные настройки шагов изменения через параметры:

theme = responsiveFontSizes(theme, {
  breakpoints: ['xs', 'sm', 'md', 'lg', 'xl'],
  factor: 2, // степень масштабирования
});

Это позволяет добиться плавной адаптивности, без резких скачков размеров текста.

Использование системных функций sx и theme.breakpoints

MUI предоставляет мощный синтаксис для адаптивного текста через свойство sx. Например:

<Typography
  sx={{
    fontSize: {
      xs: '1rem', // мобильные устройства
      sm: '1.2rem', // планшеты
      md: '1.5rem', // десктопы
      lg: '2rem', // большие экраны
    },
    fontWeight: 500,
  }}
>
  Адаптивный текст
</Typography>

Ключевые моменты:

  • xs, sm, md, lg, xl соответствуют стандартным точкам останова в MUI.
  • Можно использовать проценты, rem, em для гибкости.
  • Свойство sx позволяет комбинировать адаптивный размер с другими стилями (lineHeight, letterSpacing, color).

Пользовательские шрифты и масштабирование

Для интеграции сторонних шрифтов используется @font-face или подключение через <link> в HTML. В MUI шрифты подключаются через тему:

const theme = createTheme({
  typography: {
    fontFamily: '"Open Sans", sans-serif',
    h2: {
      fontSize: '2rem',
      fontWeight: 600,
      lineHeight: 1.2,
    },
  },
});

Чтобы сохранить адаптивность, применяют responsiveFontSizes или используют медиазапросы в sx.

Применение variantMapping для семантики

Компонент Typography поддерживает variantMapping, что позволяет сопоставлять визуальный стиль и HTML-теги:

<Typography variant="h1" component="h2">
  Заголовок h1, но семантически h2
</Typography>

Это важно для SEO и доступности, сохраняя при этом адаптивный дизайн.

Контроль межстрочного интервала и читаемости

Адаптивная типографика включает настройку lineHeight:

<Typography
  sx={{
    fontSize: { xs: '1rem', md: '1.5rem' },
    lineHeight: { xs: 1.4, md: 1.6 },
  }}
>
  Текст с адаптивным межстрочным интервалом
</Typography>

Практическое правило: чем больше экран, тем больше lineHeight, чтобы текст оставался читаемым и визуально «воздушным».

Комбинация с компонентами сетки

Адаптивная типографика максимально эффективна в сочетании с системой сетки MUI (Grid, Box):

<Grid container spacing={2}>
  <Grid item xs={12} md={6}>
    <Typography variant="h4" sx={{ fontSize: { xs: '1.5rem', md: '2rem' } }}>
      Левый блок
    </Typography>
  </Grid>
  <Grid item xs={12} md={6}>
    <Typography variant="body1" sx={{ fontSize: { xs: '1rem', md: '1.2rem' } }}>
      Правая колонка с адаптивным текстом
    </Typography>
  </Grid>
</Grid>

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

Закрепление стилей через глобальный CSS

MUI поддерживает GlobalStyles для единообразного применения адаптивной типографики на уровне всего приложения:

import { GlobalStyles } from '@mui/material';

<GlobalStyles
  styles={{
    'html, body': {
      fontSize: '16px',
    },
    h1: {
      fontSize: '2rem',
      '@media (min-width:600px)': { fontSize: '2.5rem' },
      '@media (min-width:1200px)': { fontSize: '3rem' },
    },
  }}
/>

Это удобно для контроля базовых размеров и масштабирования текста без необходимости прописывать sx в каждом компоненте.

Адаптивная типографика в MUI сочетает темизацию, медиазапросы и систему sx, создавая единый подход к масштабированию текста на всех устройствах. Оптимальное использование responsiveFontSizes, sx, и Grid обеспечивает гармоничный, читаемый и современный интерфейс.

Оглавление