CSS Tool

Pixel ↔ REM Converter

Convert pixels to REM and REM to pixels for responsive CSS. Set any base font size and instantly see conversions. Includes a reference table of common px-to-rem values.

px to remrem to pxpixel to rem convertercss unit converterpx rem calculatorconvert px rem cssrem converter freeresponsive css units

🛠️ Pixel ↔ REM Converter

⇄
px (default: 16px)
Enter a value above to convert.

How to Use the Pixel ↔ REM Converter

  1. Enter a pixel value in the left field to convert it to REM, or enter a REM value in the right field to convert it to pixels.

  2. Set the base font size (usually 16px, which is the browser default). If your root font size is different, update this field.

  3. The conversion appears instantly in the output box. A quick reference table for common sizes is also shown.

What is the REM Unit in CSS?

REM (Root EM) is a CSS unit that is relative to the font size of the root element (html). By default, most browsers set the root font size to 16px, which means 1rem = 16px. Using REM units instead of pixels makes your design responsive to user font size preferences and simplifies scaling the entire interface by changing a single value.

Why Use REM Instead of Pixels?

The Conversion Formula

To convert px to rem: rem = px ÷ base font size
To convert rem to px: px = rem × base font size
Example: 24px ÷ 16 = 1.5rem

❓ Frequently Asked Questions — Px to REM Converter

What is the difference between px and rem in CSS?

px (pixels) is absolute — 16px always means exactly 16 pixels regardless of any settings.

rem (Root EM) is relative to the <html> root font size. Browser default: 1rem = 16px. Critical advantage: when users increase browser font size for accessibility, rem-based layouts scale correctly — px layouts stay fixed.

How do I convert px to rem in CSS?

Formula: rem = px ÷ base font size. At the default 16px base:

  • 8px = 0.5rem  ·  12px = 0.75rem  ·  14px = 0.875rem
  • 16px = 1rem  ·  24px = 1.5rem  ·  32px = 2rem
  • 48px = 3rem  ·  64px = 4rem  ·  96px = 6rem

Use the free CSS unit px to rem calculator above — enter any value for instant results + reference table.

Why should I use rem instead of px?

4 key reasons to use rem over px:

  • Accessibility — scales when users change browser font size
  • Scalability — change one root value, entire layout scales
  • Consistency — unified design scale across all elements
  • Responsive — works seamlessly with media queries and clamp()

What is the CSS base font size?

Browser default is 16px. Common CSS approaches:

  • html { font-size: 16px; } — explicit default
  • html { font-size: 62.5%; } — makes 1rem = 10px (easy math)
  • html { font-size: 100%; } — respects user settings ✅ recommended

Update the base field in our converter — all conversions recalculate instantly.

How do I use px to rem in Tailwind CSS?

Tailwind uses rem with 16px base. Common Tailwind values:

  • p-1 = 0.25rem = 4px  ·  p-4 = 1rem = 16px  ·  p-8 = 2rem = 32px
  • text-sm = 0.875rem = 14px  ·  text-base = 1rem = 16px
  • text-xl = 1.25rem = 20px  ·  text-2xl = 1.5rem = 24px

For custom values: use our Tailwind px to rem calculator → apply as text-[1.375rem].

What is the difference between rem and em?

em — relative to the current element's font size. Can compound in nested elements (1.5em × 1.5em child = 2.25em — unpredictable!).

rem — always relative to the root html font size. Consistent and predictable everywhere.

Use rem for global sizing. Use em only for component-relative spacing.

How do I convert 16px, 24px, and 32px to rem?

At the standard 16px base font size:

  • 16px = 1rem  ·  24px = 1.5rem  ·  32px = 2rem
  • 10px = 0.625rem  ·  14px = 0.875rem  ·  20px = 1.25rem
  • 36px = 2.25rem  ·  48px = 3rem  ·  64px = 4rem

Enter any value into our free pixel to rem converter above for instant result + reference table.