Explain em, rem, px and why rem is preferred for font sizing

WHAT THIS TESTS: Whether you understand the reference context of CSS length units and can justify rem for accessibility and maintainability inside a design system. Interviewers want to see that you know when compounding is dangerous and why user-agent font preferences matter for inclusive design.

A GOOD ANSWER COVERS: First, define px as an absolute length unit tied to device pixels, which does not scale with user font preferences and creates brittle layouts when users override defaults. Second, explain that em is relative to the font-size of its direct parent element, so nested components multiply values and produce unpredictable results that are difficult to debug across a large codebase. Third, state that rem is relative to the root element font-size, giving consistent scaling across the entire document regardless of nesting depth. Fourth, connect rem to accessibility by noting that when a user changes the browser default font size in settings, rem-based text scales accordingly, whereas px does not respond to that preference. Fifth, mention that rem creates a single scaling variable at the root, which makes design tokens, responsive typography, and global theming easier to maintain and reason about.

COMMON WRONG ANSWERS: Claiming that px is acceptable because browser zoom works on everything today, which ignores non-zoom font-size preferences in accessibility settings and can break layouts at high zoom. Saying em and rem are identical, which misses the compounding problem entirely. Arguing that rem is only for fonts and cannot be used for spacing, when rem is valid for any length property including margins and padding. Failing to mention the root font-size as the rem reference point, or suggesting that percentages replace rem without explaining the relationship to root.

LIKELY FOLLOW-UPS: How would you handle a component library where consumers might change the root font-size? When is em actually the right choice, such as for padding on a button that should scale with its own text size? How do viewport units like vw fit into a typography scale alongside rem? What happens if a user sets root font-size to 62.5 percent and how does that affect rem math?

ONE CONCRETE EXAMPLE: Imagine a card component with a heading and nested paragraphs. If the card font-size is set to 0.875 em and a paragraph inside it also uses 0.875 em, the paragraph becomes 0.765625 em relative to the root, which is hard to trace and debug across teams. If both use rem, the heading might be 1.25 rem and the paragraph 1 rem, staying predictable regardless of nesting depth. When a user sets their browser default to 20 pixels instead of 16, a rem-based system scales every text element proportionally without redesigning each component or creating microscopic text in deeply nested trees.

Source: developer.mozilla.org