Calculadora CSS Clamp

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.

1. Defina o tamanho mínimo e máximo (em px ou rem) e as viewports limites onde cada tamanho vai aplicar.
2. Veja o cálculo detalhado com slope e intercept, e confira o preview das três escalas.
3. Copie o CSS e cole no seu arquivo de tokens ou variável CSS global.

Use esta ferramenta no seu site

<iframe
  src="https://jkit.tools/embed/pt-BR/calculadora-clamp-css"
  width="100%"
  height="600"
  style="border:0"
  loading="lazy"
  title="Calculadora CSS Clamp"
></iframe>

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().

Perguntas frequentes

Continue daqui