em, rem или px: какую единицу CSS выбрать для свойства

Разница между em и rem в том, относительно чего считается размер. rem отсчитывается от размера шрифта корневого элемента, поэтому 1rem означает одно и то же на всей странице. em отсчитывается от размера шрифта самого элемента (а в font-size — от размера шрифта родителя), поэтому от компонента к компоненту он меняется. px — фиксированный CSS-пиксель, который не учитывает предпочтения пользователя по размеру шрифта. Практичный набор по умолчанию: rem для размеров шрифта и отступов страницы, em для того, что должно расти вместе с собственным текстом (внутренние отступы кнопок, размер иконок), px для границ и теней, а в медиазапросах em или rem.

em и rem: как считается каждая единица

Три единицы различаются только точкой отсчёта. В справочнике по длинам MDN они определены так (проверено в октябре 2026):

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

В компоненте это выглядит так:

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

.card { font-size: 1.25rem; }  /* 20px */
.card h2 { font-size: 1.5em; } /* 1.5 × 20px = 30px */
.card p  { font-size: 1.5rem; }/* 1.5 × 16px = 24px, карточка не влияет */
.card .tag { padding: 0.5em; } /* половина размера шрифта самого тега */

Заголовок в em зависит от того, где он стоит: вынесите его из .card, и он станет 24px. Абзац в rem равен 24px где угодно.

Почему em накапливается

em в font-size умножает размер родителя, поэтому у вложенных элементов множитель применяется снова:

li { font-size: 0.875em; }

Список на три уровня вложенности получает 0,875 × 0,875 × 0,875 ≈ 0,67 от базового размера: около 10,7px при корне 16px. С 0.875rem каждый уровень остаётся 14px. Из-за такого накопления для размеров шрифта надёжнее rem, а em уместен там, где как раз и нужно масштабирование вместе с местным текстом.

Какую единицу брать для каждого свойства CSS

Выбирайте единицу, задав вопрос, за чем должен следовать размер: за настройкой текста пользователя, за собственным текстом компонента или ни за чем. Это рекомендации и дизайн-решение, ни одна спецификация их не требует:

Ширины раскладки в px подходят, если они должны следовать экрану, а не тексту. Граница в 1px, аватар фиксированных 44px или контейнер страницы в 1200px не обязаны расти вместе с размером шрифта. Текст внутри этих блоков должен.

Отступы — вопрос суждения. Отступы в rem сохраняют ритм страницы в одном темпе с текстом, когда пользователь его увеличивает. Отступы в px оставляют на маленьком экране больше содержимого при крупном тексте. На телефоне шириной 360px эти плюсы и минусы заметны сразу, поэтому его стоит проверить (см. последний раздел).

rem и px для размера шрифта и доступность

Для размеров шрифта используйте rem (или %, или ключевые слова вроде medium), потому что размеры шрифта в px не учитывают размер шрифта по умолчанию, выбранный пользователем в браузере. В Chrome на десктопе эта настройка находится в разделе «Настройки > Внешний вид > Размер шрифта» (Settings > Appearance > Font size), а дополнительные параметры — в «Настроить шрифты» (Customize fonts) (справка Chrome). Пользователь, который поднял его с исходного значения до 20px, получит от 1rem основной текст в 20px, а от 16px по-прежнему 16px.

Масштаб страницы в браузере работает иначе. Он увеличивает всё, включая px, так что раскладка в px тоже растёт, когда пользователь нажимает Ctrl и +. Настройка размера шрифта — тот случай, где rem и px ведут себя по-разному, и именно на неё рассчитывают люди со слабым зрением, когда им нужен крупный текст без горизонтальной прокрутки страницы.

Критерий успешности WCAG 2.2 1.4.4 Resize Text (уровень AA) требует, чтобы текст можно было увеличить до 200 процентов без потери содержимого и функциональности. Среди достаточных техник там есть использование единиц em для размеров шрифта. Относительные единицы упрощают выполнение критерия, но не гарантируют его, потому что блок фиксированной высоты всё равно может обрезать выросший текст.

Телефоны и системный размер текста

На телефонах картина меняется. В Chrome 146 (стабильная версия 10 марта 2026) появился метатег, который нужно включить явно: он заставляет размер шрифта корня следовать настройке масштаба текста в операционной системе и браузере (заметки о выпуске Chrome 146):

<meta name="text-scale" content="scale">
<meta name="viewport" content="width=device-width, initial-scale=1">

По справке MDN о text-scale, с этим тегом rem, em и ключевые слова размера шрифта масштабируются вместе с системной настройкой, а размеры шрифта в px нет. По состоянию на октябрь 2026 года MDN помечает тег как экспериментальный с ограниченной доступностью и предупреждает, что мобильный масштаб текста может доходить от 200% до более чем 300%, поэтому странице, которая его подключает, нужна проверка на таких размерах. Без этого тега Chrome на Android предлагает ползунок «Масштаб по умолчанию» (Default zoom) в разделе «Настройки > Специальные возможности» (Settings > Accessibility), который увеличивает всю страницу (справка Chrome), так что px и rem растут там вместе.

Это самый сильный сегодня довод за размеры шрифта в rem: сайт, размеченный в rem, готов к масштабированию текста на уровне системы в тот день, когда добавит один метатег.

Размер шрифта корня и приём с 62,5%

Не трогайте размер шрифта корня или задавайте его в процентах. Если написать html { font-size: 16px; }, предпочтение пользователя переопределяется для всей страницы, потому что каждый rem теперь указывает на фиксированные 16px.

Известный приём с 62,5% задаёт html { font-size: 62.5%; }, чтобы при настройках по умолчанию 1rem равнялся 10px, а 1.6rem — 16px. Пользовательское масштабирование он сохраняет, потому что процент применяется к значению по умолчанию у пользователя. Цена в том, что любой сторонний компонент, написанный под rem в 16px, получит 62,5% от задуманного размера. Если нужна простая арифметика, функция Sass или пользовательское свойство CSS выполнят пересчёт, не трогая корень.

Таблица перевода px в rem

При размере шрифта корня по умолчанию rem = px / 16:

Оставляйте для полей ввода 16px (1rem) или больше: iOS Safari приближает поля формы, текст в которых мельче.

em, rem или px в медиазапросах

В условиях медиазапросов используйте em или rem, тогда брейкпоинты сдвигаются вместе с размером шрифта по умолчанию у пользователя. В медиазапросах обе единицы означают одно и то же: спецификация Media Queries Level 4 говорит, что относительные единицы там отсчитываются от начального размера шрифта, заданного пользовательским агентом или настройками пользователя, а не от вашего правила для html.

/* 48em = 768px при 16px по умолчанию, 960px при 20px по умолчанию */
@media (min-width: 48em) {
  .layout { display: grid; grid-template-columns: 1fr 2fr; }
}

Возьмём планшет в портретной ориентации с viewport шириной 820px (разрешение 820 × 1180 составляло 5,06% среди разрешений планшетов в мире по данным StatCounter за сентябрь 2026). При настройках по умолчанию двухколоночная раскладка включается на 768px, так что планшет получает две колонки. Пользователь с размером шрифта по умолчанию 20px видит одну колонку до 960px, и эта раскладка как раз подходит его крупному тексту. Запрос min-width: 768px навязал бы ему две колонки и сжал текст.

О том, как выбирать значения брейкпоинтов, рассказано в статье как выбрать адаптивные брейкпоинты, а о самом синтаксисе запросов — в руководстве по медиазапросам CSS.

Проверьте единицы на ширине телефона

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

1. В Chrome на десктопе откройте «Настройки > Внешний вид > Размер шрифта» и выберите размер побольше или задайте точный размер в «Настроить шрифты».
2. Откройте страницу в viewport телефона шириной 360px. Mobile View Extension перезагружает вкладку как телефон с мобильным user agent и размером экрана; выберите пресет или введите 360 × 800 как своё разрешение. Подойдёт и режим устройства в DevTools.
3. Убедитесь, что основной текст стал крупнее. Если нет, значит, где-то задан размер шрифта в px или корень в px.
4. Найдите текст, который вылезает за кнопки, подписи, обрезанные в блоках фиксированной высоты, и навигацию, переносящуюся на две строки.
5. Верните настройку к значению по умолчанию и сравните два состояния рядом.

Так проверяется только настройка размера шрифта на десктопе. Предпросмотр работает в десктопном Chrome и управляется мышью, поэтому он не воспроизводит системный размер текста на телефоне, отрисовку Safari и метатег text-scale на Android. Для этого возьмите настоящий телефон или эмулятор и увеличьте системный размер шрифта там.

Подробнее о том, как из этих единиц собирают гибкие раскладки, читайте в статье что такое адаптивный веб-дизайн.

Частые вопросы

Что использовать для размера шрифта: rem или px?

Используйте rem. Размер шрифта в px игнорирует размер текста по умолчанию, выбранный пользователем в браузере, а rem ему следует; кроме того, именно размеры шрифта в rem масштабирует метатег text-scale в Chrome на телефонах.

Когда использовать em вместо rem?

Используйте em, когда размер должен следовать за текстом самого элемента: внутренние отступы кнопок и бейджей, иконки внутри текста, межбуквенный интервал и условия медиазапросов. Не применяйте em для вложенных значений font-size, потому что он накапливается.

Всегда ли 1rem равен 16px?

Нет. 1rem равен размеру шрифта корневого элемента, а это 16px только при типичном значении браузера по умолчанию. Его могут изменить настройка пользователя, процент на html или метатег text-scale.

По-разному ли ведут себя em и rem в медиазапросах?

Нет. В медиазапросах обе единицы отсчитываются от начального размера шрифта из браузера и настроек пользователя, так что 48em и 48rem дают один и тот же брейкпоинт. Размер шрифта, заданный для html в вашей таблице стилей, на них не влияет.