PX в REM
Чтобы перевести px в rem, разделите значение в пикселях на размер шрифта корневого элемента: rem = px / база. При базе браузера по умолчанию 16px получается 24px / 16 = 1.5rem. Измените базу ниже — 14px для Ant Design, 10px для приёма с 62,5 % — и значения rem и em последуют за ней; значение в пунктах зависит от пикселей, ведь 1px — это всегда 0,75pt.
Поле em исходит из того, что элемент наследует базовый размер шрифта, заданный выше. В CSS em считается от размера шрифта самого элемента — и от размера родителя, когда вы задаёте им саму font-size.
Пакетный перевод: вставьте CSS или список значений в px
Каждое значение в px переписывается в rem относительно базового размера шрифта выше.
Как перевести px в rem?
Формула: rem = px / базовый размер шрифта, обратная — px = rem x базовый размер шрифта. Учитывается только размер шрифта корневого элемента html, как бы глубоко ни был вложен сам элемент, и именно поэтому арифметика rem предсказуема. При базе 16px по умолчанию: 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem и 40px = 2.5rem.
Не округляйте результат. 15px при базе 16px — это ровно 0.9375rem; округление до 0.94rem смещает отрисованный размер к 15.04px и ломает выравнивание по сетке. Браузеры считают субпиксельные длины и при отрисовке привязывают их к пиксельной сетке устройства, поэтому копируйте точное значение, которое даёт конвертер. Конвертер выводит до шести знаков после запятой: точно для баз, которые делятся нацело, например 16px и 10px, и с точностью до миллионной доли rem для базы вроде 14px, которая не делится.
Таблица px в rem при базе 16px, 14px и 10px
Одно и то же значение в пикселях превращается в три разных значения rem в зависимости от базы, заданной в проекте, поэтому в таблице приведены все три, а также эквивалент в пунктах (CSS определяет 1px как 1/96 дюйма, а 1pt как 1/72 дюйма, поэтому 1px = 0.75pt). Столбцы для 16px и 10px точны. При базе 14px деление почти никогда не бывает точным, поэтому такие значения округлены до четырёх знаков и помечены знаком приближения; конвертер выше показывает больше знаков.
| Пиксели | rem (база 16 px) | rem (база 14 px) | rem (база 10 px) | Пункты |
|---|---|---|---|---|
| 1px | 0.0625rem | ≈0.0714rem | 0.1rem | 0.75pt |
| 2px | 0.125rem | ≈0.1429rem | 0.2rem | 1.5pt |
| 4px | 0.25rem | ≈0.2857rem | 0.4rem | 3pt |
| 8px | 0.5rem | ≈0.5714rem | 0.8rem | 6pt |
| 10px | 0.625rem | ≈0.7143rem | 1rem | 7.5pt |
| 12px | 0.75rem | ≈0.8571rem | 1.2rem | 9pt |
| 14px | 0.875rem | 1rem | 1.4rem | 10.5pt |
| 16px | 1rem | ≈1.1429rem | 1.6rem | 12pt |
| 18px | 1.125rem | ≈1.2857rem | 1.8rem | 13.5pt |
| 20px | 1.25rem | ≈1.4286rem | 2rem | 15pt |
| 24px | 1.5rem | ≈1.7143rem | 2.4rem | 18pt |
| 28px | 1.75rem | 2rem | 2.8rem | 21pt |
| 32px | 2rem | ≈2.2857rem | 3.2rem | 24pt |
| 36px | 2.25rem | ≈2.5714rem | 3.6rem | 27pt |
| 40px | 2.5rem | ≈2.8571rem | 4rem | 30pt |
| 48px | 3rem | ≈3.4286rem | 4.8rem | 36pt |
| 64px | 4rem | ≈4.5714rem | 6.4rem | 48pt |
| 80px | 5rem | ≈5.7143rem | 8rem | 60pt |
| 96px | 6rem | ≈6.8571rem | 9.6rem | 72pt |
px, rem или em: какую единицу выбрать?
Практическое разделение: rem — для всего, что должно следовать за размером текста читателя, em — для значений, которые должны следовать за размером шрифта самого элемента, а px — только там, где длина обязана оставаться физически постоянной. Столбец с примером рассчитан на базу 16px и родителя с размером 16px.
| Единица | Относительно чего | 20px равно | Лучше всего для | Следует за размером текста читателя |
|---|---|---|---|---|
| px | Ни от чего — абсолютная единица (1px = 1/96 дюйма) | 20px | Тонкие рамки, кольца фокуса, точные размеры иконок | Нет |
| rem | Размер шрифта корневого элемента html | 1.25rem | Размеры текста, отступы, брейкпоинты, целые типографские шкалы | Да |
| em | Размер шрифта самого элемента (родителя — при задании font-size) | 1.25em | Внутренние отступы, которые должны расти вместе с подписью | Да |
| % | Значение родителя для этого свойства | 125% | Резиновые ширины и старые цепочки font-size | Да (font-size) |
Что использовать для отступов, полей и рамок: px или rem?
Используйте rem для внутренних и внешних отступов, которые должны дышать вместе с ростом текста: отступы кнопок, поля карточек, промежутки между секциями, зазоры сетки. Для тонких линий оставьте px. Рамка в 1px — это один чёткий аппаратно-независимый пиксель, а та же рамка, записанная как 0.0625rem, при некоторых масштабах округляется до нуля или размывается; то же касается колец фокуса и разделителей толщиной 2px. Поэтому пакетный перевод выше по умолчанию не трогает значения 1px и 2px и переписывает всё остальное.
Медиазапросы — второе место, где rem окупается. Внутри медиазапроса rem считается от исходного размера шрифта браузера, а не от вашего правила для html: брейкпоинт 48rem равен 768px при настройках по умолчанию и растёт для читателя, который увеличил размер текста. Брейкпоинты в px не сдвигаются никогда.
Как перевести px в rem в Figma, VS Code и Tailwind?
Figma измеряет в px, но Dev Mode умеет выводить rem: откройте настройки Inspect, выберите «Set unit scale» и укажите корневой размер шрифта (по умолчанию 1rem = 16px). Расширения VS Code вроде cssrem конвертируют через автодополнение и выносят базу в настройки — cssrem.rootFontSize, по умолчанию 16, — поэтому проверьте её, прежде чем доверять результату в проекте с базой 14px. Целый файл вставьте в поле массовой конвертации выше, предварительно задав базу. Стандартная шкала Tailwind уже построена на rem при базе 16px: одна единица отступа равна 0.25rem (4px), поэтому 16px — это 4, 24px — 6, а 40px — 10.
Источники
О PX в REM
Этот конвертер px в rem отвечает на один вопрос: во что превращается в CSS значение в пикселях из вашего макета при том корневом размере шрифта, который на самом деле использует проект? Подвиньте ползунок базы — 16px это значение браузера по умолчанию, 14px база Ant Design, 10px старый приём с 62,5 % — и каждое значение rem и em на странице пересчитается относительно неё, так что вам никогда не придётся вспоминать, для какой базы записано то или иное число.
Вводить нужно ту базу, которую ваш стилевой файл задаёт элементу html, а не body и не размер шрифта того компонента, который вы оформляете. Если такого правила нет, действует значение браузера по умолчанию: 16px, если только читатель его не увеличил. В DevTools выберите узел html и посмотрите его вычисленный font-size; это число и есть делитель для всего файла стилей. Четыре кнопки фреймворков подставят его для Tailwind, Bootstrap, Material UI и Ant Design.
Отличительная черта этой страницы — массовый режим: вставьте таблицу стилей, выгрузку спецификаций из Figma или простой список чисел и получите вариант в rem со счётчиком изменённых значений, готовый к копированию или выгрузке в CSV. Ниже под инструментом вас ждут формула в обе стороны, таблица от 1px до 96px для трёх баз с эквивалентами в пунктах, сравнительная таблица единиц и десять подробно разобранных вопросов.
Примеры использования
Как использовать
Задайте базовый (корневой) размер шрифта: 16px — значение браузера по умолчанию, 14px соответствует Ant Design, 10px даёт приём с 62,5 %.
Введите значение в пикселях в поле «Пиксели». Поля rem, em и pt обновляются по мере ввода.
Или наоборот: введите значение в rem и посмотрите, какой размер в пикселях оно даёт при текущей базе.
Нажмите любое значение в быстрой таблице от 8px до 96px, чтобы подставить его, или сверьтесь с полной таблицей для баз 16px, 14px и 10px.
Вставьте целый блок CSS в пакетный перевод, чтобы переписать все значения в px разом, сохранив рамки 1px и 2px.
Скопируйте готовое CSS-объявление или скачайте переведённые пары px/rem в CSV для передачи дизайнерам.
Советы профессионалов
- Сначала задайте базовый размер шрифта: от него зависят все значения rem и em на странице — поля, кнопки быстрого выбора и массовая конвертация, — поэтому переход на базу 14px пересчитывает их все сразу.
- Оставляйте рамки 1px и 2px в пикселях. Субпиксельные рамки при некоторых масштабах округляются до нуля — поэтому пакетный режим по умолчанию их пропускает.
- pt не зависит от базы: 24px это 18pt и при базе 16px, и при базе 10px, поэтому поле «Пункты» не меняется, когда вы двигаете ползунок.
- Пакетный режим пересчитывается при каждом движении ползунка базы, так что вы увидите одну и ту же таблицу стилей при базе 16px и 14px, не вставляя её дважды.
- Берите em только тогда, когда значение должно следовать за размером шрифта собственного элемента — например, внутренние отступы кнопки вокруг подписи, — а остальное держите в rem, чтобы ничего не накапливалось.
Часто задаваемые вопросы
Разделите значение в пикселях на базовый размер шрифта: rem = px / база. База браузера по умолчанию — 16px, поэтому 24px / 16 = 1.5rem, а 10px / 16 = 0.625rem. Для rem важен только размер шрифта корневого элемента, как бы глубоко ни был вложен сам элемент, — именно это делает расчёт предсказуемым во всей таблице стилей.
При базе 16px по умолчанию 1rem = 16px, 1.5rem = 24px и 2rem = 32px; здесь нужно умножать, а не делить: px = rem x база. Если база равна 14px, как в Ant Design, 1rem падает до 14px, а 1.5rem становится 21px. Значение в rem бессмысленно без указания базы, поэтому всегда называйте её рядом.
Размер шрифта в px игнорирует размер текста, который читатель выбрал в браузере: тот, кто поставил себе 20px по умолчанию, всё равно получит ваши жёстко заданные 14px. rem измеряется относительно этой настройки, поэтому все размеры масштабируются вместе. Критерий успеха 1.4.4 WCAG 2.2 требует, чтобы текст выдерживал увеличение до 200 %, и типографская шкала на rem справляется с этим без единого дополнительного медиазапроса.
rem всегда считается от размера шрифта корневого элемента html. em считается от размера шрифта того элемента, на котором он написан, — кроме самой свойства font-size, где он берётся от размера шрифта родителя. Именно поэтому вложенные размеры шрифта накапливаются: 0.9em внутри 0.9em внутри 0.9em даёт 0.729 от исходного. rem не накапливается никогда, поэтому он безопаснее для типографских шкал и отступов в вёрстке.
Используйте rem для отступов и полей, которые должны дышать вместе с ростом текста: отступы кнопок, поля карточек, промежутки между секциями. Для тонких линий оставьте px: рамка в 1px остаётся чёткой, а её эквивалент в rem при некоторых масштабах округляется до нуля или размывается. Именно поэтому пакетный перевод на этой странице по умолчанию оставляет значения 1px и 2px в пикселях.
Оставайтесь на 16px, если фреймворк не требует иного, — это совпадает с настройкой браузера по умолчанию. У Ant Design база 14px. Приём с 62,5 % задаёт html { font-size: 62.5% }, чтобы 1rem = 10px, а расчёт сводился к px / 10: 24px — это 2.4rem. Он по-прежнему следует за настройкой читателя — 62,5 % от целых 20px дают 12.5px, — но затем нужно прописать body { font-size: 1.6rem }, иначе каждый абзац отрисуется в 10px, а сторонние компоненты, рассчитанные на базу 16px, выглядят слишком мелкими. Все три базы есть в таблице выше.
Считайте значение в инспекторе и разделите на свою базу: заголовок 28px при базе 16px равен 1.75rem, подпись 12px — 0.75rem. Dev Mode умеет выводить rem и сам: откройте настройки Inspect рядом со списком языков, выберите «Set unit scale» и укажите свой корневой размер шрифта (по умолчанию 1rem = 16px). Вставьте целый экспортированный блок в поле массовой конвертации выше, чтобы переписать все значения сразу.
Да, и обычно это лучше. Внутри медиазапроса rem считается от исходного размера шрифта браузера, а не от вашего правила для html, поэтому брейкпоинт 48rem равен 768px при настройках по умолчанию и растёт для читателей, увеличивших текст. em ведёт себя там так же. Брейкпоинты, записанные в px, остаются неизменными независимо от выбора читателя.
Нет. Браузеры считают субпиксельные длины и при отрисовке привязывают их к пикселям устройства, поэтому 0.9375rem при базе 16px даёт ровно 15px. Округление до 0.94rem смещает значение к 15.04px, и эта ошибка накапливается по сетке или вертикальному ритму. Копируйте точное значение, которое выводит конвертер, и оставьте привязку браузеру.
CSS определяет 1px как 1/96 дюйма, а 1pt как 1/72 дюйма, поэтому 1px = 0.75pt и 16px = 12pt; на этом соотношении построен столбец пунктов в таблице. dp в Android — отдельная система, где 1dp = 1px при 160 dpi, поэтому отступ Material в 16dp в вебе оказывается близок к 16px, а не к результату перевода в rem.