The latest articles on DEV Community by Michael Kelly (@madsigntist). https://dev.to/madsigntist https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3970146%2F17245399-225e-48da-b6f6-7469c58701f9.png https://dev.to/madsigntist en Michael Kelly Fri, 05 Jun 2026 16:10:15 +0000 https://dev.to/madsigntist/how-css-clamp-works-and-a-free-generator-that-does-the-math-for-you-2pc0 https://dev.to/madsigntist/how-css-clamp-works-and-a-free-generator-that-does-the-math-for-you-2pc0 <p>The CSS <code>clamp()</code> function is one of the most useful tools in modern CSS, <br> but the math to get a correct preferred value is tedious to do by hand.</p> <h2> What clamp() actually does </h2> <p><code>clamp(minimum, preferred, maximum)</code> locks a value between a floor and ceiling <br> while letting it scale proportionally between them based on viewport width.</p> <p>For fluid typography, the preferred value is a linear interpolation between <br> two known points: the size you want at your smallest viewport, and the size <br> you want at your largest.</p> <h2> The math </h2> <p>Given:</p> <ul> <li>minViewport = 320px</li> <li>maxViewport = 1920px</li> <li>minSize = 1rem (16px)</li> <li>maxSize = 2.5rem (40px)</li> </ul> <p>The formulas are:</p> <p>slope = (maxSize - minSize) / (maxViewport - minViewport)<br> intercept = minSize - (slope x minViewport)<br> preferred = intercept + (slope x 100vw)</p> <p>Which produces:</p> <p>font-size: clamp(1rem, 0.7rem + 1.5vw, 2.5rem);</p> <p>That single line replaces multiple media query breakpoints and eliminates <br> layout shift from abrupt size jumps.</p> <h2> Why rem instead of px </h2> <p>Using <code>rem</code> respects the user's browser font size preference. If someone has <br> increased their base font size for accessibility, <code>rem</code> values scale with it. <br> Pixel values are absolute and override user preferences entirely. For font-size <br> specifically, <code>rem</code> is the accessible choice.</p> <h2> The generator </h2> <p>I built a free tool that handles the calculation and outputs a ready-to-paste <br> CSS declaration:</p> <p><strong><a href="https://clampgen.com" rel="noopener noreferrer">https://clampgen.com</a></strong></p> <p>It supports any CSS property (not just font-size), has a rem/px toggle, <br> quick presets for common type scale targets, and a breakdown panel that <br> shows you the slope and intercept values so you can verify the math yourself.</p> <p>Built with vanilla HTML/CSS/JS and hosted on Netlify. No login, no email <br> capture, just the tool.</p> css webdev frontend beginners