Конвертер единиц CSS (px / rem / em / pt)

Конвертируйте значение между пикселями, rem, em и пунктами прямо в вашем браузере.

Пример:

Как это работает

Типичный сценарий фронтенд-разработки: макет Figma задаёт все размеры в пикселях (16px, 24px, 32px...), но лучшие практики доступности рекомендуют использовать относительные единицы вроде rem для CSS, чтобы текст корректно масштабировался, когда пользователь увеличивает размер шрифта по умолчанию в своём браузере. Введите значение в пикселях из макета, выберите «px» → «rem» с обычным базовым размером шрифта сайта (по умолчанию 16px) и вставьте результат прямо в ваш CSS.

Зачем нужен базовый размер шрифта?

rem и em — относительные единицы: 1rem равен размеру шрифта корневого элемента (html), а 1em — размеру шрифта текущего элемента. Без этого опорного размера (обычно 16px в браузере по умолчанию, но иногда изменяется таблицей стилей) невозможно конвертировать в px или из px. Поэтому этот инструмент просит указать базовый размер шрифта, который будет использоваться как точка отсчёта.

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

rem (« root em ») всегда вычисляется относительно размера шрифта корневого элемента документа, что делает его предсказуемым в любом месте страницы. em вычисляется относительно размера шрифта ближайшего родительского элемента и может накапливаться. Этот инструмент обрабатывает обе единицы одинаково, используя указанную вами базовую величину как общую точку отсчёта.

Конвертация полностью выполняется в вашем браузере благодаря WebAssembly: ваши значения никогда не передаются на сервер.