A designer wants body text to grow smoothly from 16px on small screens to 24px on large screens without any abrupt jumps. Which CSS approach achieves this?
ASetting font-size: 16px and overriding it to 24px at a single breakpoint with a media query
BUsing font-size: clamp(1rem, 0.5rem + 1.5vw, 1.5rem) to scale fluidly between the two bounds
CSetting font-size: 20px as a compromise value that works at all screen sizes
DUsing em units instead of px, which automatically scale with viewport width
CSS clamp() enables fluid typography: the type scales continuously between a defined minimum and maximum as viewport width changes. clamp(min, preferred, max) keeps the value between the bounds, with the middle value (using vw units) handling the smooth scaling. Option A (single breakpoint) creates an abrupt snap at exactly one width. Option C sets a fixed compromise that is suboptimal at both extremes. Option D (em units) scale relative to parent font size, not viewport width — they don't produce fluid viewport-responsive scaling.
Question 2 Multiple Choice
A mobile layout has body text set at 14px. The resulting line length is only 25 characters per line. What is the most appropriate responsive typography fix?
AIncrease the font size to make lines longer — larger text means more characters fit
BSlightly increase font size and/or allow the text container to be wider to reach the 45–75 character guideline
CReduce leading (line-height) to compensate for the short lines
DThe 45–75 character guideline only applies to desktop; 25 characters is acceptable on mobile
Lines of 25 characters cause excessive line breaks, choppy reading rhythm, and over-hyphenation. The fix is to increase font size slightly (to reduce characters per line on a fixed width) and/or widen the text container — both bring line length toward the 45–75 character target. Option A is backward: larger text at a fixed container width means fewer characters per line, making the problem worse. Option C (tighter leading) does not affect characters per line. Option D is wrong — the 45–75 character guideline applies at all viewport sizes; what changes is how you achieve it.
Question 3 True / False
Fluid typography, implemented with CSS clamp() or calc() with vw units, allows type size to scale continuously across viewport widths without requiring multiple breakpoints.
TTrue
FFalse
Answer: True
This is the defining advantage of fluid typography over breakpoint-based scaling. Rather than jumping from 16px to 18px to 20px at specific viewport widths, fluid typography grows the font size as a smooth function of viewport width — typically using a linear interpolation clamped to a minimum and maximum. The result is type that is always appropriately sized, not just at the exact breakpoints that were specified.
Question 4 True / False
The ideal characters-per-line guideline (45–75 characters) changes on smaller screens because mobile reading habits are different from desktop reading habits.
TTrue
FFalse
Answer: False
The 45–75 character guideline does not change across devices — it reflects the cognitive constraints of reading itself (the eye span, the ease of finding the next line), which do not vary by screen size. What changes is the technique for achieving that line length: on desktop you constrain with max-width; on mobile the screen is already narrow, so you adjust font size and container padding. Assuming mobile readers tolerate shorter lines leads to over-compressed text that is harder to read, not more convenient.
Question 5 Short Answer
Why must type size, line length, and leading all be adjusted together when scaling typography across devices, rather than treating them as independent variables?
Think about your answer, then reveal below.
Model answer: These three properties are interdependent: type size affects how many characters fit on a line at a given container width; line length affects how much vertical space the eye must travel to find the next line; leading must match both size and line length to keep the eye tracking smoothly. If you only change font size, line length and leading relationships break. For example, increasing font size without adjusting leading produces text that feels cramped; increasing font size without adjusting container width reduces characters per line below the comfortable threshold.
Responsive typography is a system, not three separate settings. The readable experience emerges from the relationship between all three: size sets the characters-per-line ratio at a given width, leading governs vertical rhythm, and container width provides the frame. Changes to one propagate through the others. This is why the recommended workflow is to start at the smallest target screen and build the full type system outward — adjusting all three together as viewport width increases.