Implement fluid typography from 16px to 24px across 400px–1200px in one declaration?

WHAT THIS TESTS: This question probes your ability to build modern responsive design systems using intrinsic CSS rather than breakpoint-heavy media queries. The interviewer wants to see that you understand linear interpolation, viewport-relative units, and how clamp() can enforce bounds in a single declaration. It also reveals whether you know the math behind fluid grids and typographic scales or if you simply copy-paste snippets. Senior candidates are expected to connect this technique to design tokens and systematic spacing.

A GOOD ANSWER COVERS: First, the candidate should state the single declaration using clamp() with three arguments: a minimum of 16px, a preferred fluid value, and a maximum of 24px. Second, they should derive the preferred value using calc() with the formula 16px plus the product of the font range and the viewport progress, specifically calc(16px + (24 - 16) * ((100vw - 400px) / (1200 - 400))). Third, they should explain that the denominator 800 represents the viewport width range and that the numerator (100vw - 400px) normalizes the current viewport to a zero-to-one progress ratio. Fourth, they should mention accessibility considerations such as respecting user font preferences by using rem units for the bounds or ensuring the fluid value does not break zoom behavior. Finally, they should note that clamp() has been baseline available since July 2020, so browser support is no longer a practical concern.

COMMON WRONG ANSWERS: A frequent mistake is writing multiple media queries with stepped font sizes, which violates the single-declaration constraint and creates jarring jumps rather than smooth scaling. Another error is providing calc() without clamp(), which produces unbounded growth that can shrink below 16px on narrow screens or explode above 24px on ultra-wide monitors. Some candidates also forget to subtract the minimum viewport width in the numerator, yielding an incorrect y-intercept that makes the font size 16px at 0px viewport rather than at 400px. Others suggest JavaScript resize listeners, which signals a lack of familiarity with modern CSS capabilities.

LIKELY FOLLOW-UPS: The interviewer might ask how you would convert the pixel values to rem for accessibility, or how you would handle a non-linear typographic scale. They may also probe performance implications of viewport units in composite layers, or ask how to generate a full set of fluid type tokens for a design system using CSS custom properties. A sharp candidate might preemptively mention using a preprocessor mixin or a design-token generator to automate the slope calculation across many type scales.

ONE CONCRETE EXAMPLE: The exact declaration is font-size: clamp(16px, calc(16px + 8 * (100vw - 400px) / 800), 24px). At a viewport of 400px, the calc() resolves to 16px because the viewport offset is zero. At 1200px, the offset is 800px, the fraction evaluates to 1, and 16px plus 8px yields 24px. Between those widths the value scales linearly, and clamp() ensures it never escapes the bounds even if the user snaps the window to 200px or 3000px.

Source: developer.mozilla.org