DevBolt
Processed in your browser. Your data never leaves your device.

rem to px Converter & Guide

Convert rem values to pixels instantly. Useful for debugging computed styles, matching design specs, or understanding what rem values resolve to. Set your base font size and convert single values or entire CSS files. All client-side — no data leaves your browser.

← Back to tools

CSS Unit Converter

Convert between px, rem, em, pt, vw, vh, and % with configurable base sizes.

Result

1rem

Batch Converter

Paste CSS and replace all unit values at once.

with

px ↔ rem Reference Table

Base font size: 16px

pxremempt
4px0.25rem0.25em3pt
8px0.5rem0.5em6pt
10px0.625rem0.625em7.5pt
12px0.75rem0.75em9pt
14px0.875rem0.875em10.5pt
16px1rem1em12pt
18px1.125rem1.125em13.5pt
20px1.25rem1.25em15pt
24px1.5rem1.5em18pt
28px1.75rem1.75em21pt
32px2rem2em24pt
36px2.25rem2.25em27pt
40px2.5rem2.5em30pt
48px3rem3em36pt
56px3.5rem3.5em42pt
64px4rem4em48pt
72px4.5rem4.5em54pt
80px5rem5em60pt
96px6rem6em72pt
128px8rem8em96pt

Press Enter to copy result

How to convert rem to px

The formula is: px = rem × root-font-size. With the default root font size of 16px, 1rem = 16px, 1.5rem = 24px, 0.875rem = 14px, and 2.5rem = 40px. You can check the computed root font size in DevTools by inspecting the <html> element and looking at the computed font-size property. If your project uses html { font-size: 62.5% }, multiply rem by 10 instead of 16.

When you need rem to px conversion

You need rem-to-px conversion when: (1) comparing CSS values against pixel-based design specs from Figma, Sketch, or Adobe XD; (2) debugging why an element appears a different size than expected; (3) calculating exact pixel dimensions for images, SVGs, or canvas elements that need precise sizing; (4) setting border-width, outline, or box-shadow where sub-pixel rendering matters. Browser DevTools shows computed values in px, so knowing the conversion helps you map between your CSS source (rem) and rendered output (px).

Common rem to px values

At 16px base: 0.25rem = 4px, 0.5rem = 8px, 0.75rem = 12px, 1rem = 16px, 1.25rem = 20px, 1.5rem = 24px, 2rem = 32px, 2.5rem = 40px, 3rem = 48px, 4rem = 64px. Tailwind CSS spacing scale maps to these values: space-1 (0.25rem/4px), space-2 (0.5rem/8px), space-4 (1rem/16px), space-8 (2rem/32px). The reference table below updates dynamically when you change the base font size.

Frequently Asked Questions

How many pixels is 1rem?

1rem equals 16 pixels by default (the browser's default root font size). If your CSS changes the root font size with html { font-size: ... }, 1rem equals that value instead. For example, html { font-size: 20px } makes 1rem = 20px.

How do I find the root font size in my browser?

Open DevTools (F12), select the <html> element in the Elements panel, and check the Computed tab for font-size. This shows the actual root font size in pixels, which is the base for all rem calculations. Most browsers default to 16px unless overridden by CSS or user settings.

Does rem to px conversion change with browser zoom?

Browser zoom scales both rem and px proportionally, so the ratio stays the same. If 1rem = 16px at 100% zoom, it's still 1rem = 16px at 200% zoom — both values double together. The rem-to-px conversion formula doesn't change with zoom level.

Related Convert Tools