Explain advantages of rem and em over px in responsive design

WHAT THIS TESTS: The interviewer wants to know if you understand the CSS length data type and how relative versus absolute units behave in real design systems. Specifically they care about accessibility, maintainability, and the cascade. They are checking whether you know that relative lengths represent measurements in terms of some other distance, such as font metrics or viewport size, while absolute lengths like px are fixed. The core issue is how a system responds when users change their browser font size or when the design needs to scale across devices.

A GOOD ANSWER COVERS: First, explain that rem is relative to the root element font size, which means changing the html font size scales the entire typography and spacing system globally without touching individual components. Second, explain that em is relative to the parent element font size, which is powerful for creating self-contained components where padding and margins stay proportional to the local text size. Third, mention that px is an absolute unit that does not respond to user font preferences in many browsers, which can break accessibility for users who rely on larger default text. Fourth, note that style sheets using relative length units can more easily scale from one output environment to another, such as from mobile to desktop or from screen to print. Fifth, discuss practical implementation: set root font size in px or use a percentage, then build the system in rem for global spacing and font sizes, reserving em for component-level internal proportions.

COMMON WRONG ANSWERS: A major red flag is claiming that px is fine because modern browsers zoom the entire page, so relative units do not matter. This ignores users who change only the default font size without full page zoom. Another wrong answer is conflating rem and em without explaining the difference between root-relative and parent-relative behavior. Some candidates also argue that relative units are unpredictable, which reveals a lack of experience with design system architecture. Finally, stating that percentages are always preferable to rem or em shows confusion about when font-based metrics are more appropriate than container-based metrics.

LIKELY FOLLOW-UPS: The interviewer may ask how you would handle third-party components that use px. They might ask about the relationship between rem and the html font size when the user has set a custom browser default. They could also ask about container query units like cqi or viewport units like vw, and when those are preferable to font-relative units. Another common follow-up is how to manage em compounding in deeply nested lists or typography.

ONE CONCRETE EXAMPLE: Imagine a button component where the font size is set in rem and the padding is set in em. If the root font size is 16px, a 1rem font size equals 16px and 0.75em padding equals 12px. If a user changes their browser default to 20px, the button text grows to 20px and the padding grows to 15px automatically, keeping the visual proportions intact. If the padding had been set in px, the text would grow but the padding would remain 12px, making the button look cramped and breaking the design system consistency.

Source: developer.mozilla.org