PX vs REM in CSS: When to Use Each and How to Convert

Designs arrive in pixels, but many style guides recommend writing CSS in rem. The reason is accessibility: rem sizes respect the reader's browser settings, and pixel sizes do not.

What a rem is

One rem equals the font size of the page's root html element. Browsers set that to 16 pixels by default. If someone increases the default font size in their browser to make text easier to read, every size written in rem grows with it.

Converting

To turn pixels into rem, divide by the root font size. To turn rem into pixels, multiply.

The 62.5% trick

Some projects set html { font-size: 62.5% }, which makes 1rem equal 10 pixels, so 24px becomes an easy 2.4rem. It works, but it means you have to set a readable font size on the body again, and third-party components that assume 16px can come out too small. Many teams now keep the default and use a converter instead.

When to use which

• Font sizes: rem, so text respects the reader's settings.
• Spacing and layout widths: rem is a good default, so layouts scale sensibly with text.
• Borders and fine details: pixels are fine, since a 1px line should stay 1px.
• Media queries: em or rem, so breakpoints move when text size changes.

Rem vs em

Em is relative to the font size of the element's parent, not the root. That is useful for things that should scale with their own text, like padding inside a button, but it compounds when elements are nested, which can make sizes hard to predict. Rem always means the same thing anywhere on the page.

Tip: Test your site with the browser's default font size set to large. Anything written in pixels that should have grown will stand out immediately.