This scales smoothly from 16px at a 400px viewport to 32px at a 1280px viewport, and holds steady outside that range.
Built by Rankite, the SEO team behind Swordfish AI's +400% revenue and Zluri's +45% organic growth. See the case studies
clamp(MIN, PREFERRED, MAX) is a real CSS function defined in the W3C CSS Values and Units Module Level 4 specification. The browser evaluates the middle, preferred value on every render and uses it as long as it falls between MIN and MAX, but locks to MIN or MAX the moment the preferred value would go outside that range. For font size, this replaces the old approach of jumping between fixed sizes at media query breakpoints with one continuously scaling value.
The preferred value in the middle of clamp() is built from a straight line between two points: your minimum font size at your minimum viewport width, and your maximum font size at your maximum viewport width. The slope of that line becomes a vw-based value, and the line's intercept becomes a fixed rem offset, the same linear interpolation method popularized by fluid-type tools like Utopia and widely used in CSS-Tricks' fluid typography guides.
The same formula and the same clamp() function work for any CSS length property, including padding, margin, gap and width. Enter your minimum and maximum spacing values in place of font sizes above to generate a fluid spacing value using the identical interpolation math.
Rankite pairs technical polish like this with SEO content optimization and monthly SEO management.
Get a free, no-obligation SEO audit and a 30-minute strategy session. We'll show you exactly where the growth is hiding.
Fill out the form and we'll get back to you within one business day. Prefer email? Write to us directly at contact@rankite.com.