Categoria: Desenvolvimento
Gerador de CSS clamp
Tamanhos de fonte fluidos sem media queries
Informe um tamanho mínimo e um máximo com as larguras de viewport correspondentes e receba a declaração clamp() que escala entre eles, com uma tabela do que é renderizado nas larguras mais comuns.
font-size: clamp(1.125rem, 0.7826rem + 1.5217vw, 2rem);
| Largura da viewport | Tamanho renderizado |
|---|---|
| 360px | 18px |
| 768px | 24.21px |
| 1024px | 28.1px |
| 1280px | 32px |
| 1600px | 32px |
Prévia
A tipografia fluida continua legível no celular e proporcional no desktop.
A declaração é montada na página. Nada é enviado.
Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
O clamp() substituiu a pilha de media queries que antes fazia um título saltar entre quatro tamanhos. A parte chata é o termo do meio, que precisa ser a reta que passa pelos seus dois pontos: uma inclinação vezes a viewport mais um intercepto, escrito como um valor vw somado a um em rem. Essa conta é feita aqui. Os dois limites ficam em rem para que quem aumentou o tamanho padrão de texto continue vendo letras maiores, e a tabela mostra o tamanho real em 360, 768, 1024, 1280 e 1600 pixels. O mesmo valor serve para padding, gap e margem, não só para tipografia.
Como usar
- Informe o menor tamanho e a largura de viewport em que ele vale.
- Informe o maior tamanho e a largura em que ele para de crescer.
- Copie a declaração clamp() e confira a tabela de prévia.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- Por que os limites ficam em rem e não em px?
- Um tamanho só em unidades de viewport ignora a preferência de tamanho de texto do navegador, o que é uma falha de acessibilidade. Limites em rem acompanham o padrão de cada pessoa.
- Dá para usar em espaçamentos?
- Sim. O valor é apenas um comprimento, então funciona em padding, margin, gap, width e qualquer propriedade que aceite um.
- Algo é enviado a um servidor?
- Não. A declaração é calculada na página a partir dos números digitados, e por isso ela se atualiza na hora.