Loading…
Loading…
Generate fluid CSS clamp() values for responsive typography and spacing.
The quick brown fox jumps over the lazy dog
25.1px · 1.571rem
clamp(1rem, 1.4286vw + 0.7143rem, 2rem)max(1rem, min(calc(0.7143rem + 1.4286vw), 2rem))--fluid-size: clamp(1rem, 1.4286vw + 0.7143rem, 2rem);Need a full type scale? Use the Fluid tool for complete typography systems.
📐 Fluid Type & SpaceCommon questions about the CSS Clamp Calculator.
clamp(min, preferred, max) constrains a value between a minimum and maximum. It's used for fluid typography, responsive spacing, and flexible layouts — replacing media queries with a single line of CSS that scales smoothly across viewports.
The preferred value is typically a viewport-relative unit (vw) calculated from your min/max sizes and viewport range. The formula is: preferred = min + (max - min) × (100vw - minVw) / (maxVw - minVw). This tool calculates it automatically.
Absolutely — clamp() works for any CSS length property: padding, margin, gap, width, height. For example, padding: clamp(1rem, 3vw, 3rem) creates responsive spacing that scales with the viewport without media queries.
Yes — clamp() is supported in all modern browsers since 2020 (Chrome 79+, Firefox 75+, Safari 13.1+). It has over 95% global browser support and is safe to use in production without fallbacks.