32px equals 2.0rem with a standard 16px base.

Why should I use REM instead of PX in CSS?

REM units scale proportionally when users adjust their browser font size settings, ensuring accessibility compliance under WCAG 2.1.

Pixel to REM Converter

Convert Pixels (px) to REM and REM to Pixels instantly. Customize your base font size and visualize typography inheritance in real-time.

📏 Dynamic Base Size⚡ Instant Updates🎨 Inheritance Playground

Calculation Workspace

Root Base Font Size16px

Standard browser root base is 16px. Drag or type to change.

Pixels (PX)

REM (rem)

rem

EM (em)

Quick Reference Conversion Tables

These tables calculate dynamically based on your root base font size of 16px. Click copy icons on any row to extract standard design system guidelines.

Pixel to REM Reference Map

Pixel (PX)	REM (rem)	EM (em)	Percentage (%)
6px	0.375rem	0.375em	37.5%
7px	0.4375rem	0.4375em	43.75%
8px	0.5rem	0.5em	50%
9px	0.5625rem	0.5625em	56.25%
10px	0.625rem	0.625em	62.5%
11px	0.6875rem	0.6875em	68.75%
12px	0.75rem	0.75em	75%
13px	0.8125rem	0.8125em	81.25%
14px	0.875rem	0.875em	87.5%
15px	0.9375rem	0.9375em	93.75%
16px	1rem	1em	100%
17px	1.0625rem	1.0625em	106.25%
18px	1.125rem	1.125em	112.5%
19px	1.1875rem	1.1875em	118.75%
20px	1.25rem	1.25em	125%
21px	1.3125rem	1.3125em	131.25%
22px	1.375rem	1.375em	137.5%
23px	1.4375rem	1.4375em	143.75%
24px	1.5rem	1.5em	150%
25px	1.5625rem	1.5625em	156.25%
26px	1.625rem	1.625em	162.5%
28px	1.75rem	1.75em	175%
30px	1.875rem	1.875em	187.5%
32px	2rem	2em	200%
36px	2.25rem	2.25em	225%
40px	2.5rem	2.5em	250%
48px	3rem	3em	300%
64px	4rem	4em	400%
96px	6rem	6em	600%
128px	8rem	8em	800%

REM to Pixel Reference Map

REM (rem)	Pixels (PX)	Action
0.1rem	1.6px
0.2rem	3.2px
0.25rem	4px
0.375rem	6px
0.5rem	8px
0.75rem	12px
0.875rem	14px
1rem	16px
1.25rem	20px
1.5rem	24px
1.75rem	28px
2rem	32px
2.5rem	40px
3rem	48px
4rem	64px
5rem	80px
6rem	96px
8rem	128px
10rem	160px
12rem	192px
16rem	256px
20rem	320px
24rem	384px
32rem	512px
40rem	640px
48rem	768px
64rem	1024px

Interactive CSS Inheritance Playground

Learn how REM and EM scale relative to different base elements. Modify settings below to watch font scaling visual elements react live!

Root Base Font Size16px

Affects the root <html> element and all REM units.

Parent Element Size1.5rem

Sized in REM. Sizing computed: 24px

Child Element Size1.2em

Sized in EM. Sizing relative to parent. Computed: 28.8px

ROOT Element

html { font-size: 16px; }

Root Text (16px)

PARENT Element

.parent { font-size: 1.5rem; }

Computed value: 24px (16 × 1.5)

Parent Typography (24px)

CHILD Element (Nested)

.child { font-size: 1.2em; }

Computed value: 28.8px (24 × 1.2)

Nested Child (28.8px)

CSS Typography & Units Educational Guide

1 Pixel vs. Device Pixel vs. CSS Pixel

In web design, it's vital to distinguish between physical and logical units:

Physical / Device Pixel: The actual hardware light emitter dots on the physical screen. For high-density Retina or AMOLED screens, one logical unit consists of 4 or 9 physical device pixels.
Logical / CSS Pixel (px): An abstract reference unit defined by the W3C. 1 CSS pixel always represents 1/96th of an inch. Web design rules compile exclusively using CSS pixels, guaranteeing consistent layout layouts across resolutions.

2 What are REM and EM?

Both are relative CSS sizing units, but they derive their rendering anchors differently:

REM (Root Element em): Scales relative to the font-size of the <html> element. If the root size is 16px, 2rem is exactly 32px. Very predictable and safe for responsive grids.
EM (Element em): Scales relative to the font-size of its direct parent container. If a parent has a font-size of 20px, 1.5em inside that container equals 30px. Ideal for labels or paddings.

3 Best Practices: Pixel vs. REM vs. EM

Pixel (PX) — Absolute Sizing

Use for absolute dimensions that should never scale, such as border widths, thin box-shadows, image boundaries, and fixed-width dividers.

REM — Root-Relative Sizing

Use for body typography, paragraph text, headings, layout columns, outer spacing margins, and main paddings. This guarantees the entire site responds gracefully to user browser preferences.

EM — Local-Relative Sizing

Use inside isolated modular widgets (like menus, sliders, modals) for sizing icons, button paddings, or labels. When the component's base font size scales, the entire component scales proportionally.

4 Mathematical Conversion Formulas

Pixels to REMREM = PX ÷ Base Font SizeExample: 24px ÷ 16px = 1.5rem

REM to PixelsPX = REM × Base Font SizeExample: 2rem × 16px = 32px

EM to PixelsPX = EM × Parent Font SizeExample: 1.2em × 24px = 28.8px

5 Real-World CSS Nesting & Compound Sizing

Below is a practical code example illustrating nested typography. Note how REM remains independent of nesting, whereas EM compounds exponentially relative to parent elements:

CSS Rules

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

.card {
  font-size: 1.25rem; /* 1.25 × 16px = 20px */
  padding: 1.5rem; /* 24px padding (rem is stable) */
}

.card-title {
  font-size: 1.5em; /* 1.5 × 20px = 30px (scales with parent) */
  margin-bottom: 0.5em; /* 0.5 × 30px = 15px (relative margins) */
}

.card-desc {
  font-size: 0.875rem; /* 0.875 × 16px = 14px */
}

Visual Demonstration (Base 16px)

Example Heading (.card-title)

This paragraph represents card body text (styled in rem). If you scale the parent font size, this remains aligned, while EM headings adjust relatively.

Pixel to REM Converter

Calculation Workspace