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

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

Зачем нужно

Фиксированный font-size: 16px на мобиле выглядит нормально, но тот же размер на 4K-мониторе кажется крошечным. Пошаговое изменение через медиазапросы создаёт резкие скачки. Адаптивная типографика делает текст читаемым и пропорциональным на любом устройстве.

Где используется

  • Заголовки H1–H3 на лендингах и блогах
  • Основной текст статей (оптимальная длина строки — 60–80 символов)
  • Адаптивные UI-компоненты с динамическим контентом
  • Системы дизайна с fluid type scale

Подход 1: vw-единицы

h1 {
  font-size: 5vw; /* 5% от ширины вьюпорта */
}
/* Проблема: на очень узком экране становится нечитаемым */

Подход 2: clamp — предпочтительный

/* clamp(min, preferred, max) */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* Минимум 1.5rem, максимум 3rem, в середине — 4vw */
}

p {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}

<article>
  <h1>Заголовок масштабируется плавно</h1>
  <p>Текст тоже адаптируется к ширине экрана.</p>
</article>

Подход 3: calc с vw

/* Формула: base + (max - min) * (100vw - min-vw) / (max-vw - min-vw) */
h1 {
  font-size: calc(1.5rem + 1.5vw);
  /* На 320px ≈ 1.5rem + 4.8px; на 1200px ≈ 1.5rem + 18px */
}

Адаптивный line-height

p {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.5; /* Безразмерный коэффициент — масштабируется вместе с шрифтом */
}

CSS Custom Properties для шкалы типографики

:root {
  --text-sm: clamp(0.875rem, 1.5vw, 1rem);
  --text-base: clamp(1rem, 1.8vw, 1.125rem);
  --text-lg: clamp(1.125rem, 2vw, 1.5rem);
  --text-xl: clamp(1.5rem, 3vw, 2.25rem);
  --text-2xl: clamp(2rem, 5vw, 3.5rem);
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
p  { font-size: var(--text-base); }

Частые ошибки

  1. Только vw без clamp — шрифт становится нечитаемым на узких экранах; всегда задавайте min и max через clamp.
  2. Фиксированный line-height в px — при росте font-size межстрочный интервал не масштабируется; используйте безразмерный коэффициент.
  3. Слишком большой диапазон clamp — разница между min и max в 2-3x создаёт непропорциональные размеры; удерживайте разброс в пределах 1.5–2x.

Связанные темы

Ресурсы