What this tool does
This converter turns pixel (px) values into root em (rem) and em values, and it works the other way around too. Type a number into any one of the three unit fields and the other two are calculated and displayed for you. You can also set your own root font size and your own em context font size, so the rem and em figures you see match the specific design you're working on rather than a generic assumption.
Root font size and em context size
Two settings shape every conversion:
- Root font size (px) is the base font size the page uses. rem values are worked out against this number.
- em context font size (px) is the font size of the specific element you're sizing. em values are worked out against this number.
Both fields start at 16px, and at that starting point 16px, 1rem and 1em are all equal. If you change the root font size to match your own CSS, the rem figures update to match. If you change the em context font size to match the element you're actually styling, the em figures update to match that instead. The root font size field must hold a number greater than 0, and the em context font size field must too — the tool won't calculate against a zero or negative base.
Converting a value
The Values field is where you enter the number you want converted, in px, rem, or em. As the hint on the page puts it: "Enter a px, rem or em value — the other two update as you type." Whichever unit you type into, the other two are filled in immediately, and the page confirms this with the note "Converted across all three units."
A couple of examples show how the math plays out. With the root font size left at its default 16px, entering 32 in the px field gives you 2rem, because 1rem equals 16px at that root size. If you instead set the em context font size to 20px and enter 30 in the px field, the em field shows 1.5em, since 30px is one and a half times that 20px context. The tool also accepts negative pixel values — entering -8 in the px field, still at a 16px root, gives you -0.5rem.
Because every field recalculates as you type, you can also work backwards: type a rem or em figure straight in, and the tool fills in the matching px value using whichever root or context font size you've set.
The common px → rem table
Below the conversion fields sits a table labelled Common px → rem (16px base). It lists frequently used pixel values alongside their rem equivalents, worked out at a fixed 16px root font size regardless of whatever root font size you've entered above. It's there as a quick reference for the standard case, separate from the live conversion you're running with your own settings.
Error messages and edge cases
Each field checks what you type independently:
- Enter something in the Values field that isn't a valid number and you'll see: "Enter a number to convert."
- Enter something invalid in the Root font size (px) field and you'll see: "Root font size must be a number greater than 0."
- Enter something invalid in the em context font size (px) field and you'll see: "em context font size must be a number greater than 0."
Outside of those invalid states, the tool behaves as described above: any edit to px, rem, or em updates the other two, the root and em context font sizes stay at their own defaults of 16px until you change them, and negative pixel values are accepted and converted like any other number.
Privacy
Every conversion runs in your browser. Nothing you type is uploaded to BroBroGo.
Frequently asked questions
What is the difference between px, rem and em? px is a fixed length. rem is measured against the page's root font size, so at a 16px root, 1rem equals 16px. em is measured against the font size of the element it sits in. Sizing type and spacing in rem lets everything scale when a reader changes their default font size.
Why is there a separate em context size? em is relative to the font size of its own element, which is not always the root. Set the em context to that element's font size to read the em correctly, and keep it equal to the root when the two match.
What if my root font size is not 16px? Change the root font size field to match your CSS and every rem value updates instantly. The quick table below is a handy guide for the common 16px root that most sites start from.