PrepBro
← Назад к вопросам

Когда использовать относительные величины для шрифта?

1.7 Middle🔥 181 комментариев
#HTML и CSS

Комментарии (1)

🐱
deepseek-v3.2PrepBro AI4 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Когда использовать относительные величины для шрифтов в веб-разработке

Относительные единицы измерения для шрифтов (em, rem, %, vw/vh, ch) следует использовать в современных адаптивных интерфейсах практически всегда, за исключением специфических случаев. Это фундаментальный принцип доступного и гибкого веб-дизайна.

Ключевые сценарии применения относительных единиц

1. Обеспечение доступности и поддержки пользовательских настроек

Пользователи могут изменять базовый размер шрифта в браузере. Использование rem гарантирует, что весь интерфейс масштабируется пропорционально их предпочтениям.

/* Базовый размер устанавливаем в процентах или пикселях для <html> */
html {
  font-size: 100%; /* Обычно 16px, но зависит от пользователя */
}

/* Все остальные размеры задаем в rem */
body {
  font-size: 1rem; /* = 16px при стандартных настройках */
}

h1 {
  font-size: 2.5rem; /* = 40px */
  margin-bottom: 1.5rem; /* Отступ тоже масштабируется */
}

.small-text {
  font-size: 0.875rem; /* = 14px */
}

2. Создание адаптивной типографики

Относительные единицы, особенно в комбинации с медиа-запросами или CSS-функциями clamp(), min(), max(), позволяют создать плавно меняющуюся типографику.

/* Адаптивный заголовок с помощью clamp() */
.responsive-heading {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
  /* Минимум 1.5rem, идеально 4vw + 1rem, максимум 3rem */
}

/* Или через медиа-запросы */
.container {
  font-size: 1rem;
}

@media (min-width: 768px) {
  .container {
    font-size: 1.1rem; /* Увеличиваем на планшетах */
  }
}

@media (min-width: 1200px) {
  .container {
    font-size: 1.25rem; /* Еще больше на десктопах */
  }
}

3. Построение модульной масштабной системы

Использование rem для типографики и em для внутренних отступов компонентов создает предсказуемую, согласованную систему.

/* rem для глобальной согласованности */
.button {
  font-size: 1rem;
  padding: 0.75em 1.5em; /* em для внутренних отступов относительно font-size кнопки */
  border-radius: 0.5em;
}

/* Внутри компонента em наследуется локально */
.card {
  font-size: 1rem;
}

.card__title {
  font-size: 1.25em; /* = 1.25 * 1rem = 20px */
  margin-bottom: 0.5em; /* = 10px */
}

4. Обеспечение контекстно-зависимого масштабирования

Единица em идеальна для элементов, которые должны масштабироваться относительно родительского контекста.

/* Иконка масштабируется относительно текста кнопки */
.button {
  font-size: 1rem;
}

.button__icon {
  width: 1.2em; /* Размер иконки привязан к размеру шрифта кнопки */
  height: 1.2em;
}

/* Вложенные списки с увеличивающимся отступом */
.nested-list {
  font-size: 1rem;
}

.nested-list ul {
  margin-left: 1.5em; /* Каждый уровень получает отступ 1.5em от текущего font-size */
}

Когда использовать абсолютные величины (px)

Аскетичные случаи, когда нужна пиксельная точность:

  • Пиксель-пёрфект графика: точное соответствие макетам в пикселях
  • Бордеры и тени: 1px solid #ccc всегда будет 1 пикселем
  • Размеры иконок SVG, когда они не должны масштабироваться с текстом
  • Эмуляция старых браузеров или специфические хаки

Практические рекомендации

  1. Основная стратегия: Установите базовый размер на html в процентах (100% или 62.5% для упрощения расчетов) и используйте rem для большинства размеров шрифтов и отступов.

  2. Компонентный подход: Внутри компонентов используйте em для внутренних отступов, размеров, чтобы они масштабировались относительно font-size компонента.

  3. Относительные viewport единицы (vw, vh, vmin, vmax) отлично подходят для заголовков или элементов, которые должны заполнять область просмотра, но требуют запасных вариантов через clamp() или медиа-запросы.

  4. Доступность всегда в приоритете: Даже если дизайнер предоставил макет в пикселях, конвертируйте значения в относительные единицы, обеспечивая минимум WCAG 2.1 AA (коэффициент масштабирования 200%).

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

Когда использовать относительные величины для шрифта? | PrepBro