Why does the EM column equal the REM column?

EM is relative to the parent element's font size, while REM is relative to the root. When the parent's font size equals the root (the common top-level case), EM and REM are identical. The tool assumes this case — for nested elements, compute EM manually against the parent's actual font size.

What root size should I use?

16px is the browser default and the most common choice. If your design system sets html { font-size: 10px } (for easy math), use 10. If you're using Tailwind's default, it's 16px.

Is my input sent to a server?

No. All conversion math runs in your browser. Nothing is uploaded.

Why use REM instead of PX?

REM scales with the user's browser font-size setting, so your design respects their accessibility preference. PX does not. Most modern design systems express type, spacing and breakpoints in REM (or a unit that maps to REM).

Design Tools

PX to REM Converter

Convert pixels to REM and EM units (and back) with a custom root font size. Includes a two-way single-value converter and a batch mode for pasting multiple values at once. All calculations happen in your browser.

Your input is processed locally in your browser. It is not uploaded to Dueneo.

Loading PX to REM Converter…

How to use

1
Set your root font size
Enter your html element's font-size (default 16px). All conversions update against this value.
2
Single value — two-way
Type in either the PX or REM field — the other updates instantly. Use the swap button to flip values between fields. EM is shown as a read-only reference.
3
Batch — paste many values
Switch to the Batch tab and paste one value per line. Bare numbers are treated as px; suffix with px, rem or em to be explicit. Results appear in a sortable table.
4
Quick reference — common sizes
Switch to the Quick reference tab for a pre-computed table of 8, 12, 14, 16, 18, 20, 24, 32, 48 and 64 px — the sizes most commonly used in design systems.

Common use cases

Convert a Figma pixel spec to REM units for an accessible, scalable stylesheet.
Audit a CSS file to confirm type-scale values land on sensible REM increments.
Quickly look up the REM equivalent of common pixel sizes (16, 24, 32) without breaking out a calculator.
Migrate a legacy px-based stylesheet to REM units in bulk via the batch converter.

Limitations

EM is contextual — it's relative to the parent element's font size, not the root. This tool assumes the parent's font size equals the root, which is true for top-level typography but not for nested elements. Always verify EM values in context.
The batch converter only accepts a single numeric value per line (optionally suffixed with px, rem or em). Compound values like 16px 24px are not supported.
Root font sizes below 1px are clamped to 1px to avoid division-by-zero nonsense.

Frequently asked questions

Related tools

View all

Color Shade Generator

Generate lighter and darker shades of a colour.

design

Open

Color Picker

Pick colours and convert between HEX, RGB, HSL.

design

Open

CSS Gradient Generator

Build linear and radial CSS gradients visually.

design

Open

Contrast Checker

Check WCAG colour contrast between two colours.

design

Open

Loading PX to REM Converter…

How to use

Set your root font size

Enter your html element's font-size (default 16px). All conversions update against this value.

Single value — two-way

Type in either the PX or REM field — the other updates instantly. Use the swap button to flip values between fields. EM is shown as a read-only reference.

Batch — paste many values

Switch to the Batch tab and paste one value per line. Bare numbers are treated as px; suffix with px, rem or em to be explicit. Results appear in a sortable table.

Quick reference — common sizes

Switch to the Quick reference tab for a pre-computed table of 8, 12, 14, 16, 18, 20, 24, 32, 48 and 64 px — the sizes most commonly used in design systems.

Common use cases

Convert a Figma pixel spec to REM units for an accessible, scalable stylesheet.

Audit a CSS file to confirm type-scale values land on sensible REM increments.

Quickly look up the REM equivalent of common pixel sizes (16, 24, 32) without breaking out a calculator.

Migrate a legacy px-based stylesheet to REM units in bulk via the batch converter.

Limitations

EM is contextual — it's relative to the parent element's font size, not the root. This tool assumes the parent's font size equals the root, which is true for top-level typography but not for nested elements. Always verify EM values in context.
The batch converter only accepts a single numeric value per line (optionally suffixed with px, rem or em). Compound values like 16px 24px are not supported.
Root font sizes below 1px are clamped to 1px to avoid division-by-zero nonsense.