Inspect the working example
The heading uses a preferred 4vw size between 20px and 36px. These are original demonstration values; measured size alone is not a readability or accessibility certification.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Narrow | 4% of320=12.8 | Clamped to20px minimum |
| Middle | 4% of600=24 | Preferred 24px lies inside the range |
| Wide | 4% of960=38.4 | Clamped to36px maximum |
Follow the browser mechanism
clamp chooses the preferred expression within the supplied bounds. The formula here uses pixels and viewport units, so changing the root rem size is not itself a complete font-enlargement test for this heading. The proof separately enlarges rendered text and checks reflow.
A fluid formula alone has no endpoint limits
The alternative removes clamp and uses 4vw directly.
<style>body{margin:8px}</style>
<style>h2{font-size:4vw}</style><h2>Workshop notes</h2>It computes to12.8px at320 and 38.4px at 960, outside the chosen 20–36px demonstration bounds.
Try the repair
At a750px viewport, which size does the working expression choose?
Show the worked answer
30px: 4vw is30px and lies between 20 and 36.
- Read computed font-size; do not estimate from screenshots.
- Test enlarged rendered text as well as the original formula.