Fluid Type Clamp Generator

How to use it

1. Enter the viewport range where the scaling should happen, for example 320px to 1280px.
2. Enter the font size at the small end and at the large end, for example 16px to 24px.
3. Set the root font size so the tool can convert pixel values into rem (16px by default).
4. Pick rem or px as the output unit. rem keeps the result tied to the user browser setting.
5. Read the computed size rows under each viewport width, then copy the generated CSS.

Common use cases

• Responsive headings - one declaration replaces three or four breakpoint overrides.
• Design handoff - hand a developer the exact clamp() string instead of a scaling description.
• Accessibility checks - confirm the small end never drops below a readable size.
• Learning the math - see how slope and intercept change when you widen the viewport range.

Why it stays private

Every number is computed in your browser from the four inputs you type. Nothing is uploaded, no account is needed, and the page works offline once loaded.

FAQ

Q: What does the middle value of clamp() mean? A: It is the preferred term, written as an intercept plus a viewport-relative slope such as 0.5rem plus 1.5625vw. The browser resolves it at any width and then clamps the result between the minimum and maximum you set.

Q: Why should I use rem rather than px? A: rem scales with the root font size, so a reader who raises the default text size in the browser still gets larger type. px output ignores that preference, which can make text hard to read for some users.

Q: What happens outside the viewport range? A: The clamp keeps the minimum size below the small end and the maximum size above the large end. The generated fallback shows the same behaviour with a media query for engines that lack clamp() support.