px vs rem vs em: какие единицы измерения использовать в CSS

Выбор единиц измерения в CSS влияет на масштабируемость, доступность и согласованность интерфейса. px, rem, em, vw, vh — каждая единица решает свои задачи. В этой статье разберём, когда использовать каждую, как связаны доступность и rem для размеров шрифта, и почему базовый font-size критичен для адаптивной типографики.

Для быстрой конвертации значений используйте конвертер px ↔ rem на reChecker — интерактивный инструмент с настройкой базового размера.

px — пиксели

px — абсолютная единица. Один пиксель соответствует одному пикселю на экране (с учётом плотности пикселей устройства). Значение 16px всегда будет 16 пикселей, независимо от настроек пользователя.

Когда использовать px

• Границы, тени, отступы — там, где масштабирование от размера шрифта не требуется
• Иконки фиксированного размера — когда нужна точная привязка к сетке
• Мелкие декоративные элементы — линии, разделители, тонкие обводки

.card {
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 16px;
}

Ограничения px для типографики

Если пользователь увеличивает размер шрифта в браузере (настройки доступности), значения в px не масштабируются. Текст с font-size: 14px останется 14px даже при настройке «Крупный шрифт». Это нарушает WCAG 2.1 (критерий 1.4.4) — контент должен масштабироваться до 200% без потери функциональности.

rem — корневой em

rem (root em) — относительная единица, привязанная к font-size корневого элемента (html). По умолчанию в браузерах html { font-size: 16px }, поэтому 1rem = 16px.

Преимущества rem

• Масштабирование от настроек пользователя — при увеличении базового шрифта все значения в rem масштабируются пропорционально
• Единая точка контроля — меняете font-size на html, и весь интерфейс пересчитывается
• Предсказуемость — rem не зависит от контекста родителя, в отличие от em

Когда использовать rem

• Размеры шрифтов — обязательно для доступности
• Отступы и размеры, связанные с типографикой — padding, margin, width контейнеров текста
• Адаптивные интерфейсы — при смене базового размера на брейкпоинтах

:root {
  font-size: 16px; /* или 100% — наследует настройки пользователя */
}

body {
  font-size: 1rem; /* 16px */
}

h1 {
  font-size: 2rem; /* 32px */
}

.container {
  padding: 1.5rem; /* 24px */
  max-width: 60rem; /* 960px */
}

em — относительный em

em — относительная единица, привязанная к font-size текущего элемента (или ближайшего родителя с заданным font-size). 1em = текущий размер шрифта элемента.

Особенности em

• Каскадное наследование — 2em внутри элемента с font-size: 14px = 28px; внутри элемента с font-size: 20px = 40px
• Сложность расчётов — при вложенности значения умножаются, предсказать итог сложнее
• Удобство для компонентов — кнопка с padding: 0.5em 1em масштабируется относительно своего font-size

Когда использовать em

• Внутри компонентов — padding и margin кнопок, инпутов, карточек относительно их собственного font-size
• Медиа-запросы — @media (min-width: 40em) привязаны к размеру шрифта (устаревший подход, чаще используют px)
• Иконки рядом с текстом — width: 1em; height: 1em для выравнивания по высоте строки

.button {
  font-size: 1rem;
  padding: 0.5em 1.25em; /* 8px 20px — масштабируется с font-size кнопки */
  border-radius: 0.25em;
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

vw и vh — viewport units

vw (viewport width) — 1% ширины окна браузера. vh (viewport height) — 1% высоты. vmin и vmax — меньшее/большее из vw и vh.

Применение vw/vh

• Полноэкранные секции — min-height: 100vh для hero-блоков
• Адаптивная типографика — font-size: clamp(1rem, 2vw + 1rem, 2rem) для плавного масштабирования
• Элементы, привязанные к экрану — модальные окна, сайдбары

Осторожность с vw для текста

font-size: 5vw на узком экране даст слишком мелкий текст, на широком — слишком крупный. Используйте clamp() для ограничения диапазона:

.hero-title {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

Важность базового font-size

Базовый размер на html определяет все расчёты rem. Рекомендации:

1. Не задавать меньше 16px — ухудшает читаемость и может конфликтовать с зумом браузера
2. Использовать 100% или 16px — наследование настроек пользователя
3. Адаптивно менять на брейкпоинтах — для плотных интерфейсов можно уменьшить на мобильных, но осторожно

html {
  font-size: 100%; /* 16px по умолчанию, учитывает настройки пользователя */
}

@media (min-width: 1200px) {
  html {
    font-size: 18px; /* крупнее на больших экранах */
  }
}

Гибридный подход

Оптимальная практика — комбинировать единицы:

Свойство	Рекомендация	Причина
font-size	rem	Доступность, масштабирование
padding, margin	rem или em	rem — глобально, em — внутри компонентов
border, box-shadow	px	Фиксированная толщина
width, max-width	rem, %, vw	Гибкость
Медиа-запросы	px или em	px — проще, em — при font-size-зависимых брейкпоинтах

Процентные значения и наследование

Проценты для font-size считаются относительно родителя. font-size: 150% — это 1.5 × размер шрифта родителя. Если родитель 16px, получится 24px. Проценты создают каскад, похожий на em: при вложенности значения умножаются. Для глобальных размеров rem предпочтительнее — проценты уместны для локальных компонентов, где нужно «относительно родителя».

Единицы для медиа-запросов

В @media можно использовать и px, и em. @media (min-width: 40em) привязан к размеру шрифта: при базе 16px это 640px. При увеличении пользователем шрифта брейкпоинт сдвигается — layout адаптируется к читаемости. Для большинства проектов @media (min-width: 768px) в px достаточен и проще. em в медиа-запросах — для типографически-ориентированного дизайна.

Конвертер px ↔ rem

Ручной пересчёт утомителен. Конвертер px ↔ rem на reChecker позволяет:

• Вводить значения в px или rem
• Задавать базовый font-size (по умолчанию 16px)
• Получать эквиваленты в обе стороны
• Копировать готовый CSS

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

Доступность (a11y)

WCAG 2.1 требует, чтобы контент можно было масштабировать до 200% без потери информации. Использование rem для font-size, line-height и отступов текстовых блоков обеспечивает корректное масштабирование при увеличении шрифта в настройках браузера или при zoom. px для размеров шрифта блокирует это поведение. Пользователи с ослабленным зрением часто выставляют системный или браузерный шрифт выше стандартного — rem и em уважают эти настройки, px — нет.

Миграция с px на rem

При переводе существующего кода: делите значение в px на 16 (или на ваш базовый размер). 24px → 1.5rem, 12px → 0.75rem. Для нецелых значений (18px → 1.125rem) используйте конвертер reChecker. Начните с font-size и ключевых отступов, оставьте границы и тени в px. Проверьте интерфейс при zoom 150% и 200% — всё должно оставаться читаемым и функциональным.

FAQ

Нужно ли переводить всё с px на rem?

Нет. Границы, тени, мелкие отступы можно оставить в px. Обязательно rem — для font-size и ключевых отступов текстового контента. Остальное — по ситуации.

Какой базовый font-size использовать?

16px или 100%. Меньше 16px ухудшает читаемость. 100% наследует настройки пользователя — предпочтительно для доступности.

В чём разница между rem и em?

rem привязан к font-size корня (html), em — к font-size текущего элемента. rem предсказуемее, em удобнее внутри компонентов для padding/margin относительно своего размера.

Когда использовать vw/vh для шрифтов?

С осторожностью. Лучше clamp(1rem, 2vw + 1rem, 2rem) — ограничивает минимальный и максимальный размер. Чистый vw может дать нечитаемый текст на узких экранах.

Где конвертировать px в rem?

Конвертер px ↔ rem на reChecker — бесплатный онлайн-инструмент. Задайте базовый размер, введите значение в px или rem, получите эквивалент. Подходит для миграции стилей и работы с макетами.