Fluid Sizing with clamp()

Use clamp(min, preferred, max) for smooth responsive scaling without breakpoints.

font-size: clamp(1rem, 0.5rem + 2vw, 2.5rem);

• Minimum: 1rem - never smaller
• Preferred: 0.5rem + 2vw - scales with viewport
• Maximum: 2.5rem - never larger

Works With Any Property

padding: clamp(1rem, 5vw, 3rem);
gap: clamp(0.5rem, 2vw, 2rem);
width: clamp(200px, 30vw, 400px);

Live Demo

.fluid-text {
font-size: clamp(16px, calc(16px + 4vw), 40px);
font-weight: 700;
background: linear-gradient(90deg, #8b5cf6, #06b6d4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center;
}

Adjust the min/max sizes and viewport scaling to see how clamp() creates fluid typography.