Калькулятор px в rem онлайн

Переводит пиксели из макета в rem относительно шрифта html. 16px при корне 16 — это 1rem; если html 62.5%, корень 10px и счёт другой.

Вставьте rem в CSS, в токены, в Tailwind-spacing. em зависит от родителя — не путайте. Картинку и соотношение сторон этот сервис не считает.

Данные

Результат

Как пользоваться

Введите размер в px и базовый шрифт html. Если в проекте html { font-size: 62.5% }, базовый размер — 10px.

Как интерпретировать результат

16px при root 16 = 1rem. 14px ≈ 0.875rem. Дробь в CSS лучше не округлять слишком грубо: 0.875 надёжнее, чем 0.88.

Зачем переводить макет из Figma в rem

Макет почти всегда в пикселях. В CSS для текста и отступов берут rem, чтобы масштаб следовал за шрифтом пользователя и за html { font-size }. 16px при корне 16px — это 1rem, 14px — 0.875rem.

Если на html стоит 62.5%, корень 10px и счёт «14px → 1.4rem». Укажите root 10, иначе получите не те значения, что в гайде команды.

rem, em и проценты

rem считается от корня документа. em — от шрифта родителя: вложенная кнопка с em разъедется. Процент в выводе — доля от root, не width: 50%. Пункты pt показаны для печати при 96 dpi, в вебе их почти не пишут.

Не округляйте 0.875 до 0.88 «для красоты»: накапливается сдвиг сетки. Лучше оставить три знака или дробь, как в дизайн-токенах.

Куда вставлять результат

В custom property (--space-sm: 0.75rem), в Tailwind-подобный spacing, в clamp() рядом с vw. Контраст текста проверяйте отдельным сервисом WCAG: rem сам по себе доступность не считает.

Менять картинку 1920×1080 этим калькулятором нельзя — для кадра есть соотношение сторон. Пиксели устройства (DPR) сюда не входят: это CSS px.

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

Почему все делят на 16?

Дефолт браузера 16px. 1rem = размер html, не «всегда 16».

62.5% на html?

Тогда 1rem = 10px, пересчёт проще: 14px → 1.4rem. Укажите root 10.

em или rem?

rem от корня, em от родителя. Если родитель не root, em не равен rem.

Пользователь увеличил шрифт?

rem вырастет вместе с ним — поэтому его и берут для a11y.

pt для печати?

Сервис показывает pt при 96 dpi. В вебе чаще px/rem.

Браузерный дефолт всегда 16px?

Почти всегда, пока пользователь не увеличил шрифт и вы не переопределили html. Поэтому и нужен rem.

Как получить px обратно из rem?

Умножьте rem на root. 1.25rem × 16 = 20px. Сервис показывает обратную строку сам.