utilyfe

PX to REM Converter

Turn pixel values into rem, one at a time, from a table of common sizes, or across a whole stylesheet.

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

Convert one value

1.5rem

24px ÷ 16px = 1.5rem

Common sizes at a 16px base

  • 8px0.5rem
  • 10px0.625rem
  • 12px0.75rem
  • 14px0.875rem
  • 16px1rem
  • 18px1.125rem
  • 20px1.25rem
  • 24px1.5rem
  • 28px1.75rem
  • 32px2rem
  • 36px2.25rem
  • 40px2.5rem
  • 48px3rem
  • 56px3.5rem
  • 64px4rem
  • 72px4.5rem
  • 80px5rem
  • 96px6rem

Convert a whole stylesheet

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

How to use the PX to REM Converter

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

What rem actually is

A rem is a multiple of the root font size: the font size on the html element. Browsers start that at 16px, so 1rem equals 16px until something changes it. That’s the whole idea: instead of fixing a length at a number of screen pixels, you express it as a multiple of one shared size, and everything written that way moves together when the root size does. A user who raises their default text size in their browser settings changes that root, and every length in rem follows.

The conversion

The maths is one division: rem = px ÷ root font size. With the default 16px root, 16px is 1rem, 24px is 1.5rem, 10px is 0.625rem and 1px is 0.0625rem. If your project sets a different root size, put it in the base font size box and every result, and the table of common sizes, recalculates. Numbers that don’t divide evenly are rounded to four decimals, which is more precision than a screen can show.

What to convert, and what to leave alone

Rem earns its keep where things should scale with text: font sizes, line heights, padding and margins around type, the width of a text column. It’s a poor fit for details that are meant to stay fixed. A one-pixel border converted to 0.0625rem can render blurry or vanish at some zoom levels, so it’s usually kept in px, and shadows and outlines follow the same logic. The stylesheet converter has a checkbox for exactly this: with it ticked, anything 1px or thinner is left as it was, and everything else is converted.

Media queries are different

A breakpoint written in rem doesn’t use the root font size you set. Inside a media query, rem always refers to the browser’s default size, whatever your stylesheet says. That makes a converted breakpoint behave differently from the rem values around it, so the stylesheet converter leaves media and container query conditions exactly as they are. If you want breakpoints that respond to the user’s text size, that’s a deliberate choice worth making by hand.

Converting a whole stylesheet

Paste CSS into the converter and each px length is rewritten in rem at your chosen base. It understands the difference between a length and something that only looks like one: comments, quoted strings, url() paths and names like --size-10px are left alone, and 0px becomes a plain 0. The line under the boxes tells you how many values it changed, so you can see at a glance whether it found what you expected before you copy the result.

Nothing leaves your browser

There is 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 px to rem?
Divide the pixel value by the root font size. At the browser default of 16px, 24px ÷ 16 = 1.5rem, and 10px ÷ 16 = 0.625rem. If your root font size is different, divide by that instead: set it in the base font size box and every result follows.
What is the base font size, and why is it 16?
rem means "root em": it's a multiple of the font size on the root element, the html tag. Browsers give that element a default of 16px unless the user has changed it in their settings, so 1rem is 16px in most cases. If your stylesheet sets its own font size on html, that's the number to use as the base.
Why use rem instead of px?
rem lengths scale with the root font size, and px lengths don't. When someone raises their browser's default text size, type and spacing written in rem grow with it, while anything written in px stays the same and can end up cramped or too small to read. Writing sizes in rem is the simplest way to respect that setting.
Should I convert every px value to rem?
No. Text sizes and the spacing around text are good candidates, because they should grow together. Hairline borders, shadows and other details that should stay fixed are usually better left in px, which is why the stylesheet converter can leave anything 1px or thinner alone. Media query conditions are best left in px too.
Why does the stylesheet converter leave media queries as px?
Inside a media query, rem doesn't follow the font size you set on html: it always means the browser's default size. So a breakpoint converted to rem behaves differently from the rem you use in the rest of your CSS, and the converter leaves those conditions alone.
What is the 62.5% trick?
Setting html { font-size: 62.5% } makes the root 10px at the default size, so 1rem is 10px and the maths is easy: 24px is 2.4rem. Because it's a percentage, it still scales with the user's setting. The catch is that everything that doesn't set its own size, including body text and third-party components that assume 1rem is 16px, gets smaller until you reset it.
What's the difference between rem and em?
rem is always relative to the root font size. em is relative to the font size of the element it's used on, or its parent, so nested elements multiply: 1.2em inside 1.2em is 1.44 times the original. That compounding is why rem is easier to reason about for layout and spacing.
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 px, like --size-10px. Zero becomes a bare 0. Results are rounded to four decimals, so 1px at a 12px base becomes 0.0833rem.
Is my CSS uploaded anywhere?
No. The conversion is arithmetic that runs in this browser tab. Nothing is uploaded, logged or stored.