CSS Clamp Generator
Gere valores CSS clamp() fluidos para font-size com prévia ao vivo.
① Defina tamanhos min/max e viewports ② Clique em Gerar ③ Copie o valor CSS clamp()
O que é CSS clamp() para tipografia fluida?
A função CSS clamp(min, preferido, max) permite tipografia verdadeiramente fluida que escala entre duas larguras de viewport sem breakpoints. O valor preferido combina uma unidade relativa ao viewport (vw) e um offset rem, calculados para que o tamanho de fonte corresponda exatamente ao mínimo no viewport mínimo e ao máximo no viewport máximo.
Perguntas frequentes
CSS clamp(min, preferido, max) aceita três argumentos. min é o menor valor possível, preferido é o valor ideal (geralmente uma expressão vw + rem), e max é o limite superior. O navegador sempre mantém o resultado entre min e max.
A inclinação é (tamMax - tamMin) / (vpMax - vpMin). Multiplicada por 100 dá o coeficiente vw. O intercepto rem é (tamMin - inclinação × vpMin) / rootSize. O clamp final: clamp(minRem, coefVw + interceptoRem, maxRem).
Media queries produzem saltos abruptos em breakpoints. clamp() produz interpolação linear suave. Não precisam de breakpoints, código mais curto e resultado visualmente mais refinado.
Para CSS vanilla, declare como propriedades custom em :root. Para Tailwind v3 em theme.extend.fontSize. Para Tailwind v4 use @theme no arquivo CSS.
CSS clamp() tem suporte em todos os principais navegadores desde 2020. Suporte global superior a 97%. Para navegadores legados, use o fallback só em px antes da declaração clamp().
clamp() funciona para qualquer propriedade de comprimento que se beneficia de escalonamento fluido. Para tipografia elimina @media para font-size. Para espaçamento cria layouts proporcionais.
Problemas comuns: (1) Root font size incorreta. (2) Unidades mistas sem conversão. (3) Min maior que max. (4) Coeficiente vw muito grande. Sempre teste com o simulador de viewport.