PX to REM Converter

Convert pixel values to rem units instantly. Adjust the base font size to match your project.

Root font-size

px Absolute pixels

rem Root em units

rem = px ÷ 16

PX to REM Conversion Table

Complete reference: pixels 1–100 converted to rem.

px	rem

How to Convert PX to REM

The formula for converting pixels to rem is straightforward:

rem = px ÷ base-font-size

By default, browsers set the root font size to 16px. So to convert 24px to rem, you divide 24 by 16, which gives you 1.5rem. If your project uses a different base font size — say 18px or 10px — simply change the root font-size setting in the converter above and all values will recalculate automatically.

For example, at a 16px base: 8px = 0.5rem, 16px = 1rem, 32px = 2rem, and 48px = 3rem. These are the most commonly used values in web design, and memorizing them will speed up your workflow.

When to Use REM Units

REM is the recommended unit for most sizing in modern CSS. Here's why:

Accessibility: When users change their browser's default font size (common for visually impaired users), rem-based layouts scale proportionally. Pixel values ignore this preference entirely.
Consistent scaling: Unlike em units, rem always references the root font size, so there's no compounding effect from nested elements.
Design systems: Using rem for spacing, font sizes, and component dimensions creates a mathematical relationship across your entire UI. Changing the root font size scales everything uniformly.
Responsive design: Combine rem with media queries to adjust the root font size at different breakpoints, and your entire layout adapts without touching individual component styles.

Use rem for font sizes, margins, padding, and max-widths. Reserve pixels for borders, box shadows, and situations where you need exact pixel precision regardless of user settings.

Practical CSS Examples

Here's a typical approach to rem-based typography in a stylesheet:

html { font-size: 16px; } /* 1rem = 16px */

body { font-size: 1rem; }       /* 16px */
h1   { font-size: 2.5rem; }     /* 40px */
h2   { font-size: 2rem; }       /* 32px */
h3   { font-size: 1.5rem; }     /* 24px */
small { font-size: 0.875rem; }  /* 14px */

.container {
  max-width: 60rem;              /* 960px */
  padding: 1.5rem;               /* 24px */
}

Some developers use the "62.5% trick" where you set html { font-size: 62.5%; } to make 1rem = 10px, simplifying mental math. However, this requires setting the body font-size back to 1.6rem for readable text, and can confuse third-party components.

Frequently Asked Questions

What is 1rem in pixels?

By default, 1rem equals 16px in all modern browsers. This is because the default root font-size is 16px. If you change the root font-size in your CSS, 1rem will equal that new value instead.

Should I use px or rem for font-size?

Use rem for font sizes. This ensures your text scales properly when users adjust their browser's default font size for accessibility reasons. Pixel-based font sizes ignore user preferences.

How do I convert rem to px?

Multiply the rem value by the base font size. For example, 2rem × 16px = 32px. You can also use our REM to PX converter for instant results.

Does changing the root font-size affect rem values?

Yes. REM stands for "root em" and is always relative to the html element's font-size. If you set html { font-size: 20px }, then 1rem = 20px throughout your entire stylesheet.