Clamp Scale Sheet

Offline fluid type scale builder that outputs clamp() CSS custom properties, with the formula shown.

Clamp Scale Sheet is a single HTML file that runs offline in any modern browser. Enter a minimum and maximum font size, the viewport widths where they apply, a ratio between steps, your root font size and a variable prefix. It outputs one clamp() value per named step (xs to 4xl) as CSS custom properties you can paste into a stylesheet. It shows the linear formula for the base step, with the slope and intercept worked out. The preview renders each step with the px form of the same clamp(), so it matches the generated rem CSS when your site's html font-size equals the root value you entered. The middle term uses your current window width, so the preview changes as you resize. It makes no network requests and stores nothing. Limits: it generates linear clamp() interpolation between two viewport widths only, uses a fixed set of eight step names, and the middle term uses vw, so it does not follow a visitor's browser default font size setting. Check results at your own breakpoints and with browser text zoom. Free online clamp calculators exist; this tool's difference is the named scale export and the visible formula.

Format: html tool · Instant download (.zip) · Includes: index.html, README.md

Created with AI assistance and checked automatically before release.

$9.00

Secure payment by Stripe. See terms & refund policy.

Feedback