The clamp() function chooses a preferred value while respecting minimum and maximum bounds. It does not know whether the words actually fit.
Make this comfortable
CSS clamp for type: grow headings within readable bounds
How the rule works
A review title should feel balanced on wide and narrow screens without shrinking below a readable size. Use rem at both ends so a larger root font size still influences the result; the middle term can respond to viewport width. Body copy should retain a comfortable line height and measure, not inherit the heading's fluid scale. The rule is a starting point. Test a long translated title, 200% zoom, and a narrow split-screen window. If a word does not wrap, fix the word behavior or container width rather than lowering the minimum font size until the problem disappears.
.review-title { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); line-height: 1.15; }
.review-body { font-size: 1rem; line-height: 1.55; max-inline-size: 68ch; }Cost and verification
The calculation has negligible runtime cost. Readability is the boundary: a bounded heading can still be too large in a narrow card or too small for a user who changed default text settings. Compare real content, not placeholder text, and do not assume a viewport formula substitutes for a container query when the same component appears in different widths.
Common Mistakes
- Do not use viewport units alone for essential text.
- Do not set a fixed block height around a fluid heading.
- Do not treat clamp values as proof the translated title fits.
Connected lessons
css
responsive
web