PX to REM Converter

This PX to REM converter turns pixel values from a design into rem units for your CSS, and back. Change the root font size if your site doesn't use the default 16px, and get em and pt as well.

Updated
Runs in your browser. Your data is not uploaded.

The html element's font size. Browsers default to 16px.

Only used for em.

Result
–

How to use the PX to REM Converter

  1. Type a Value and pick its unit: px, rem, em, or pt.
  2. Set the Root font size of your site (16px unless you changed it), and the parent size if you need em.
  3. Copy the result, or use the table of common sizes.

How it works

rem = px ÷ root font size
em  = px ÷ parent font size
pt  = px × 3/4   (1pt = 4/3 px)

With the default 16px root, 1rem is 16px, so 24px is 24 ÷ 16 = 1.5rem.

Examples

  • 24px = 1.5rem (root 16px).
  • 14px = 0.875rem.
  • 2rem = 32px.
  • 12pt = 16px = 1rem.

PX to REM table (16px root)

pxrempt
10px0.625rem7.5pt
12px0.75rem9pt
14px0.875rem10.5pt
16px1rem12pt
18px1.125rem13.5pt
20px1.25rem15pt
24px1.5rem18pt
28px1.75rem21pt
32px2rem24pt
36px2.25rem27pt
40px2.5rem30pt
48px3rem36pt
56px3.5rem42pt
64px4rem48pt

Why use rem

Many people raise the default font size in their browser to read more comfortably. Sizes in rem follow that setting, while sizes in px ignore it. Using rem for font sizes, and often for spacing too, keeps a layout readable for those users without extra work. em is useful for things that should scale with their own text, such as padding inside a button.

Limitations

  • Assumes CSS pixels; device pixel ratio doesn't matter here.
  • em depends on the parent element's font size, which you have to supply.

Frequently asked questions

How do I convert px to rem?

Divide by the root font size. With 16px, 20px ÷ 16 = 1.25rem.

What is the difference between rem and em?

rem is relative to the root (html) font size; em is relative to the font size of the element's parent, so em values compound when nested.

What is 1rem in pixels?

16px in every major browser unless the site or the user changes the root font size.

Often used together with the PX to REM Converter.

  • CSS MinifierDeveloper Tools

    Minifies CSS and shows the size saving, raw and gzipped.

  • format CSS codeDeveloper Tools

    Beautifies CSS with one declaration per line and consistent indentation.