When should I use px, em, or rem for CSS values?

A practical starting point is: use rem for a consistent site-wide type and spacing scale, em for sizing tied to a component’s text, and px for values you intentionally want to keep fixed in CSS reference units. The key difference is what each unit follows:

1. px is a CSS reference length. It does not necessarily equal one physical screen pixel. [S1] [S2]
2. em is relative to font size. For font-size, it uses the parent’s computed font size; for other properties, it uses the element’s font size. [S1]
3. rem is relative to the root element’s font size, rather than each parent in turn. [S1] [S2]

So the choice is about what should happen when the type size changes: should the value stay fixed, follow the component, or follow the page’s root scale?

Assume the root font size is 16px for this example. That’s an assumption, not a universal rule: the root size is commonly, but not invariably, 16px. [S2]

html {
  font-size: 16px; /* example assumption */
}

.page-title {
  font-size: 2rem; /* 2 × root size: 32px in this example */
}

.card {
  font-size: 1.25rem; /* 20px in this example */
  padding: 1em;       /* follows the card's 20px font size */
}

.card__note {
  font-size: 0.8em;   /* follows the parent card's computed size */
}

With that assumed root size, the title is 32px and the card text is 20px. The card’s 1em padding follows its own 20px font size, so it is 20px in this example. The note is 0.8em of the parent’s 20px font size, or 16px. These are illustrative calculations; actual resolved values depend on the font context.

Nested em font sizes can compound: two nested 1.6em font sizes multiply rather than both referring to the root. [S1] That can make deeply nested text grow more than expected. Using rem for a shared text scale avoids that parent-by-parent compounding.

You don’t need one unit for every property. Use rem when you want spacing to stay aligned with the root-based scale, such as the gap between page sections. Use em when spacing should grow or shrink with the component’s own type—for example, padding around a button label, or a small gap within a text-sized badge. For properties other than font-size, em is based on the element’s font size. [S1]

A useful test is to ask: “If this component’s text gets larger, should this spacing get larger too?” If yes, em is a reasonable fit. If no, consider rem for a shared root-based value or px for an intentionally fixed CSS reference length. Relative sizing can adapt to a reader’s chosen font size, but that does not establish how every browser or page setup will behave in every situation. [S1]

Try this review rule set:

1. Text scale: choose rem for headings and body-size steps that should share the root scale.
2. Component relationship: choose em where padding or another length should track that element’s text size.
3. Fixed reference: choose px when a value should stay a particular CSS reference length, rather than scaling with font context.
4. Nested text: check chains of em font sizes; nested values can compound. Consider rem when you want a consistent root-based size instead. [S1]
5. Assumptions: check the root font size and the relevant parent or element font size before calculating a relative value. rem is rooted in the root element, while em depends on the applicable font context. [S1] [S2]

In the example above, the title uses rem for the page scale, card padding uses em to follow card text, and the note demonstrates why nested em deserves a deliberate check. Treat those as starting choices, not a universal design system: the right relationship depends on what should scale together.