Security & devFree
Free CSS unit converter. Convert between px, rem, and em using a root font size.
Last updated 18 October 2026
This converts a length between px, rem and em. It turns your value into pixels first: a rem value is multiplied by the root font size, an em value by the context font size, and a pixel value is used as it is. It then divides back out to give all three, to four decimal places. It recalculates as you type and when you change the From menu.
Measured at the default root size of 16px: 1px is 0.0625rem, 10px is 0.6250rem, 13px is 0.8125rem, and 16px is exactly 1rem and 1em. A third of a rem, typed as 0.333333, comes back as 5.3333px. Very small values disappear in the rounding: 0.00001rem shows 0.0002px and 0.0000rem.
The CSS specification defines em as "Equal to the computed value of the font-size property of the element on which it is used." Its own example shows the catch: line-height: 1.2em is relative to the element's own font size, while font-size: 1.2em is "20% greater than the computed font size inherited by h1 elements", which is the parent's.
So the right number for the Context font size box depends on where the em will go:
Measured: 1.5em with a context of 20px is 30px, which is 1.875rem against a 16px root. Rem has no such ambiguity. The specification defines it as "Equal to the computed value of the em unit on the root element", the same everywhere on the page.
MDN states that if no font size has been set, "1em will equal the default browser font-size, which is usually 16px". Measured in Chromium on this page, the root font size is 16px. But it is only a default, and a reader can raise it in their browser settings.
That is the practical difference between the units. Enter a root size of 20 and 1rem becomes 20px, so text sized in rem grows with the reader's setting, while text sized in px does not. MDN puts it plainly: "Defining font sizes in px is not accessible, because the user cannot change the font size in some browsers." WCAG 2.2 success criterion 1.4.4 asks that text "can be resized without assistive technology up to 200 percent without loss of content or functionality".
A common shortcut sets the root to 62.5% so that 1rem is 10px and the arithmetic is easy. Enter a root of 10 to work in it: 1.6rem is 16px. Remember that 62.5% of a reader's 20px default is 12.5px, not 10, so the shortcut only gives round numbers for people who have never changed the setting.
This catches people out after they adopt the 62.5% shortcut. The Media Queries specification: "Relative length units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the em unit is relative to the initial value of font-size, defined by the user agent or the user".
So @media (min-width: 48rem) means 768px for a reader on the 16px default, whatever your stylesheet sets the root to. It does not become 480px because your root is 10px. To convert a breakpoint here, set the root to 16 rather than to the size your stylesheet uses.
CSS fixes the relationship between its absolute units: "1in = 2.54cm = 96px", a point is 1/72nd of an inch and a pica is 1/6th of an inch. So 1pt is 1.3333px, 12pt is 16px, and 1pc is 16px. This tool does not offer pt, pc, cm or in; those are the figures to use.
A CSS pixel is not a pixel on your screen either. The Media Queries specification notes that "the pixel unit represents CSS pixels and not physical pixels".
vw and vh, ch, ex and the absolute units are not converted.Every behaviour and every value on this page was measured against this tool as it is published, in a browser, on 18 October 2026.
As many as the root element's font size, which is 16px in a browser nobody has adjusted. A reader who raises their default to 20px gets 20px per rem. Enter a different root size above to see any other case.
Rem means the same size everywhere, so it is easier to reason about. Em follows the font size where it is used, which suits spacing that should grow with its own text, such as a button's padding. Both scale when a reader changes their default size, unless something above them is set in px; px does not.
Usually the context is wrong. For font-size, em refers to the parent's font size; for padding, margins and most other properties, it refers to the element's own. Find the right one in your browser's developer tools and enter it as the context.
No. The specification bases relative units in media queries on the initial font size, set by the browser or the reader, never on your stylesheet. With the 62.5% shortcut, 48rem in a media query is still 768px at the default.
Not directly. CSS defines 96px to the inch and 72pt to the inch, so 1pt is 1.3333px and 12pt is 16px. Convert the points to pixels with that figure, then enter the pixels here to get rem or em.
Setting the root font size to 62.5% so that 1rem is 10px on a 16px default. Enter 10 as the root to work in it. It stops giving round numbers for anyone who has changed their default size, and it has no effect on media queries.
Yes, and converts them in the same way, so -8px is -0.5rem at a 16px root. That is what you want for negative margins. The root and context sizes, though, must be greater than zero.
Four decimal places. That is enough for any real stylesheet, but very small values round away: 0.00001rem shows as 0.0000. The page calculates with full precision and only rounds what it displays.