PX to REM Converter & Chart

About this tool

This converter turns pixel values into rem units and back, using whatever root font size you give it. It starts at 16px because that is the common browser default, so 1rem usually equals 16px and 24px becomes 1.5rem. Below the converter is a printable px to rem chart covering 1px to 64px and a few larger heading sizes. Everything runs in your browser.

How to use the PX to REM converter

1. Set the root font size. Leave it at 16 unless your stylesheet sets a different size on the html element (for example 62.5%, which gives 10px with the usual default).
2. Type in either field. Enter pixels to get rem, or enter rem to get pixels. The other field updates as you type.
3. Check the em note if you need em instead. Set the font size the em will resolve against and the tool shows the em value.
4. Copy the CSS snippet, or scroll to the chart, which recalculates for your root size and can be printed.

The formula

The CSS Values and Units specification defines rem as equal to the computed value of em on the root element, which in practice means the font size of the html element. So the conversion is a single division:

rem = px ÷ root font size
px  = rem × root font size

MDN describes 16px as a common browser default that user preferences may change. It is not a fixed constant, which is why the base is editable here.

Worked example

With the default inputs, a root font size of 16 and 24 pixels, the tool computes 24 ÷ 16 = 1.5rem and writes this snippet:

html { font-size: 100%; } /* = 16px when the browser default is 16px */
.example { font-size: 1.5rem; } /* = 24px */

Change the root to 18 and the same 24px becomes 1.3333rem (24 ÷ 18, rounded to four decimals), and the snippet sets the root to 112.5%. With a root of 10, 24px is 2.4rem. The em note reads 1.5em because the em context also starts at 16px.

Why rem helps accessibility

Many people raise their browser's default font size to make text easier to read. MDN notes that absolute lengths such as px do not scale with that setting, and recommends relative units such as em or rem for font-size. When your type is sized in rem, a reader who sets their default to 20px gets text that is 25% larger everywhere, with the proportions intact.

This ties into WCAG Success Criterion 1.4.4 Resize Text (Level AA), which asks that text can be resized without assistive technology up to 200 percent without loss of content or functionality. Using rem does not satisfy that criterion on its own. Containers also have to grow with the text instead of clipping it, but rem makes the text side of it straightforward.

rem vs em

Both are font-relative, but they measure from different places. rem always refers to the root font size, so 1.5rem is the same size anywhere on the page. em refers to the element's own font size, and when it is used on font-size itself, to the inherited (parent) size. That makes em compound: a list item set to 1.2em inside another 1.2em item ends up 1.44 times the base. Use rem for a predictable type scale, and em when something should scale with its own component, such as padding on a button that should grow with the button's text.

The 62.5% trick and its tradeoffs

Some stylesheets set html { font-size: 62.5%; }. With a 16px default that makes the root 10px, so 1.4rem is 14px and the mental math becomes easy. Because it is a percentage, it still respects the reader's setting: with a 20px default, the root becomes 12.5px. The tradeoffs:

• You have to set a readable size back on body (such as 1.6rem), or any text without its own size renders at 10px.
• Third-party components and libraries that assume 1rem is about 16px will render smaller than intended.
• "1rem = 10px" only holds for readers on the 16px default, so it is a convenience for authors rather than a guarantee.
• Never set the root in pixels (html { font-size: 10px; }). That overrides the reader's preference, which removes the accessibility benefit of rem.

rem in media queries

Media query breakpoints written in rem or em do not use your html font size. The Media Queries Level 4 specification states that relative length units in media queries are based on the initial value. In practice, @media (min-width: 40rem) is measured against the browser's default font size even if your stylesheet sets the root to 62.5%. Convert breakpoints with the browser default, usually 16px, not your custom root.

Common mistakes

• Converting with 10 when the root is 62.5% but writing breakpoints with the same math. Breakpoints still use the browser default.
• Using em where rem was intended, then wondering why nested text keeps growing.
• Rounding too hard. 13px at a 16px base is 0.8125rem, and rounding it to 0.8rem gives 12.8px.
• Converting borders to rem without thinking. A 1px hairline is often meant to stay 1px.

Use cases

• Turning a design file's pixel type scale into rem values for a stylesheet or design tokens.
• Checking what a rem value in someone else's CSS works out to in pixels.
• Building a spacing scale (4, 8, 12, 16, 24, 32px) that scales with the reader's font setting.

After converting, you can tidy your stylesheet with the CSS Minifier, convert colors with the Color Converter, and check text legibility with the Contrast Checker.