Gerador de clamp CSS: tamanho de fonte e espaçamento fluidos

Como usar

Escolha a Propriedade e digite o Menor tamanho e o Maior tamanho, depois escolha a Unidade dos tamanhos.
Informe as duas larguras em Largura da janela em que o tamanho é menor e Largura da janela em que o tamanho é maior, e escolha a unidade delas.
Se você usou rem em algum ponto, confira o Tamanho da fonte raiz (px). Os navegadores usam 16 px, a menos que o site defina outro tamanho.
Copie a Declaração CSS, ou confira o Cálculo e a tabela Tamanho em larguras comuns, para ver o resultado em cada largura.

Como o clamp() torna um tamanho fluido

clamp(MIN, VAL, MAX) recebe um mínimo, um valor preferido e um máximo. A especificação CSS Values and Units (em inglês) diz que ele representa exatamente o mesmo valor que max(MIN, min(VAL, MAX)). Assim, o tamanho nunca fica abaixo de MIN nem sobe acima de MAX, e entre os dois segue VAL, que aqui é uma reta que depende da largura da janela.

A reta vai do menor tamanho na menor largura da janela até o maior tamanho na maior largura. Fora dessas duas larguras, o tamanho fica parado.

inclinação = (maior tamanho - menor tamanho) / (maior janela - menor janela);  intercepto = menor tamanho - inclinação x menor janela;  valor preferido = intercepto + inclinação x 100vw

Inclinação, intercepto e o termo vw

A inclinação é quanto o tamanho cresce para cada pixel de largura da janela. O intercepto é onde a mesma reta encontra uma largura de janela igual a zero. Uma unidade vw é um por cento da largura da janela, então a inclinação multiplicada por 100 dá o termo que acompanha a janela.

As duas larguras e os dois tamanhos são calculados em pixels antes de se achar a inclinação. Um valor em rem é multiplicado pelo tamanho da fonte raiz, então o mesmo projeto dá o mesmo resultado em rem ou em px quando a raiz é 16 px.

Mantenha o maior tamanho igual ou acima do menor. A ferramenta recusa um maior tamanho menor, porque essa reta encolheria à medida que a tela cresce.
Um termo vw não segue a configuração de tamanho de texto do visitante, mas um intercepto em rem segue. Teste a página com zoom de 200 por cento, e mantenha o intercepto em rem sempre que puder.

Exemplo resolvido: uma fonte de 16 px a 24 px

Entre uma janela de 320 px e uma janela de 1200 px, a fonte cresce de 16 px para 24 px. A inclinação é (24 - 16) / (1200 - 320) = 8 / 880, que é 0,0091 com quatro casas decimais. O intercepto é 16 - 0,0091 x 320 = 13,0909 px, e o termo da janela é 0,9091 vw.

O valor é clamp(16px, 13.0909px + 0.9091vw, 24px), e a declaração CSS é font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);. Com unidades rem, de 1rem a 1.5rem entre 20rem e 75rem e com raiz de 16 px, o resultado é clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem).

Perguntas frequentes

O que acontece com o tamanho quando a janela é mais estreita que a menor largura?

O tamanho fica no menor tamanho. A fórmula do clamp() nunca deixa o valor cair abaixo do mínimo, então o texto mantém o tamanho que você definiu para a largura mais estreita.

Por que a parte da janela é escrita em vw?

Uma unidade vw é um por cento da largura da janela, então ela muda quando a janela do navegador muda de tamanho. Um valor em pixels ou em rem não mudaria com a janela, e o tamanho não poderia acompanhá-la.

Por que o código às vezes coloca a parte vw primeiro?

Quando o intercepto é negativo, o código escreve a parte vw primeiro e subtrai o intercepto, o que se lê com mais clareza. As duas formas dão o mesmo valor.

Posso usar o valor em padding, margin ou gap?

Sim. Escolha padding, margin ou gap em Propriedade. A mesma reta vale para qualquer comprimento, então o espaçamento cresce com a janela da mesma forma que um tamanho de fonte.

Quais navegadores aceitam clamp()?

Todos os principais navegadores atuais aceitam clamp(). Se seus visitantes usam versões antigas, teste a página nessas versões antes de confiar no tamanho fluido.

O que eu informo é guardado ou enviado para algum servidor?

Não. O valor é calculado no seu navegador, e nada do que você digita é guardado ou enviado para o nosso servidor. Copie a declaração antes de sair da página.

Fontes

Números e texto verificados pela última vez em terça-feira, 10 de novembro de 2026.

Resultado

Cálculo