REM to PX Converter

Convert between REM, PX, EM, Percent (%), and Points (pt) units with customizable base font size

From Value

To Value

Live Font Size Preview

Hello

Conversion Reference

1 unit equals how many pixels

pixels

rem

pixels

0.16

pixels

1.3333

pixels

CSS Style Properties

Pixels (px)

h1 {
  font-size: 16px;
}

Root Em (rem)

h1 {
  font-size: 16rem;
}

Em (em)

h1 {
  font-size: 16em;
}

Percentage (%)

h1 {
  font-size: 16%;
}

Points (pt)

h1 {
  font-size: 16pt;
}

About REM to PX Conversion

What is REM?

REM (Root Em) is a relative CSS unit that is based on the font size of the root element (typically 16px by default). It's useful for creating scalable, responsive designs that adapt to user preferences.

What is PX?

PX (Pixels) is an absolute unit that represents a fixed size on the screen. It doesn't scale with user preferences or parent elements, making it useful for precise measurements.

The Conversion Formula

1 REM = Base Font Size (default 16px)

If you change your base font size to 20px, then 1 REM = 20px.

Unit Conversion Table for REM to PX

EM	REM	Pixel	Percent	Point
0.5em	0.5rem	8px	50%	6.00pt
0.6em	0.6rem	9.6px	60%	7.20pt
0.7em	0.7rem	11.2px	70%	8.40pt
0.8em	0.8rem	12.8px	80%	9.60pt
0.9em	0.9rem	14.4px	90%	10.80pt
1.0em	1.0rem	16px	100%	12.00pt
1.1em	1.1rem	17.6px	110%	13.20pt
1.2em	1.2rem	19.2px	120%	14.40pt
1.3em	1.3rem	20.8px	130%	15.60pt
1.4em	1.4rem	22.4px	140%	16.80pt
1.5em	1.5rem	24px	150%	18.00pt
1.6em	1.6rem	25.6px	160%	19.20pt
1.7em	1.7rem	27.2px	170%	20.40pt
1.8em	1.8rem	28.8px	180%	21.60pt
1.9em	1.9rem	30.4px	190%	22.80pt
2.0em	2.0rem	32px	200%	24.00pt
2.1em	2.1rem	33.6px	210%	25.20pt
2.2em	2.2rem	35.2px	220%	26.40pt
2.3em	2.3rem	36.8px	230%	27.60pt
2.4em	2.4rem	38.4px	240%	28.80pt
2.5em	2.5rem	40px	250%	30.00pt
2.6em	2.6rem	41.6px	260%	31.20pt
2.7em	2.7rem	43.2px	270%	32.40pt
2.8em	2.8rem	44.8px	280%	33.60pt
2.9em	2.9rem	46.4px	290%	34.80pt
3.0em	3.0rem	48px	300%	36.00pt

How to Convert REM to PX Online

1
Enter your REM value

Type any REM value into the "From Value" input. The default is 16, which equals 256px at a 16px base font size (16rem × 16 = 256px).
2
Select source and target units

Choose REM as the source unit and PX as the target. This converter also supports EM, Percent (%), and Points (pt) so you can convert between any combination.
3
Set your base font size

Click "Show Settings" to enter your project's root font size. Most browsers default to 16px, but some projects use 10px (62.5% root font size trick). Enter the correct value for accurate conversions.
4
Read the result and copy

The converted pixel value appears instantly. Click Copy to grab it for your stylesheet. Use the swap button to reverse the conversion direction.

Common Use Cases for REM to PX Conversion

Debugging Layout Issues

When your browser dev tools show pixel values but your CSS uses REM, convert back and forth to understand exactly how much space your elements occupy on screen.

Implementing Design Specs

Designers typically work in pixels (Figma, Sketch, Adobe XD). Convert their pixel measurements to REM so your CSS stays scalable while matching the design precisely.

Building Design Systems

Convert a pixel-based spacing scale (4, 8, 12, 16, 24, 32px) to REM tokens for a consistent, accessible design system that scales with user preferences.

Tailwind CSS Configuration

Tailwind uses REM for spacing and font size utilities by default (1rem = 4 units). Use this converter to verify that your custom theme values match your design tokens in pixels.

Accessibility Testing

Verify that text set in REM scales correctly when users increase their browser font size from 16px to 20px or 24px. Convert expected REM values to confirm readable pixel sizes.

Migrating from PX to REM

Modernizing a legacy stylesheet? Paste your existing pixel values here to get the equivalent REM values, then update your CSS for a more accessible, scalable codebase.

Frequently Asked Questions

What is the formula to convert REM to PX?

The formula is: PX = REM × Base Font Size. With the default 16px base, 1.5rem = 24px (1.5 × 16). To go the other way: REM = PX ÷ Base Font Size, so 24px = 1.5rem.

How many PX is 1rem?

By default, 1rem = 16px in all major browsers. Common reference values: 0.5rem = 8px, 0.75rem = 12px, 0.875rem = 14px, 1.25rem = 20px, 1.5rem = 24px, 2rem = 32px, 3rem = 48px.

What is the difference between REM and EM?

REM is relative to the root HTML element's font size and stays consistent regardless of nesting. EM is relative to the parent element's font size and can compound when nested. Use REM for consistent global sizing and EM for component-relative sizing.

Why should I use REM instead of PX?

REM units respect user browser font size preferences, making your site more accessible. If a user increases their default font size for readability, REM-based layouts scale proportionally. PX stays fixed regardless of user settings, which can cause accessibility issues.

What is the 62.5% root font size trick?

Setting html { font-size: 62.5%; } makes 1rem = 10px, so REM values directly match a 10× pixel scale (e.g., 1.6rem = 16px). While convenient for mental math, it can break third-party components that assume a 16px base. Use the Settings panel to set your base to 10px if you use this technique.

Should I use REM for padding and margin too?

Yes. Using REM for spacing creates proportional layouts that scale with the root font size. However, for fine details like borders (1px) or box shadows, using PX is perfectly acceptable since these don't need to scale with typography.

How do I convert percent to REM?

Select "Percentage (%)" as your source and "Root Em (rem)" as your target in this converter. The calculation uses your parent size setting: REM = (Percent ÷ 100 × Parent Size) ÷ Base Font Size. This is useful when converting percent-based Figma values into scalable REM.