PX ↔ REM Converter — CSS Unit Conversion

Your details

Value *

Direction

px → rem rem → px

Base size *

Decimal places

Results

rem 1.5000 rem 24 px · Base font size: 16 px

rem: 1.5000
px: 24.00
em: 1.5000
pt: 18.00
%: 150.0 %

CSS

:root {
    font-size: 100%; /* 16px */
}

.title {
    font-size: 1.5000rem;
}

SCSS function

@function rem($px, $base: 16) {
    @return math.div($px, $base) * 1rem;
}

Conversion table

px	rem	pt
1 px	0.0625 rem	0.75 pt
2 px	0.1250 rem	1.50 pt
4 px	0.2500 rem	3.00 pt
8 px	0.5000 rem	6.00 pt
10 px	0.6250 rem	7.50 pt
12 px	0.7500 rem	9.00 pt
14 px	0.8750 rem	10.50 pt
16 px	1.0000 rem	12.00 pt
18 px	1.1250 rem	13.50 pt
20 px	1.2500 rem	15.00 pt
24 px	1.5000 rem	18.00 pt
28 px	1.7500 rem	21.00 pt
32 px	2.0000 rem	24.00 pt
40 px	2.5000 rem	30.00 pt
48 px	3.0000 rem	36.00 pt
56 px	3.5000 rem	42.00 pt
64 px	4.0000 rem	48.00 pt
72 px	4.5000 rem	54.00 pt
80 px	5.0000 rem	60.00 pt
96 px	6.0000 rem	72.00 pt

Based on a :base px root font size

Rem accessibility note

About the PX to REM Converter

Convert pixel values to rem (and vice versa) based on the root font size. The default base is 16px (browser default). Change it if your project uses a different html font-size. A quick-reference table shows common px values and their rem equivalents.

How to use the PX to REM Converter

Enter a px or rem value.
Choose direction.
Adjust the base font size if not 16px.
Set decimal precision.
View the converted value and reference table.

Frequently asked questions

Why use rem instead of px?

rem scales with the user's font size preference. If someone sets their browser to 20px base, rem-based layouts adapt. px does not.

What is the default base size?

Browsers default to 16px for the root element unless overridden in CSS (html { font-size: 62.5% } sets it to 10px for easier maths).

When should I still use px?

Borders, box-shadows and fine-detail elements where you want a fixed size regardless of font settings.