Pixel to REM Converter

Convert pixels to rem using the formula:
REM = Pixel / Base Font Size

Pixel

Base Font Size (Default: 16px)

How to Convert Pixels to REM

What is REM?

REM (Root EM) is a relative unit of measurement in CSS that is based on the font size of the root <html> element. By default, most browsers set the root font size to 16px, but this value can be changed in CSS.

Conversion Formula

To convert Pixels (px) to REM, use the following formula:

REM = Pixels ÷ Base Font Size

Example Calculations:

16px ÷ 16 = 1rem
32px ÷ 16 = 2rem
48px ÷ 16 = 3rem

Custom Base Font Size

If the base font size is different (e.g., 20px instead of 16px), the formula adjusts accordingly:

40px ÷ 20 = 2rem
60px ÷ 20 = 3rem

Why Use REM Instead of Pixels?

Scalability – REM units make your design more responsive because they scale based on the root font size.
Accessibility – Users who adjust their browser’s font size for better readability will see proportional changes.
Consistency – Maintaining a consistent typography scale is easier when using REM instead of fixed pixels.

When to Use Pixels vs. REM?

Use REM for typography (font sizes, spacing, margins, padding) to keep it scalable.
Use Pixels for precise element sizing like borders and images when absolute dimensions are needed.

Video Tutorial: Pixel to Rem Converter

Pixel to REM Conversion Table

Pixel	REM
8 px	0.5 rem
16 px	1 rem
24 px	1.5 rem
32 px	2 rem
40 px	2.5 rem
48 px	3 rem
56 px	3.5 rem
64 px	4 rem
80 px	5 rem
96 px	6 rem
112 px	7 rem
128 px	8 rem

✅ To know more about CSS Units Check out the blog CSS Units Explained: px, em, rem, %, vh, vw, and More.