PX to REM Conversion: Why You Should Stop Using Pixels in CSS

Why Developers Are Moving Away from Pixels

For years, pixels were the go-to unit for everything in CSS. Font sizes, margins, paddings, widths, heights, all specified in px. It worked because screens were mostly the same size and users rarely changed their browser settings.

That world does not exist anymore. Today, websites need to work on 4-inch phones, 13-inch laptops, 27-inch monitors, and 65-inch TVs. More importantly, millions of users with visual impairments rely on browser font size settings to make text readable. When you hardcode font sizes in pixels, those settings are ignored, and your website becomes inaccessible.

How PX to REM Conversion Works

The conversion formula is straightforward: divide the pixel value by the root font size (which is 16px by default in all browsers).

rem = px / 16

/* Examples */
12px = 0.75rem
14px = 0.875rem
16px = 1rem
18px = 1.125rem
20px = 1.25rem
24px = 1.5rem
32px = 2rem
48px = 3rem
64px = 4rem

Common PX to REM Conversions

The Accessibility Argument

Open your browser settings right now. In Chrome, go to Settings then Appearance then Font Size. You can change it from the default Medium (16px) to Large (20px) or Very Large (24px).

Visit a website that uses pixels for font sizes. The text stays the same size no matter what you set. The user's preference is completely ignored. This affects roughly 10 to 15 percent of web users who have adjusted their browser font size.

On a website that uses rem units, changing the browser font size from 16px to 20px causes all rem-based values to scale up by 25%. Text becomes larger, spacing increases proportionally, and the layout remains readable.

How to Migrate from PX to REM

• Start with font sizes. Convert all font-size declarations from px to rem first.
• Convert spacing next. Margins, paddings, and gaps should be in rem.
• Leave borders and shadows in px. A 1px border should stay 1px.
• Convert width/height constraints to rem where appropriate.
• Test with different browser font sizes to verify everything scales correctly.

/* Before: All pixels */
.card {
  font-size: 16px;
  padding: 24px;
  margin-bottom: 32px;
  border: 1px solid #eee;
  border-radius: 12px;
}

/* After: REM where appropriate */
.card {
  font-size: 1rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid #eee;
  border-radius: 0.75rem;
}

Use Our Free Converter

Doing the division manually for every value gets tedious. Our PX to REM converter handles it instantly. Enter any pixel value, set your base font size, and get the rem equivalent.