Free Px to Rem Converter

Convert pixels to rem and rem to px instantly. Essential for responsive CSS.

px

Pixels to Rem

Result (rem)
1rem
font-size: 1rem; /* 16px */

Rem to Pixels

Result (px)
16px
font-size: 16px; /* 1rem */

Pixels to Em

Result (em)
1em
font-size: 1em; /* 16px */

Bulk Pixels to Rem

Results
Enter values to see results...

Conversion Table

Pixels Rem (base 16px) Em (base 16px)

What is Rem in CSS?

"rem" stands for "root em." It's a CSS unit that's relative to the font size of the root element (usually the HTML element). Unlike em units, which are relative to the parent element's font size, rem units are always relative to the root.

Px vs Rem vs Em

  • Pixels (px): Absolute units. 1px = 1/96th of an inch. They don't scale with user preferences or browser settings.
  • Em: Relative to the font size of the parent element. Can compound, making calculations tricky.
  • Rem: Relative to the font size of the root (html) element. More predictable and easier to manage than em.

How to Calculate Px to Rem

rem = pixels / base-font-size

Example: If base font size is 16px and you want to convert 24px:

  • 24px รท 16px = 1.5rem

When to Use Rem vs Px

Use Rem for:

  • Font sizes and typography
  • Spacing (margins, padding)
  • Layout widths and heights
  • Any value that should scale with user preferences

Use Px for:

  • Borders (often better at 1px)
  • Shadows
  • Small precise measurements
  • Elements that shouldn't scale

Why Use Rem for Responsive Design?

Using rem units allows your design to respect user preferences, including browser font size settings and accessibility needs. When a user changes their browser's default font size, rem-based designs will scale proportionally, while px-based designs won't.

Frequently Asked Questions

What is the default base font size?

Most browsers default to 16px. However, users can change this in their browser settings, which is why using rem units is recommended for accessibility.

Should I use rem or em for margins and padding?

Both work, but rem is generally preferred for consistency. Using rem for all sizing creates a more predictable, maintainable codebase.

How do I convert multiple px values quickly?

Use our bulk converter or reference the conversion table above. You can also calculate mentally: divide the px value by 16.

Does rem work in all browsers?

Yes, rem units have excellent browser support and work in all modern browsers, including IE9 and above.

Why should I use rem instead of px for font sizes?

Using rem units allows your design to scale with user preferences. If a user increases their browser's default font size for accessibility, rem-based fonts will scale proportionally, while px-based fonts remain fixed.