PX to REM Converter

Divide the pixel value by the root font size: rem = px ÷ root. With the browser default root of 16px, 24px ÷ 16 = 1.5rem, 14px ÷ 16 = 0.875rem, and 12px ÷ 16 = 0.75rem. If your stylesheet sets a different root, divide by that instead: at a 10px root, 24px is 2.4rem. The root is the font size of the html element, not of body or of the element you are styling.

1rem equals the root font size, which is 16px in every major browser out of the box. It is not a fixed number, though. If a stylesheet sets html { font-size: 62.5% }, 1rem becomes 10px, and if a visitor raises the default font size in their browser settings to 20px, 1rem becomes 20px for them on every site that leaves the root alone. That variability is the point of the unit.

Multiply by the root font size: px = rem × root. At the default 16px root, 1.5rem × 16 = 24px, 0.875rem × 16 = 14px, and 2.25rem × 16 = 36px. When you check a build against a design file, remember that the result is the size for a visitor on default settings; someone who has chosen a larger default sees every rem value scaled up in proportion.

rem is always measured against the root (html) font size, so 1.5rem means the same thing anywhere on the page. em is measured against a local font size: for the font-size property it is the parent's font size, and for padding, margin, width, and other lengths it is the element's own computed font size. That makes em compound when nested. A list at 0.875em inside another list at 0.875em is 0.875 × 0.875 = 0.766 of the outer size, 12.25px from a 16px start. rem never compounds, which is why it is the usual choice for font sizes, while em stays useful for spacing that should scale with the text it surrounds, such as the padding of a button.

Because rem respects the visitor's default font size. Most desktop browsers let people raise that default, and many people with low vision do, and the setting changes the root, so anything sized in rem or em grows with it. A font size written in px ignores the setting entirely. Page zoom enlarges px and rem alike, so zoom is not the difference; the font-size preference is, and it is the setting people choose when they want larger text without everything else growing too.

62.5% of the 16px default is 10px, so it makes 1rem equal 10px and turns the arithmetic into a decimal shift: 24px is 2.4rem and 14px is 1.4rem. Because it is a percentage, it still respects a visitor's larger default (a 20px default becomes a 12.5px root). The trade-offs: text falls to 10px wherever you forget to set a size, so you need body { font-size: 1.6rem }; third-party components that assume a 16px root render at 62.5% of their intended size; Tailwind's spacing scale shrinks with it, so p-4 becomes 10px; and media queries ignore it entirely. Never set the root in px instead (html { font-size: 10px }), because that overrides the visitor's setting.

Usually not. A 1px border is a hairline meant to stay one. As 0.0625rem it grows with the root to fractional widths, such as 1.25px at a 20px root, and browsers typically snap border widths to whole device pixels, so lines can come out uneven from one element to the next. Thick decorative borders and outlines that should scale with the text are fine in rem or em. That is why the batch converter can keep 1px values as pixels while converting everything else.

It works, but it does not mean what it means elsewhere. Inside a media query, rem and em are both measured against the browser's initial font size, which is the visitor's default (16px unless they changed it), and never against the font size you set on html. So with html { font-size: 62.5% }, @media (min-width: 48rem) still switches at 768px on default settings, not at 480px. Breakpoints written in rem or em move to wider viewports when a visitor raises their default font size, so large text gets the roomier narrow layout instead of being squeezed into columns. This page leaves media queries alone by default, and when you choose to convert them it divides by 16, whatever root you have set.

Because most pixel sizes are not tidy fractions of the root. 15px is 0.9375rem and 13px is 0.8125rem at a 16px root, both exact; 10px at an 18px root is 0.5555 recurring. Four decimal places keep any 16px-root value within 0.0008px of the original, far below anything a screen can show, while two decimal places can be off by up to 0.08px. Trailing zeros are trimmed, so 1.5000 is written 1.5.

Mostly, as long as you review the result. The batch converter is a careful text transform rather than a full CSS parser: it skips comments, quoted strings, url() values, escaped class names, and media query conditions, and converts every other px value it finds. It cannot see where a value is used, so a breakpoint stored in a Sass variable or passed to a mixin is converted where it is written, and so is a background-position offset into a pixel-sized sprite. The change list shows every edit by line, so check those cases before you ship.