px to rem Converter

Convert between px and rem with a configurable base font size and a full 1–100px conversion table.

Settings

Base Font Size16px

Pixels (px)

REM value

1rem

Base: 16px • 1rem = 16px

CSS Reference

/* Base font size: 16px */
html {
  font-size: 16px;
}

/* Usage examples */
.element {
  font-size: 1rem;   /* 16px */
  padding: 0.5rem;      /* 8px */
  margin: 1.5rem;      /* 24px */
}

Conversion Table (1px – 100px)

Base font size: 16px

px	rem	em
1px	0.0625rem	0.0625em
2px	0.125rem	0.125em
3px	0.1875rem	0.1875em
4px	0.25rem	0.25em
5px	0.3125rem	0.3125em
6px	0.375rem	0.375em
7px	0.4375rem	0.4375em
8px	0.5rem	0.5em
9px	0.5625rem	0.5625em
10px	0.625rem	0.625em
11px	0.6875rem	0.6875em
12px	0.75rem	0.75em
13px	0.8125rem	0.8125em
14px	0.875rem	0.875em
15px	0.9375rem	0.9375em
16px	1rem	1em
17px	1.0625rem	1.0625em
18px	1.125rem	1.125em
19px	1.1875rem	1.1875em
20px	1.25rem	1.25em
21px	1.3125rem	1.3125em
22px	1.375rem	1.375em
23px	1.4375rem	1.4375em
24px	1.5rem	1.5em
25px	1.5625rem	1.5625em
26px	1.625rem	1.625em
27px	1.6875rem	1.6875em
28px	1.75rem	1.75em
29px	1.8125rem	1.8125em
30px	1.875rem	1.875em
31px	1.9375rem	1.9375em
32px	2rem	2em
33px	2.0625rem	2.0625em
34px	2.125rem	2.125em
35px	2.1875rem	2.1875em
36px	2.25rem	2.25em
37px	2.3125rem	2.3125em
38px	2.375rem	2.375em
39px	2.4375rem	2.4375em
40px	2.5rem	2.5em
41px	2.5625rem	2.5625em
42px	2.625rem	2.625em
43px	2.6875rem	2.6875em
44px	2.75rem	2.75em
45px	2.8125rem	2.8125em
46px	2.875rem	2.875em
47px	2.9375rem	2.9375em
48px	3rem	3em
49px	3.0625rem	3.0625em
50px	3.125rem	3.125em
51px	3.1875rem	3.1875em
52px	3.25rem	3.25em
53px	3.3125rem	3.3125em
54px	3.375rem	3.375em
55px	3.4375rem	3.4375em
56px	3.5rem	3.5em
57px	3.5625rem	3.5625em
58px	3.625rem	3.625em
59px	3.6875rem	3.6875em
60px	3.75rem	3.75em
61px	3.8125rem	3.8125em
62px	3.875rem	3.875em
63px	3.9375rem	3.9375em
64px	4rem	4em
65px	4.0625rem	4.0625em
66px	4.125rem	4.125em
67px	4.1875rem	4.1875em
68px	4.25rem	4.25em
69px	4.3125rem	4.3125em
70px	4.375rem	4.375em
71px	4.4375rem	4.4375em
72px	4.5rem	4.5em
73px	4.5625rem	4.5625em
74px	4.625rem	4.625em
75px	4.6875rem	4.6875em
76px	4.75rem	4.75em
77px	4.8125rem	4.8125em
78px	4.875rem	4.875em
79px	4.9375rem	4.9375em
80px	5rem	5em
81px	5.0625rem	5.0625em
82px	5.125rem	5.125em
83px	5.1875rem	5.1875em
84px	5.25rem	5.25em
85px	5.3125rem	5.3125em
86px	5.375rem	5.375em
87px	5.4375rem	5.4375em
88px	5.5rem	5.5em
89px	5.5625rem	5.5625em
90px	5.625rem	5.625em
91px	5.6875rem	5.6875em
92px	5.75rem	5.75em
93px	5.8125rem	5.8125em
94px	5.875rem	5.875em
95px	5.9375rem	5.9375em
96px	6rem	6em
97px	6.0625rem	6.0625em
98px	6.125rem	6.125em
99px	6.1875rem	6.1875em
100px	6.25rem	6.25em

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the PX to REM Converter?

Convert pixel values to rem units based on your root font-size. See a bulk conversion table and copy individual values instantly.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the PX to REM Converter

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Set root font-size

The default browser root font-size is 16px. Most projects keep this. If your project sets html { font-size: 62.5% }, the effective root is 10px.

Enter pixel values

Type a pixel value to see its rem equivalent. Or use the bulk table to see common pixel values (8px to 64px) converted at a glance.

Copy the rem value

Click a value in the table to copy it to the clipboard.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

converted.css

/* Root font-size: 16px */
/* Formula: rem = px / root-font-size */

h1 { font-size: 2rem; }      /* 32px */
h2 { font-size: 1.5rem; }    /* 24px */
h3 { font-size: 1.25rem; }   /* 20px */
p  { font-size: 1rem; }      /* 16px */

.small { font-size: 0.875rem; } /* 14px */
.tiny  { font-size: 0.75rem; }  /* 12px */

.card  { padding: 1.5rem; }   /* 24px */
.hero  { padding: 3rem 4rem; } /* 48px 64px */

Common mistakes & fixes

Common mistakes & how to fix them

A few habits trip people up. Here is what to watch for — and the exact fix.

Using px for font-size instead of rem

Pixel font sizes override the user's browser font size setting. Users who set their browser to 20px for accessibility will still see 16px text if font-size is in px.

Fix: Use rem for font-size. The cascade from the browser root font-size allows user preferences to scale all text proportionally.

Pro tips

Pro tips for better results

★

Use rem for font-size and spacing, px for borders

rem ensures typography and spacing scale with user font preferences. px is appropriate for borders (1px border should stay 1px regardless of font zoom) and small fixed decorative elements.

FAQ

Frequently asked questions

Setting html { font-size: 62.5%; } makes 1rem = 10px, simplifying mental math (16px = 1.6rem). It respects the user's browser font-size setting because 62.5% is relative to the user's preference. A user with 20px preference gets 1rem = 12.5px.

rem is relative to the root font-size (predictable). em is relative to the current element's font-size (compounding in nested elements). Use rem for most font-size and spacing. Use em for values that should scale relative to the local font-size, like padding on buttons.