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).

Open tool

Overview

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.

Try Fluid Type Scale (CSS clamp) Builder