Gerador CSS clamp() | Tipografia fluida sem media queries

Informe uma largura de viewport mínima e máxima junto com um valor mínimo e máximo, e esta ferramenta resolve a interpolação linear para você e devolve uma declaração clamp(mín, inclinaçãovw + interceptação, máx) pronta para colar. Funciona com font-size, padding, gap, border-radius e mais, alterna entre px e rem, e mostra tanto o cálculo de inclinação e interceptação quanto uma prévia do valor por viewport.

💡 Sobre esta ferramenta

No design responsivo o mesmo requisito aparece o tempo todo: fazer um título crescer de 24px no celular para 48px no desktop, mas de forma suave. A solução clássica era empilhar media queries em cada breakpoint, o que faz o texto saltar em degraus e exige uma regra nova sempre que o layout muda.

clamp() substitui toda essa escada por uma única linha que escala de forma contínua. A dificuldade está no segundo argumento: o valor preferido precisa acompanhar a viewport, algo como 2vw + 8px. Calcular essa inclinação e essa interceptação à mão significa resolver uma equação linear toda vez: a inclinação é (valorMáx − valorMín) / (vpMáx − vpMín) e a interceptação é valorMín − inclinação × vpMín. É possível, mas trabalhoso e sujeito a erros enquanto você itera um design.

Informe seus quatro números e o calculador faz a álgebra e devolve a declaração. O painel de detalhamento mostra exatamente como a inclinação e a interceptação foram obtidas, então a saída não é uma caixa-preta e você pode conferir o resultado ou ajustar as entradas com segurança. A prévia desenha o valor realmente calculado em larguras comuns de 320px a 1920px, incluindo o ponto em que ele se fixa (clamp) em cada extremidade.

🧐 Perguntas frequentes

Posso digitar valores em px e obter a saída em rem? Sim. Troque a unidade de saída para rem e a ferramenta converte a partir de px usando seu font-size raiz (16px por padrão). Para font-size, a saída em rem costuma ser preferível porque respeita o tamanho de fonte que o usuário configurou no navegador.

O que acontece se o valor máximo for menor que o mínimo? Você obtém uma inclinação negativa, então a propriedade diminui à medida que a viewport cresce. É CSS perfeitamente válido e útil para espaçamentos que você queira reduzir em telas grandes.

A viewport mínima e a máxima podem ser iguais? Não. Com viewports iguais ou invertidas (mín ≥ máx), a inclinação da reta fica indefinida, então a ferramenta exibe um erro e interrompe o cálculo. Mantenha mín < máx.

Um clamp() baseado em vw é um problema de acessibilidade? Um valor preferido feito só de vw pode resistir ao zoom do usuário. Esta ferramenta mantém um deslocamento fixo vw + rem (ou px), de modo que quando o mínimo está em rem você preserva alguma resistência ao zoom em vez de prender tudo a unidades de viewport.

Funciona para propriedades além de font-size? Sim. Você pode escolher padding, margin, gap, width, height, border-radius, letter-spacing ou line-height entre as predefinições, ou digitar qualquer nome de propriedade personalizado.

📚 Curiosidades

clamp() é uma função matemática padronizada no CSS Values and Units Module Level 4, ao lado de min() e max(). Internamente clamp(MÍN, VAL, MÁX) equivale a max(MÍN, min(VAL, MÁX)): ela devolve o valor central dos três, um modelo mental útil quando um resultado surpreende. O suporte chegou aos principais motores por volta de 2020, e a tipografia fluida rapidamente se tornou a forma habitual de lidar com texto responsivo. O truque de somar um termo vw a uma unidade fixa é anterior à função — circulava havia anos com nomes como "fluid type" e "CSS locks" — mas exigia calc() e algumas media queries. Condensar tudo isso em um único clamp() foi o que popularizou o padrão.