CraftTools

PX to REM Converter

Guide: px vs rem vs em: Which CSS Unit Should You Use?

rem
1.5rem
em
1.5em
pt
18pt
%
150%

Common sizes (base 16px)

pxrem / empt
8px0.5rem6pt
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
72px4.5rem54pt
96px6rem72pt

Nothing you enter or choose here leaves your device. This tool runs in your browser.

How to use

  1. 1Type the value you want to convert.
  2. 2Choose the unit you are converting from.
  3. 3Set the base font size if yours isn't 16px.
  4. 4Read the other units and click Copy.

Frequently asked questions

How do I convert px to rem?

Divide the pixels by the root font size. With the browser default of 16px, 24px is 24 / 16 = 1.5rem.

What is the difference between rem and em?

rem is relative to the root element's font size, and em is relative to the font size of the current element's parent. With the same base they give the same number here.

Why use rem instead of px?

rem sizes scale when people change their browser's default font size, which helps accessibility.

How are pt and % calculated?

1pt is 1/72 of an inch, which is 1.333px at 96 dpi. A percentage is taken of the base font size, so 150% of 16px is 24px.

Read the guide

Learn how this works and how to get the most from it.

Web & SEO

px vs rem vs em: Which CSS Unit Should You Use?

The difference between px, rem and em in CSS, how to convert between them, and when each one is the right choice.

1 min read

Related tools

CSS Gradient & Box Shadow Generator

Design gradients and box shadows visually and copy the CSS.

CSS Minifier & Beautifier

Compress CSS to save bytes, or format it so it is easy to read.

Unit Converter

Convert length, weight, temperature, volume, speed and more.

Color Converter & Contrast Checker

Convert HEX, RGB and HSL and check WCAG contrast ratios.