utilyfe

REM to PX Converter

Work out what a rem value really measures, one at a time, from a table, or across a whole stylesheet.

Runs entirely in your browser. Nothing you enter is uploaded or stored.

Convert one value

24px

1.5rem × 16px = 24px

Common sizes at a 16px base

  • 0.25rem4px
  • 0.5rem8px
  • 0.75rem12px
  • 1rem16px
  • 1.25rem20px
  • 1.5rem24px
  • 1.75rem28px
  • 2rem32px
  • 2.5rem40px
  • 3rem48px
  • 3.5rem56px
  • 4rem64px
  • 5rem80px
  • 6rem96px

Convert a whole stylesheet

Also try:PX to REM ConverterCSS Formatter and MinifierHex to RGB Converter

How to use the REM to PX Converter

  1. 1Type a rem value. The base font size is 16px by default. Change it if your root font size is different.
  2. 2Read the pixel value and the working underneath, and press Copy to use it.
  3. 3Check the table for the rem values you meet most often, at the same base.
  4. 4To convert a whole stylesheet, paste your CSS into the box below and every rem length becomes px.

What a rem is worth

A rem is a multiple of the root font size: the size set on the html element. Browsers start that at 16px, so 1rem is 16px until a stylesheet or the reader says otherwise, and the conversion is a single multiplication: px = rem × root font size. At the default, 0.5rem is 8px, 1.5rem is 24px and 2.5rem is 40px. Change the base font size here and the single result and the table both recalculate, which is what you want when a project sets its own root size.

The 62.5% case

The most common reason a rem value doesn’t measure what people expect is html { font-size: 62.5% }. That sets the root to 10px on a default browser, so 1rem becomes 10px and the arithmetic gets easy: 2.4rem is 24px. Projects adopt it precisely so the numbers are simple to read. If you’re converting values from a codebase that does this, type 10 into the base font size box or every answer will be too big by 60%.

rem and em are not the same

Both are relative, but to different things. A rem always refers to the root font size, wherever it’s used. An em refers to the font size of the element it’s written on, or its parent, so em values compound as elements nest: 1.2em inside another 1.2em ends up at 1.44 times the original size. That compounding is exactly why rem is the easier unit for spacing and layout, and why converting em to px depends on where in the document you are while converting rem to px does not.

Why convert back to px

Rem is the better unit to write, but pixels are often the easier unit to think in. Converting back is useful when you need to check a real measurement, whether a control clears a minimum touch size, whether spacing matches a design given in pixels, whether a max-width is as wide as you think. It also helps when a tool insists on pixels, as email templates, canvas drawing and some SVG attributes do. None of that is an argument for writing px in your stylesheet: a page built in rem respects a reader who has asked for larger text, and one built in px doesn’t.

Converting a whole stylesheet

Paste CSS into the converter and every rem length is rewritten in pixels at your chosen base, with a count of how many values changed. It knows the difference between a length and something that only looks like one, so comments, quoted strings, url() paths and custom property names such as --size-2rem are left alone, and 0rem becomes a plain 0. Media and container query conditions are left as they were, because a rem inside them means the browser’s default size rather than your root size, and changing them would move your breakpoints.

Nothing leaves your browser

There’s no server involved. The conversion is simple arithmetic that runs in the page as you type, so neither a single value nor a whole stylesheet is ever sent anywhere.

Questions

How do I convert rem to px?
Multiply the rem value by the root font size. At the browser default of 16px, 1.5rem × 16 = 24px, and 0.625rem × 16 = 10px. If your stylesheet sets its own font size on the html element, multiply by that number instead: put it in the base font size box and every result follows.
What is 1rem in px?
16px, unless something has changed the root font size. Browsers set the html element to 16px by default, so 1rem is 16px on a default setup. A user who raises their browser's default text size changes that number, which is the whole point of the unit: a rem value isn't a fixed number of pixels, it's a multiple of whatever the root size happens to be.
Why doesn't my rem value measure what this tool says?
Because something in your CSS has changed the root font size. The commonest cause is html { font-size: 62.5% }, which makes the root 10px, so 1rem is 10px rather than 16px. Check what font-size is set on the html element: that's the number to type into the base font size box.
Is rem always relative to html, even inside another element?
Yes. That's what distinguishes it from em, which is relative to the font size of the element it's used on. Nested em values multiply, so 1.2em inside 1.2em is 1.44 times the original, while 1.2rem means the same thing wherever it appears.
Why would I convert rem back to px?
Usually to check something concrete: whether a value clears a minimum tap target, matches a spacing scale, or lines up with a design handed over in pixels. It's also handy when you have to use a tool that only takes pixels, such as an email template, a canvas or an SVG, or when reading someone else's stylesheet and wanting to picture the sizes.
Should I write px in my CSS instead of rem?
Usually not, for text and the spacing around it. Anything written in px ignores the reader's browser font-size setting, so type stays small for someone who asked for it to be bigger. Converting rem to px is a good way to understand or check a value; it isn't usually an improvement to the stylesheet itself.
Why does the stylesheet converter leave media queries alone?
A rem inside a media query doesn't follow the font size set on html: it always refers to the browser's default. Converting those conditions would change which breakpoints match, so the converter leaves media and container query conditions exactly as they are.
What does the stylesheet converter skip?
Anything that isn't a real length: comments, quoted strings, url() values, media and container query conditions, and names that happen to end in rem, like --size-2rem. Zero becomes a bare 0, and results are rounded to four decimals.
Is my CSS uploaded anywhere?
No. The conversion is arithmetic that runs in this browser tab. Nothing is uploaded, logged or stored.