CSS Units Demystified: Pixels, REMs, and EMs

📅 May 13, 2026 ⏱️ 4 min read ✍️ UnitConverters Editorial Team

If you have ever built a website, you have had to decide how to size your text, padding, and margins. For a long time, the absolute Pixel (px) was the undisputed king. However, as the web became mobile-first and accessibility became a priority, new relative units emerged: REM and EM. Let's break down what they are and when to use them.

The Problem with Pixels (px)

Pixels are an absolute measurement. If you set a paragraph's font size to 16px, it will be exactly 16px high on the screen, regardless of the user's settings. While this sounds great for maintaining a strict design, it is terrible for accessibility.

Many visually impaired users increase the default font size in their browser settings (e.g., from 16px to 24px). If your website uses hardcoded pixels, it ignores the user's preference, making your text difficult or impossible for them to read.

Enter the REM (Root EM)

The REM unit solves the pixel problem. REM stands for "Root EM", meaning it is relative to the root element of the HTML document (the `` tag). By default, most browsers set the root font size to 16px. Therefore, `1rem` equals `16px`.

If a user changes their browser settings to a base size of 24px, then `1rem` automatically becomes `24px`. Your entire website scales beautifully and proportionately without you having to write a single line of media query code. For this reason, REM should be your default unit for font sizing.

What about EM?

EM is also a relative unit, but instead of looking at the root `` tag, it looks at the font size of its direct parent element. This can be useful for components like buttons where you want the padding to scale exactly with the button's specific text size.

However, EM has a dangerous flaw: compounding. If you nest several `

` elements and assign them all a font size of `1.2em`, the text will grow exponentially larger with every nested level. This makes EM very difficult to manage for global layouts.

The Golden Rule

  • Use REM for global sizing, typography, and spacing (margins/padding) to ensure accessibility and predictable scaling.
  • Use EM only for localized, component-specific sizing that must scale strictly relative to its own text (like button padding or SVG icon sizing).
  • Use PX for borders (`border: 1px solid black`) or elements that must never scale.

Converting Figma mockups (which use pixels) to REMs can be tedious math. To make it easy, check out our free Pixel to REM Converter!