Как перевести px в rem (и обратно) в CSS

ДБ

Дмитрий Борисенко

20 июля 2026

Почти в каждом CSS-проекте рано или поздно встаёт один и тот же вопрос: дизайнер прислал макет в пикселях, а вёрстка должна лежать в rem. Перевести одно значение несложно — но когда таких значений в макете полсотни, считать в уме надоедает быстро. Разберём саму формулу, а заодно — почему rem вообще стоит предпочесть px, если задача не только «сдать макет», но и не сломать доступность сайта.

Быстро прогнать весь список значений можно в конвертере px в rem — но полезно понимать, что происходит внутри, а не слепо доверять калькулятору.

Формула

Обе единицы связаны через один параметр — базовый размер шрифта корневого элемента (<html>). По умолчанию браузеры ставят его в 16px.

px  = rem × 16      /* 1.5rem × 16 = 24px */
rem = px  ÷ 16      /* 24px  ÷ 16 = 1.5rem */

Если в проекте другая база — например, дизайн-система живёт на 14px — подставьте её вместо шестнадцати. Больше нигде в формуле ничего не меняется.

Таблица соответствий при базе 16px

Значения, которые встречаются в вёрстке чаще всего:

px	rem	Где применяется
4px	0.25rem	Мелкий отступ, зазор между иконкой и текстом
8px	0.5rem	Внутренний отступ компактных элементов
12px	0.75rem	Подписи, вспомогательный текст
14px	0.875rem	Мелкий текст интерфейса
16px	1rem	Базовый размер текста
20px	1.25rem	Крупный текст, подзаголовок
24px	1.5rem	Заголовок третьего уровня, отступ секции
32px	2rem	Заголовок, крупный отступ
48px	3rem	Отступ между блоками страницы
64px	4rem	Крупный заголовок, отступ секции

Чем rem отличается от em

rem всегда считается от корневого элемента (<html>), а em — от размера шрифта родителя. Разница вылезает при вложенности: em накапливается, rem — нет.

/* em копится: каждый уровень умножает предыдущий */
.a {
	font-size: 0.9em;
} /* 14.4px от базовых 16px */
.a .b {
	font-size: 0.9em;
} /* 12.96px — уже не от 16px, а от 14.4px */
.a .b .c {
	font-size: 0.9em;
} /* 11.66px */

/* rem не копится: отсчёт всегда от html */
.a,
.a .b,
.a .b .c {
	font-size: 0.9rem;
} /* везде 14.4px */

Для типографики и отступов почти всегда берут rem — он предсказуем и не зависит от того, во сколько вложенных блоков попал элемент. em остаётся полезен там, где размер должен зависеть от текста рядом — например, внутренний отступ кнопки, который сам подстраивается под кегль надписи внутри неё.

Зачем вообще rem вместо px

Причина не эстетическая, а практическая: пользователи меняют базовый размер шрифта в настройках браузера, если стандартные 16px им мелко читать. Размеры в rem подхватывают эту настройку автоматически — вырастет текст, вырастут и завязанные на него отступы. Размеры в px жёстко зафиксированы и никак не реагируют — сайт для такого человека останется мелким, что бы он ни ставил в настройках.

Это самая частая причина жалоб на «слишком мелкий шрифт» на сайте, и лечится она не увеличением конкретного значения, а просто заменой единицы измерения.

При этом px никуда не девается: границы в 1px, тонкие разделители и размеры иконок масштабировать не нужно — там абсолютная точность важнее отзывчивости. Смешивать единицы в одном проекте — нормально, если в каждом месте понятно, почему выбрана именно эта.

Трюк с базой 10px

Чтобы не держать в голове деление на 16, корню задают font-size: 62.5% — это как раз 10px от стандартных браузерных 16px:

html {
	font-size: 62.5%;
} /* 1rem = 10px */
body {
	font-size: 1.6rem;
} /* вернули читаемые 16px тексту */

После этого 1rem равен 10px, и перевод превращается в сдвиг запятой: 24px — это 2.4rem, 32px — это 3.2rem.

Важная деталь: базу задают в процентах, а не в пикселях. Жёсткое font-size: 10px на корне отрезало бы пользовательскую настройку шрифта — то есть убило бы ровно то, ради чего вообще берут rem. Проценты же считаются от пользовательской базы браузера и сохраняют масштабирование.

Шрифт, который тянется за экраном

Фиксированный rem хорош для постоянного размера, но если текст должен плавно меняться вместе с шириной окна — например, заголовок на лендинге, — одного rem мало. Для этого есть функция clamp(): она задаёт минимум, желаемое значение и максимум одной строкой.

h1 {
	font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
}

Здесь есть тонкость: если желаемое значение состоит из чистого vw без rem-слагаемого, размер перестаёт реагировать на масштабирование браузера — та же проблема доступности, что решает сам rem. Собрать корректный clamp() с первого раза, без арифметики в столбик, поможет калькулятор clamp — подробнее об этом в отдельном руководстве по clamp().

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

Жёсткий px на корневом <html>. Убивает пользовательский зум точно так же, как обычный font-size: 10px вместо 62.5%.
Смешивание баз в разных компонентах. Если часть верстки на 16px, а часть внезапно на 62.5%-хаке, одинаковый rem в разных местах даёт разный результат. База должна быть одна на весь проект.
Перевод «на глаз». 15px — это не 1rem и не 0.9rem, а 0.9375rem. Мелкие расхождения незаметны на одном элементе, но накапливаются в сетке из десятков.

Конвертер px, rem и em

Переведите rem в px или px в rem: введите значение, задайте базовый размер шрифта — результат посчитается сразу.

Попробовать

Итог

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