O que é tipografia fluida com clamp()
Com media queries, o tamanho da fonte muda em saltos: 16px no celular, 20px no tablet, 24px no desktop. Com clamp(), o tamanho cresce de forma contínua conforme a largura da tela, sempre dentro de um limite mínimo e máximo. A função recebe três valores: clamp(mínimo, preferido, máximo). O valor preferido costuma combinar rem e vw para crescer com o viewport.
Calcular esse valor do meio é a parte chata. Este gerador faz a conta para você: informe o tamanho mínimo e o máximo e as larguras de viewport em que cada um deve valer. O resultado é algo como clamp(1rem, 0.5rem + 2.5vw, 2rem), com a inclinação e o intercepto explicados, para que você entenda de onde vêm os números.
Você escolhe trabalhar em px ou rem; em rem, o tamanho da fonte raiz (16px por padrão) é configurável. Usar rem é recomendado, porque respeita o tamanho de fonte que o usuário definiu no navegador. Um controle deslizante de viewport mostra o tamanho calculado em qualquer largura, para você conferir o comportamento entre os extremos.
Não é só para fonte: o mesmo clamp() funciona para padding, gap, margens e outras medidas de espaçamento. O gerador roda no seu navegador e é gratuito, sem limites: gere e copie quantos valores quiser, sem precisar do Pro.
Como gerar um valor clamp()
- Escolha a unidade (px ou rem) e, se usar rem, o tamanho da fonte raiz.
- Informe o valor mínimo e o valor máximo.
- Informe a largura de viewport mínima e a máxima.
- Mova o controle de viewport para ver o tamanho calculado em cada largura.
- Copie o clamp() e use em font-size, padding, gap ou margin.
Onde usar clamp()
- Títulos que crescem do celular ao desktop sem media queries.
- Texto de corpo com leve ajuste conforme a tela.
- Padding de seções que respira mais em telas grandes.
- Gap de grids e flexbox fluido.
- Margens e espaçamentos de um sistema de design responsivo.
A fórmula por trás do clamp()
O valor preferido é uma reta: tamanho = intercepto + inclinação × largura do viewport. A inclinação é (máximo − mínimo) ÷ (viewport máximo − viewport mínimo), e o intercepto é mínimo − inclinação × viewport mínimo. Em CSS a inclinação é escrita em vw, multiplicando por 100.
Exemplo: de 16px em 320px de largura até 32px em 960px. Inclinação = 16 ÷ 640 = 0,025, ou seja 2,5vw. Intercepto = 16 − 0,025 × 320 = 8px = 0,5rem. Resultado: clamp(1rem, 0.5rem + 2.5vw, 2rem).
Manter uma parte em rem no valor preferido é importante para acessibilidade: com apenas vw, o texto não aumenta quando o usuário dá zoom ou muda o tamanho de fonte padrão.
Perguntas Frequentes
O gerador de clamp é grátis?
Sim. Os geradores de CSS são gratuitos e sem limites, sem precisar do Pro.
Devo usar px ou rem?
Rem é o recomendado, porque respeita o tamanho de fonte configurado pelo usuário. Px funciona, mas ignora essa preferência.
clamp() funciona em todos os navegadores?
Sim, todos os navegadores modernos suportam clamp().
Posso usar clamp() para espaçamento?
Sim. Funciona em qualquer propriedade com comprimento, como padding, margin, gap e width.
O que acontece fora das larguras definidas?
Abaixo do viewport mínimo o valor fica no mínimo; acima do máximo, fica no máximo. Só entre os dois ele cresce.