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)

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.

Ferramentas relacionadas

Conversor de Unidades CSS

Converta entre px, rem, em, pt, vw, vh e % usando seu próprio tamanho de fonte e viewport.

Converter 0 0

Playground de CSS Grid

Escolha visualmente grid-template-columns / rows, gap e alinhamento — copie o CSS para o projeto.

Desenvolvimento 0 0

Gerador de Gradientes CSS

Crie gradientes CSS lineares ou radiais com várias paradas de cor e copie o código.

Cor 0 0

Conversor de Formatos de Cor

Converta qualquer cor entre HEX, RGB, HSL, HSV, OKLCH e uma variável CSS.

Cor 0 0

Gerador de CSS Box Shadow

Desenhe box-shadow CSS visualmente em várias camadas, com pré-visualização ao vivo e saída CSS / Tailwind pronta para copiar.

Cor 0 0

Playground de Filtros CSS

Componha visualmente blur, brightness, contrast, hue, sepia, invert e mais — copie o filtro CSS ou valor arbitrário Tailwind.

Cor 0 0