PX to REM & EM Converter
Move a length between px, rem, and em with the root and parent font-sizes made explicit — so a design handed to you in pixels lands as clean, scalable CSS.
Think in pixels, ship in rem
Design tools speak pixels; resilient stylesheets speak rem. The gap between the two is a division most developers can do in their head until a project uses a non-default root or a nested component changes the parent font-size — and then an em value quietly drifts. Making the root and parent explicit turns that guesswork into a single, checkable number.
Sizing type against the viewport instead of the font-size? The CSS clamp() generator builds a fluid value that grows with the screen, and the viewport units calculator shows what a vw or vh length resolves to in pixels.
Frequently Asked Questions
What's the difference between rem and em?
Both are relative units, but they measure against different things. rem is always relative to the root element's font-size — the <html> element, 16px by default — so 1rem is the same everywhere on the page. em is relative to the font-size of the element it's used on (which it inherits from its parent), so the same 1.5em can resolve to different pixel values in different places. That is why this converter asks for a root font-size and a parent font-size separately: change the parent and the em value moves while the rem value stays put.
Why convert pixels to rem at all?
Sizing type and spacing in rem lets the whole layout scale when a user changes their browser's default font-size, which is a real accessibility win for readers who need larger text. Pixels ignore that preference. Building in rem — while still thinking in the pixels a design tool hands you — is the common middle ground, and this tool does the arithmetic so you don't hard-code a fixed px value by mistake.
How is the conversion calculated?
Every value is first resolved to an absolute pixel length, then divided back out. px to rem divides by the root font-size; px to em divides by the parent font-size. So at a 16px root, 24px is 24 ÷ 16 = 1.5rem; with a 12px parent, that same 24px is 24 ÷ 12 = 2em. Feed it a rem or em value instead and it multiplies back up to pixels first.
What root font-size should I use?
Use 16 unless you have deliberately changed it. Browsers apply a 16px default to the root element, and it is best practice to leave that alone (setting html { font-size: 62.5% } to make 1rem equal 10px is a well-known but fragile trick). If your project sets a different root size, enter it here so the rem figures match what ships.
A convenience converter for CSS authoring. Confirm the computed styles in your browser’s dev tools before relying on them in production.