É uma função CSS que limita um valor entre mínimo e máximo. No meio, aceita qualquer expressão CSS — normalmente `viewport-width + constante-rem` para tipografia fluida.
Calculadora CSS Clamp
Gere valores fluidos responsivos com clamp() — tipografia e espaçamento que escalam suavemente.
Antes do clamp(), tipografia responsiva significava media queries para cada breakpoint. Com clamp(), a escala acontece continuamente entre dois tamanhos de tela.
O CSS `clamp(min, valor-preferido, max)` é uma função matemática que limita um valor entre um mínimo e um máximo. Para tipografia fluida, o valor preferido é uma combinação de `vw` (viewport width) com um offset fixo em `rem`, calculado geometricamente a partir dos tamanhos de fonte e das larguras de viewport alvo. A fórmula para o slope é simples: `(maxPx - minPx) / (maxVp - minVp)`. O intercept posiciona a linha na origem. O resultado é um texto que escala pixel a pixel entre as viewports, sem salto nenhum.
Configure os extremos e deixe a matemática trabalhar.
- Defina o tamanho mínimo e máximo (em px ou rem) e as viewports limites onde cada tamanho vai aplicar.
- Veja o cálculo detalhado com slope e intercept, e confira o preview das três escalas.
- Copie o CSS e cole no seu arquivo de tokens ou variável CSS global.
Fontes e referências desta ferramenta
Estas referências ajudam a contextualizar fórmulas, padrões, APIs e limitações usadas nesta página. Elas não substituem validação profissional quando o resultado tiver impacto jurídico, financeiro, médico ou operacional.
- clamp()MDN Web Docs — Referência da função clamp com exemplos para tipografia e espaçamento fluido.
- CSS Values and Units Module Level 4 — clamp()W3C — Especificação formal das funções matemáticas CSS incluindo clamp().
- Fluid Typography — Josh W. ComeauJosh W. Comeau — Artigo técnico referência sobre a fórmula slope-intercept para tipografia fluida com clamp().