← Back to tools

CSS Clamp Calculator

Fluid typography and spacing for responsive design. Live preview.

Size range
Viewport range (px)
font-size: clamp(...);
The quick brown fox
Scales with viewport width

The CSS clamp() function takes three values: a minimum, a preferred, and a maximum. It outputs whichever fits: clamp(MIN, PREFERRED, MAX). For responsive design, the preferred value is usually a formula that scales with viewport width, producing fluid typography that grows smoothly between breakpoints without media queries.

The math: given a min size at a min viewport and a max size at a max viewport, the preferred value is a linear equation: slope * 100vw + intercept. This calculator solves that equation automatically and outputs a single clamp() value you can drop into any CSS property — font-size, padding, margin, gap, or even width.

Why fluid over media queries? Fluid values scale continuously, avoiding abrupt jumps at breakpoints. They reduce CSS bloat and handle any screen size gracefully. Using rem units (instead of px) also respects user zoom and accessibility settings — critical for WCAG compliance.

This tool in other languages:

Français:
Calculateur CSS clamp

Español:
Calculadora CSS clamp

Deutsch:
CSS clamp Rechner

Português:
Calculadora CSS clamp

日本語:
CSS clamp 計算ツール

中文:
CSS clamp 计算器

한국어:
CSS clamp 계산기

العربية:
حاسبة CSS clamp

Frequently asked questions

How does CSS clamp() work for fluid typography?

clamp(min, preferred, max) sets a value that scales between a minimum and maximum based on viewport size. Example: clamp(1rem, 2vw + 0.5rem, 1.5rem) — text is 1rem on small screens, grows with viewport, caps at 1.5rem on large screens. This tool calculates the middle value for you.

Why use clamp() instead of media queries?

Media queries jump at breakpoints — text is 18px at 767px and suddenly 24px at 768px. clamp() scales smoothly across the whole range, which looks more polished and handles every screen size without writing explicit breakpoints.

What viewport sizes should I use for min and max?

Common defaults: min viewport = 320px (smallest phone), max viewport = 1200-1440px (typical desktop cap). For content-focused sites, cap earlier (1024px) so text doesn't scale too large on wide monitors. Adjust to match where your audience actually views the site.

Can I use clamp() for padding, margins, and gaps, not just font size?

Yes. clamp() works anywhere you use a length value: padding: clamp(1rem, 4vw, 3rem), margin, gap, width, max-width. Fluid spacing makes whole layouts feel cohesive across viewports without extra breakpoints.

Should I use rem or px for clamp min and max values?

Prefer rem for anything related to text (font-size, line-height, vertical rhythm) — it respects user browser font-size preferences (accessibility). Use px or rem for layout spacing; px is fine when you want exact pixel values regardless of user zoom.