Fluid Type Scale (CSS clamp) Builder
Build a full responsive type scale of CSS clamp() font sizes that fluidly interpolate between two viewport widths (Utopia method).
About this tool
The Fluid Type Scale (CSS clamp) Builder generates a complete responsive typographic scale using the Utopia method. For each step it computes a minimum size (min_base × ratio_min^n) and a maximum size (max_base × ratio_max^n), then derives a CSS clamp() that interpolates between them across your chosen viewport range. It is for front-end developers who want type that scales smoothly without media queries; copy the per-step --step-N custom properties straight into your stylesheet.
Frequently asked questions
What is fluid typography with clamp()?
Fluid typography interpolates a font size smoothly between a minimum and maximum as the viewport grows, using CSS clamp(min, preferred, max). The preferred value mixes a rem intercept with a vw slope so text scales with the screen.
How is the vw slope calculated?
Slope per pixel = (maxRem − minRem) / (maxVw − minVw). It is expressed as a vw coefficient by multiplying by 100, and the rem intercept is minRem − slopePerPx × minVw, matching the Utopia calculator.
Why does it generate a whole scale instead of one size?
Following the Utopia method, every step uses its own ratio at the min and max viewport, so the entire scale stays harmonious at both ends and fluidly in between. Each step is emitted as a --step-N custom property.