How to Convert Pixels to REM

Convert pixel values to REM units instantly. Free PX to REM calculator with customizable base font size, bulk conversion table, and CSS output for responsive design.

Open PX ↔ REM Converter →

Step-by-Step Guide

1

Enter your pixel value

Type the pixel value you want to convert — for example 16, 24, or 48. You can also enter a REM value to convert back to pixels. The tool supports decimal values for precise conversions.

2

Set the base font size

The default base is 16px (the browser default for html font-size). If your project uses a different base, adjust it accordingly. For example, with a 10px base (62.5% trick), 1rem = 10px instead of 16px.

3

Get the REM result

See the converted value instantly. For 16px base: 24px = 1.5rem, 32px = 2rem, 48px = 3rem. The tool also generates the CSS declaration you can copy directly into your stylesheet.

4

Use the conversion table

Browse the quick reference table showing common pixel values and their REM equivalents. This is useful when establishing spacing scales, typography sizes, or converting an entire design system from pixels to REMs.

Try It Now — Free

No signup, no download. Runs entirely in your browser.

Open PX ↔ REM Converter

Frequently Asked Questions

Why should I use REM instead of pixels?
REM units scale with the user browser font size preference, making your design more accessible. If a user sets their browser to 20px base font, REM-based layouts scale proportionally while pixel-based layouts stay fixed and may become hard to read.
What is the difference between REM and EM?
REM is relative to the root element (html) font size, making it predictable and consistent. EM is relative to the parent element font size, which can compound — a 2em inside a 2em parent becomes 4x the root size. REM is generally preferred for its predictability.
Should I convert all values to REM?
Use REM for typography, spacing, and layout dimensions. Keep pixels for borders (1px), box-shadows, and fine details where you want exact pixel control regardless of font size. Media queries can use either but EM-based breakpoints handle zoom better.
Related Reference

Tailwind CSS Cheat Sheet

View Cheat Sheet →

More Guides