Gerador de clamp() do CSS

O que é Gerador de clamp() do CSS?

O gerador de clamp() do CSS é uma calculadora gratuita de tipografia fluida para desenvolvedores front-end e designers. Você informa um tamanho de fonte mínimo, um máximo, uma largura de viewport mínima e uma máxima; ele retorna uma declaração clamp(mín, preferido, máx) em que o valor preferido combina um deslocamento em rem com uma inclinação em vw, de modo que o texto cresce linearmente com a tela e nunca ultrapassa seus limites. Isso elimina as media queries de font-size empilhadas e mantém títulos e corpo de texto responsivos em qualquer dispositivo. Escolha um tamanho de pré-visualização para ver como o valor é renderizado, alterne a unidade de saída entre rem e px e copie a linha diretamente para sua folha de estilos.

Como usar Gerador de clamp() do CSS

1. Insira o tamanho de fonte mínimo — o tamanho que o texto deve ter na menor tela.
2. Insira o tamanho de fonte máximo — o tamanho que o texto deve atingir na maior tela.
3. Defina as larguras de viewport mínima e máxima entre as quais o tamanho deve escalar.
4. Abra as configurações para alternar a unidade de saída (rem mantém a acessibilidade; px também está disponível), se preferir.
5. Escolha um tamanho de pré-visualização para renderizar um texto de exemplo nesse viewport e leia o valor clamp() ao vivo.
6. Copie a expressão clamp() gerada e cole-a no seu font-size do CSS.

Exemplos

fonte mín 16, fonte máx 20, vw mín 320, vw máx 1240

font-size: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);

fonte mín 32, fonte máx 64, vw mín 320, vw máx 1536

font-size: clamp(2rem, 1.474rem + 2.632vw, 4rem);

fonte mín 12, fonte máx 14, vw mín 480, vw máx 1280

font-size: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);

Perguntas frequentes

Como o valor clamp() escala sem media queries?

clamp(mín, preferido, máx) recebe um limite inferior, um valor preferido (fluido) e um limite superior. O valor preferido é uma reta no formato rem + vw, calculada para que a fonte seja igual ao seu mínimo no viewport mínimo e ao seu máximo no viewport máximo. Entre essas larguras, o navegador interpola automaticamente e, fora delas, o clamp() fixa o tamanho no limite mais próximo — tudo em uma única declaração.

Por que a saída está em rem em vez de px?

Usar rem para as partes fixas respeita a configuração de tamanho de fonte do navegador do usuário, o que é melhor para a acessibilidade. A inclinação relativa ao viewport é expressa em vw. Você pode alterar a unidade para px nas configurações se o seu projeto precisar de unidades absolutas, mas rem é o padrão recomendado.

Qual faixa de viewport devo usar?

Uma escolha comum é a sua menor largura suportada (muitas vezes 320px ou 360px) para o mínimo e o seu contêiner de conteúdo mais largo (como 1240px–1536px) para o máximo. A fonte só é totalmente fluida dentro dessa faixa; abaixo dela o texto fica no mínimo e acima dela no máximo.

Isso funciona para qualquer comprimento do CSS, não apenas font-size?

Sim. O valor clamp() gerado é apenas um comprimento, então você pode colá-lo em padding, margin, gap ou qualquer propriedade que aceite um comprimento. Os rótulos mencionam font-size porque a tipografia fluida é o uso mais comum, mas a matemática é idêntica para espaçamentos.

Meus dados são enviados para algum lugar?

Não. O cálculo é executado inteiramente no seu navegador com JavaScript — seus tamanhos de fonte e larguras de viewport nunca são enviados a nenhum servidor, então a ferramenta funciona de forma privada e até offline depois que a página é carregada.