Published 2026-02-28 · 1 min read
CSS clamp() Complete Guide for Engineers
clamp(min, preferred, max) is the workhorse of modern fluid interfaces. Learn the mental model, linear preferred values, and testing workflow.
Mental model
clamp() always picks the middle value after min/max guardrails. That means you can let the preferred track respond to viewport while never breaking readability.
Use the clamp calculator to prototype ideas quickly.
Linear preferred values
Combine REM with vw to draw a line between two anchor viewports. The fluid typography generator outputs ready-made clamp strings with both REM and px variants.
Testing checklist
- Shrink to 320px width: no clipping, no overflow caused by huge vw coefficients.
- Zoom to 200%: still honor minimum sizes.
- Validate color pairs with the WCAG contrast checker when type scales down.
Continue with Fluid typography explained for worked examples.
Frequently asked questions
- Can preferred use calc()?
- Yes—`calc(0.5rem + 2vw)` is a common pattern. Keep units consistent and mind browser support (baseline in 2026 is excellent).