Question 1

What is CSS clamp()?

Accepted Answer

CSS clamp() takes three values: a minimum, a preferred (often in vw units), and a maximum. The browser picks the preferred value, but it cannot go below the minimum or above the maximum. This lets you create fluid typography that scales with the viewport without media queries.

Question 2

Why use vw units for the preferred value?

Accepted Answer

Viewport width (vw) units are relative to the screen size, so a value like 5vw means 5% of the viewport width. Combined with a min and max, this creates smooth scaling. The formula is often: clamp(min, preferred_vw + offset_rem, max) which uses a slope + intercept approach for precise control.

Question 3

How do I choose min and max values?

Accepted Answer

A common pattern is to set the min for mobile (around 320px wide) and the max for desktop (around 1280px wide). The preferred value smoothly interpolates between them. For body text, 16-18px is typical on mobile and 18-22px on desktop. For headings, scale up the range.

Question 4

Is clamp() supported in all browsers?

Accepted Answer

clamp() is supported in all modern browsers released after 2020 — Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+. For older browsers, use a fallback static value first, then clamp() as the second declaration: font-size: 16px; font-size: clamp(16px, 4vw, 24px);

📏

👁

📋

📊