Detailed explanation
The main difference is not em/rem versus clamp() as competing units: em and rem are relative length units, while clamp() is a CSS function that chooses a value within bounds. For font-size, em is relative to the parent element’s computed font size, whereas rem is relative to the root element’s computed font size. A heading set to 1.5rem stays the same size while the viewport changes, provided the root font size stays unchanged. It can still respond to changes in browser font preferences when the root sizing allows them.
With breakpoint-based typography, media queries switch between explicit sizes. In the example, the heading changes from 1.5rem to 2.5rem at 768px, creating a discrete jump rather than gradual growth. This approach is useful when the design deliberately changes at specific layout widths, but achieving many intermediate sizes requires additional rules. Nested em-based font sizes also need care: repeated multipliers compound through the element hierarchy. rem avoids that dependency on ancestor font sizes, making a shared type scale easier to manage.
Fluid typography uses a viewport-dependent preferred value inside clamp(minimum, preferred, maximum). Because 1vw equals 1% of the viewport width, clamp(1.5rem, 5vw, 2.5rem) grows continuously within its limits. Assuming a 16px root font size, the bounds are 24px and 40px. At a 600px viewport, 5vw equals 30px, so the heading renders at 30px; below 480px it remains 24px, and above 800px it remains 40px. The browser evaluates these expressions as the viewport changes, without JavaScript.
In practice, combine these tools rather than choosing one exclusively: use rem bounds and often a preferred expression such as calc(1rem + 2vw). The rem contribution makes the fluid region respond to root font-size changes, while vw supplies viewport-driven scaling. However, clamp() does not automatically guarantee accessible text resizing; viewport terms can counteract some zoom-driven enlargement, so test browser zoom and user font settings. Interviewers look for this distinction, correct calculations, and awareness that fluid font sizes reduce typography breakpoints but do not replace layout breakpoints.
Key points to remember
- em and rem are units; clamp() is a bounded-value function that can use both.
- For font-size, em references the parent’s computed font size; rem references the root’s.
- Constant rem sizes do not change with viewport width unless their value or root size changes.
- A vw-based preferred value scales continuously until clamp() reaches its minimum or maximum.
- Use relative bounds, consider a mixed rem/vw preferred value, and test zoom and font preferences.
Common mistakes candidates make
- Describing rem as an absolute pixel unit or claiming it always requires media queries to change.
- Assuming clamp(1.5rem, 5vw, 2.5rem) keeps growing at every viewport width, ignoring its bounds.
- Assuming rem bounds alone guarantee accessible zoom behaviour without testing.
Likely follow-up questions
Why use calc(1rem + 2vw) instead of only 5vw?
The rem term provides a root-font-relative contribution while the vw term provides viewport-dependent growth. This improves responsiveness to font preferences in the fluid region, but zoom and resizing still need testing.
How do you choose a preferred expression for specific viewport widths?
For target sizes s1 and s2 at widths w1 and w2, calculate the slope m = (s2 − s1) / (w2 − w1), using consistent units. The linear expression is calc(bpx + kvw), where b = s1 − m × w1 and k = 100 × m; convert the intercept and bounds to rem using your design’s assumed root size.
Do media queries become unnecessary with fluid typography?
No: clamp() handles continuous size changes, while media queries still handle structural changes such as navigation, columns, or spacing modes. You can also change a fluid type rule at a breakpoint when the design needs a different scale.
Interview tip: Start by distinguishing units from a function, calculate one viewport example, and finish with the accessibility trade-off.