PX to REM and REM to PX Converter Instant Online

This PX to REM instant online converter converts pixels to REM using a default 16 pixels font-size. The formula used here is 1px = 0.0625rem and 1rem = 16px. The REM to PX conversion also works here.

The PX to REM converter is very helpful when you want to convert any pixel-based designs to accessible, scalable REM-based layouts.

PX to REM Conversion

How to Use PX to REM Converter

This utility is helpful in CSS development in responsive designs.

Enter a value in either field:

• Type 16 in the PX field → REM field shows 1
• Type 2 in the REM field → PX field shows 32

Real-time conversion happens instantly as you type.

Formula Used:

• PX to REM: px ÷ 16 = rem
• REM to PX: rem × 16 = px

Difference Between PX and REM Units

PX (Pixels)

• It’s an absolute unit – a fixed size that does not change
• 1px = 1 pixel on the screen
• Used in static measurements like inches or centimeters

REM (Root EM)

• It’s a relative unit – size depends on root font-size
• 1rem = root element’s font-size (usually 16px)
• Used in scalable measurement that adapts

CSS Example Using PX and REM

/* Use PX for tiny details */
border: 1px solid #ddd;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);

/* Use REM for everything else */
font-size: 1.125rem;     /* 18px */
padding: 1rem 1.5rem;    /* 16px 24px */
margin-bottom: 2rem;     /* 32px */
max-width: 50rem;        /* 800px */

PX ↔ REM Quick Conversion Tables

Spacing Values:

Layout Breakpoints:

MOST COMMON Conversions:

PX to REM:

8px = 0.5rem | 16px = 1rem | 32px = 2rem
12px = 0.75rem | 20px = 1.25rem | 48px = 3rem
14px = 0.875rem | 24px = 1.5rem | 64px = 4rem

REM to PX:

0.25rem = 4px | 1rem = 16px | 3rem = 48px
0.5rem = 8px | 1.5rem = 24px | 4rem = 64px
0.75rem = 12px | 2rem = 32px | 5rem = 80px