Fluid text with clamp()
Resize the window to see the effect.
.element {
font-size: clamp(16px, 24px, 32px);
}clamp() lets you set a value that stays between a minimum and maximum while preferring a middle (preferred) value. It is ideal for fluid typography and spacing that scales with viewport.
Yes. No sign-up. All generation runs in your browser.
Yes. You can mix px, rem, em, %, vw, and vh. For example clamp(1rem, 2vw + 1rem, 2rem) is a common fluid font-size pattern.