clamp(), min() e max(): tipografia e espaço fluidos
Um título que fica minúsculo num monitor grande, ou gigante e cortado num celular, geralmente foi construído com um único tamanho fixo, sem nenhum limite de segurança.
Estudar esta lição interativa →O Módulo 7 já apresentou clamp() para tamanho de fonte responsivo. Vale aprofundar agora, porque clamp() tem dois primos mais simples, min() e max(), e o trio junto cobre praticamente qualquer situação de "quero um valor flexível, mas com limite".
min()
width: min(90%, 600px);Usa o MENOR valor da lista. Aqui, nunca passa de 600px, mesmo que 90% da tela seja maior.
max()
padding: max(16px, 4vw);Usa o MAIOR valor da lista. Aqui, o padding nunca fica menor que 16px, mesmo em telas muito estreitas.
clamp(mín, ideal, máx)
font-size: clamp(1rem, 3vw, 2rem);Combina os dois: tenta o valor ideal (aqui, 3vw), mas nunca sai da faixa entre o mínimo e o máximo.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. width:min(90%,600px) trava um teto de largura; padding:max(16px,4vw) garante um piso de respiro; o título usa clamp() para crescer suavemente entre dois limites.
Um exemplo de produto real: o espaçamento entre seções de uma página bem construída costuma vir de uma única variável, algo como --espaco-secao: clamp(24px, 5vw, 64px);, reaproveitada (como vimos nas variáveis da lição anterior) em todo padding ou margin de seção da página. O resultado é um respiro entre blocos que cresce suavemente em telas grandes e nunca fica espremido demais em telas pequenas, sem precisar de uma media query para cada salto.
clamp() espera exatamente mínimo, ideal, máximo, nessa ordem. Inverter o primeiro e o terceiro argumento (escrever o máximo primeiro) produz um resultado que trava sempre no primeiro valor, ignorando o "ideal": quando o "mínimo" escrito é maior que o "máximo", a regra do CSS é que o mínimo vence. Por exemplo, clamp(2.5rem, 4vw, 1rem) vira sempre 2.5rem, em qualquer largura de tela. Se um clamp() parece "travado" e não cresce, confira essa ordem primeiro.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Ajuste width com min() e font-size com clamp().