The division is not the point
Converting pixels to rem is one division, and nobody needs help with it. The reason it is worth doing at all is what the divisor means.
A rem is the font size of the root element — which is to say, whatever the reader has set their browser to. Someone who has increased their default text size because they need to gets a layout that grows with them. The same layout written in pixels ignores that person completely. That is the accessibility argument, and it is the entire case for the unit.
The [msm_tool slug="px-to-rem"] converts in batches against whatever root you specify, which matters when you are migrating an existing stylesheet rather than starting fresh.
16px is the number
Every major browser defaults its root font size to 16 pixels. Unless your stylesheet deliberately sets something else, that is the figure to convert against.
You will find advice to set the root to 62.5%, making 1rem equal 10px so the arithmetic is trivial. It works, and it trades easy mental maths for a stylesheet that breaks entirely if that one rule is ever removed or overridden. It also means every rem value in your codebase is meaningless without knowing about the trick. Most teams that adopt it eventually regret it.
What to convert, and what to leave
Not every length should scale with the reader's text size.
- Convert: font sizes, line heights, padding and margins around text, container widths, gaps between elements. Anything whose job is to give text room to breathe should grow when the text does.
- Leave in pixels: borders and hairlines, box-shadow blur radii in most cases, and anything meant to stay a fixed physical size. A one-pixel rule should stay one pixel; scaling it to 1.0625 pixels helps nobody.
- Consider neither: some values are better as percentages or viewport units. A full-bleed section is
100vw, not a converted pixel value.
rem and em are not interchangeable
A rem is always relative to the root. An em is relative to the font size of its own element, which means ems compound as they nest.
Set a list item to 0.9em and nest three levels of lists, and the innermost is at 0.73 of the base without anyone intending it. That compounding is occasionally exactly what you want — padding inside a button expressed in em scales automatically with the button's own font size, which is genuinely useful — but it is a deliberate choice rather than a default.
The rule of thumb: rem for anything that should relate to the page, em for anything that should relate to its own element's text.
Media queries do not use your root
This one surprises people. A rem inside a media query resolves against the browser's initial font size, not the root font size you set in your stylesheet.
So if you set the root to 62.5% and then write @media (min-width: 48rem), that breakpoint is at 768 pixels, not 480. Changing the root does not move your breakpoints, and expecting it to is a reliable source of layouts that break at the wrong widths.
Rounding
The converter reports four decimal places, which is far finer than any screen can render. Round further in your stylesheet if you prefer readable numbers — the visual difference between 1.4375rem and 1.44rem is nothing.
Where it does matter is consistency. Rounding some values and not others produces a scale that drifts, and a type scale that is nearly-but-not-quite proportional looks worse than one that is obviously stepped.
Migrating an existing stylesheet
Converting everything at once rarely goes well. A workable order:
- Font sizes first. They are the highest value and the easiest to verify by eye.
- Then vertical spacing — margins and padding above and below text. This is where the benefit shows: text that grows without its surrounding space growing looks cramped.
- Then container widths. Test at increased browser text size before and after; this is the step that reveals layouts assuming a fixed character count per line.
- Leave borders, shadows and decorative sizes alone unless you find a reason.
Test by setting your browser's default font size to 20 or 24 pixels and using the site. That is the check the conversion exists to pass, and it is the one nobody runs.