Como esta calculadora de clamp() funciona
Você escolhe dois pontos: o tamanho desejado na tela mais estreita e o tamanho desejado na mais larga. A calculadora traça uma reta entre eles e a transforma em uma única expressão CSS clamp() com três partes: um mínimo, um valor preferido e um máximo. Abaixo do viewport mínimo o valor fica no mínimo, acima do máximo fica no máximo e, entre os dois, escala suavemente sem nenhuma media query.
A inclinação mostra quantos pixels o valor cresce a cada pixel de largura do viewport; ela é escrita em unidades vw, em que 1vw equivale a 1% da largura do viewport. O intercepto é o valor que essa reta teria em uma tela de largura zero. Juntos, eles formam o argumento do meio, por exemplo 0.8333rem + 0.8333vw.
Por que o resultado usa rem
Incluir uma parte em rem no valor preferido mantém o texto fluido ligado ao tamanho de fonte que o leitor configurou no navegador. Um tamanho feito só com vw ignora essa preferência e pode enfraquecer o zoom. Por isso rem é a saída padrão; px está disponível se os seus design tokens usam pixels, e o campo de fonte raiz atende projetos que alteram o tamanho da fonte do elemento html.
Prévia, breakpoints e acessibilidade
Arraste o controle de viewport de 320 a 1920 px para ver o texto no tamanho em que seria exibido nessa largura. A tabela mostra os tamanhos calculados em 320 e 375 px para celulares, 768 e 1024 px para tablets e 1280, 1440 e 1920 px para desktops, para você conferir se os títulos não ficam apertados no celular nem exagerados em monitores largos.
O critério de sucesso 1.4.4 das WCAG exige que o texto possa ser ampliado para 200% sem perda de conteúdo. O zoom do navegador também reduz o viewport medido em pixels CSS, então uma tipografia fluida muito agressiva pode crescer menos do que o esperado. Uma regra prática bem difundida é manter o máximo em até 2,5 vezes o mínimo, e a calculadora avisa quando você passa disso.
Compartilhar e exportar
Todas as configurações ficam salvas na URL da página, então você pode favoritar um resultado ou enviá-lo para alguém da equipe. Copie o valor clamp() puro, uma propriedade personalizada CSS para o seu :root ou uma classe do Tailwind com valor arbitrário. Precisa de um conjunto completo de tamanhos? Mude para o modo escala tipográfica e exporte uma escala modular como variáveis CSS.