Por que clamp() em vez de media queries?

Escala linear entre dois breakpoints — sem saltos, sem valores por breakpoint para manter. Menos linhas de CSS para o mesmo efeito.

Por que rem e não px?

Usuários podem ajustar o tamanho base no navegador (acessibilidade). rem respeita; px ignora.

Quanto o valor cresce por `1vw` de aumento de viewport. Junto com o intercept, é a função linear que passa por (minVw, minVal) e (maxVw, maxVal).

Suporte de navegador?

`clamp()` funciona em todos os navegadores desde 2020 — Safari 13.1, Chrome 79, Firefox 75. Seguro em 2026.

Calculadora CSS clamp() (Tipografia Fluida)

Cor

Tipografia fluida usa `clamp(min, preferred, max)` para escalar linearmente entre duas larguras de viewport — sem breakpoints. Esta calculadora pega seus valores min/max e o intervalo de viewport e produz a expressão exata `clamp(min, intercept + slope*100vw, max)` sem ruído de arredondamento. Saída em `rem` (root configurável) ou `px`. Bloco de preview ao vivo para ver a escala.

—

Presets

Valor min (px)Valor max (px)Viewport min (px)Viewport max (px)UnidadeRoot font-size (px)

Resultado

font-size: clamp(1rem, 0.8261rem + 0.8696vw, 1.5rem);

Redimensione a janela para ver a escala linear.

Pré-visualização

O pequeno jabuti xereta viu dez cegonhas felizes.

Como usar

Escolha um preset (Body, H1, etc.) ou defina min/max e intervalo de viewport.
Escolha rem ou px (rem recomendado — respeita preferências do usuário).
Copie a expressão clamp em uma linha para o seu CSS.

Perguntas frequentes

Por que clamp() em vez de media queries?: Escala linear entre dois breakpoints — sem saltos, sem valores por breakpoint para manter. Menos linhas de CSS para o mesmo efeito.
Por que rem e não px?: Usuários podem ajustar o tamanho base no navegador (acessibilidade). rem respeita; px ignora.
O que é o slope?: Quanto o valor cresce por `1vw` de aumento de viewport. Junto com o intercept, é a função linear que passa por (minVw, minVal) e (maxVw, maxVal).
Suporte de navegador?: `clamp()` funciona em todos os navegadores desde 2020 — Safari 13.1, Chrome 79, Firefox 75. Seguro em 2026.