offlineutils
100% offline
CSS
Free · no signup
Updated

PX to REM Converter

A PX to REM Converter turns pixel values into rem units and back, based on a configurable root font size (16px by default), and shows a reference table of common values — all computed in your browser.

px
Browsers default to 16px (html { font-size: 16px }).
px
rem

Reference · at 16px root

pxremCopy
1px0.0625rem
2px0.125rem
4px0.25rem
8px0.5rem
10px0.625rem
12px0.75rem
14px0.875rem
16px1rem
18px1.125rem
20px1.25rem
24px1.5rem
28px1.75rem
32px2rem
40px2.5rem
48px3rem
64px4rem
80px5rem
96px6rem

About PX to REM Converter

rem units scale with the root font size, which lets layouts respect a user's browser font-size preference — better for accessibility than fixed pixels. This converter does the math both ways: type a pixel value to get rems, or a rem value to get pixels, at whatever root size you set. A reference table lists the rem equivalents of common pixel steps (1 to 96px) with copy buttons. Everything runs locally — nothing is uploaded.

What PX to REM Converter does

  • Two-way px and rem conversion
  • Configurable root font size (defaults to 16px)
  • Reference table of common px values with rem equivalents
  • Copy any rem value with one click
  • Accurate to four decimal places, trailing zeros trimmed
  • Runs entirely in your browser — nothing uploaded

When to reach for PX to REM Converter

  • Converting a Figma spec in pixels to rem for an accessible stylesheet
  • Working out the rem value for a 14px caption at a 16px root
  • Migrating a codebase from px to rem units
  • Setting media-query and spacing values in scalable rems

How to use PX to REM Converter

  1. 01

    Set the root size

    Confirm or change the root font size (16px by default).

  2. 02

    Enter a value

    Type a pixel value to get rems, or a rem value to get pixels.

  3. 03

    Copy the result

    Copy the converted value, or grab a common value from the reference table.

When to use PX to REM Converter vs alternatives

AlternativeUse PX to REM Converter when…Use the alternative when…
Doing the division by handyou want a table of common values and a non-16px root handled for you.it's a single value at a 16px root — 16px = 1rem is easy.
A CSS calc() at runtimeyou want a concrete rem number to commit to your stylesheet.you specifically want the value computed live in the browser.

Frequently asked questions

How do I convert px to rem?
Divide the pixel value by the root font size. At the default 16px root, 24px / 16 = 1.5rem. Change the root size in the tool if your html element uses a different font-size.
Why use rem instead of px?
rem units are relative to the root font size, so they scale when a user changes their browser's default font size — important for accessibility. Fixed px values ignore that preference.
What root font size should I use?
Most browsers default to 16px, and that's the right assumption unless you've set the html font-size to something else. The tool lets you set any root size.
Is rem better than em?
rem is always relative to the root, so it's predictable. em is relative to the nearest parent's font size, which compounds through nesting — useful sometimes, but easier to get wrong for global sizing.

Related tools

CSS Flexbox & Grid Playground

Visually compose Flexbox and Grid layouts and copy the CSS.

Border Radius Generator

Round each corner independently and copy the border-radius CSS.

CSS Gradient Generator

Design linear, radial & conic gradients and copy the CSS.