CSS clamp() Function Generator

Create flawless fluid typography that scales perfectly between breakpoints without media queries.

Minimum Size

rem

Maximum Size

rem

Min Viewport Width

Max Viewport Width

Preferred Unit

Root Font Size (px)

Generated CSS Function

clamp(1.5rem, 0.5rem + 2.5vw, 3.5rem)

Usage Example

h1 {
  font-size: clamp(1.5rem, 0.5rem + 2.5vw, 3.5rem);
}

Responsive Sandbox

Width: 100px

The quick brown fox jumps over the lazy dog.

Fluid typography ensures this heading stays readable across all screen sizes. Adjust the settings above or drag the handle on the right of this box to see it in action.