Design Drifter
All Tools

CSS Clamp Calculator

Generate a CSS clamp() value for fluid typography.

Design

Processed locally. Your input never leaves your browser.

Unit

The quick brown fox jumps over the lazy dog

Resize your browser window to see this text scale between the min and max sizes.

About

Generates a CSS clamp() value for fluid typography: the size stays at "Min Size" below "Min Viewport", scales linearly between the two viewport widths, and stays at "Max Size" above "Max Viewport". Formula: slope = (maxSize − minSize) / (maxViewport − minViewport); the vw coefficient is slope × 100. Viewport width always means the browser window, not a parent container, so this only works as expected for sizes meant to respond to the whole page.

Related Tools