CSS clamp() Tipográfico

CSS clamp() e tipografia fluida

A função CSS clamp(min, preferido, max) escolhe o valor preferido quando ele cai dentro do intervalo e o restringe aos limites caso contrário. O uso mais célebre é tipografia fluida: font-size: clamp(1rem, 2.5vw, 2rem) escala suavemente de 1rem em viewports pequenas até 2rem em telas grandes, sem nenhum breakpoint no meio do caminho. A mesma ideia serve para espaçamento, gaps, padding, border-radius e até paradas de gradiente.

A técnica começou em 2016, quando Mike Riethmuller demonstrou como interpolar linearmente entre duas larguras de viewport usando calc(). O clamp() moderno compacta esse cálculo em uma única linha legível.

A matemática por trás do valor preferido

A interpolação linear entre duas larguras pode ser escrita como:

calc(
  min + (max - min)
  * (100vw - viewportMin)
  / (viewportMax - viewportMin)
)

Que se reduz a calc(slope * 100vw + intercept). Envolvido em clamp(), o resultado nunca fica abaixo de min nem acima de max — então o texto não fica ilegível no celular nem gigantesco em telas 4K.

Ferramentas e metodologias

• utopia.fyi — a calculadora de Trys Mudford, padrão de fato para escalas fluidas de tipo e espaço;
• fluid-type-scale.com — gerador focado em rampas tipográficas;
• modern-fluid-typography.vercel.app — playground visual rápido;
• Escalas modulares: 1.125 (segunda menor), 1.250 (terça maior), 1.618 (razão áurea).

Suporte e funções irmãs

O clamp() está disponível desde Chrome 79+, Firefox 75+ e Safari 13.1+ — universal entre navegadores modernos. As irmãs min() e max() têm o mesmo suporte e servem quando só um dos limites importa.

Armadilhas e acessibilidade

Nunca use clamp() sem uma unidade relativa ao viewport no campo preferido (use vw ou %) — caso contrário o valor não se move. Evite em nos limites min/max porque ele compõe quando aninhado. Mais importante: use rem nos limites — a WCAG 1.4.4 exige que o texto possa ser ampliado até 200%, e o rem respeita o tamanho-base que o usuário definir no navegador, enquanto px não.

Perguntas frequentes

O clamp() substitui media queries para tipografia? Para escalas de tipo, sim — uma única declaração cobre o range inteiro. Media queries continuam úteis para trocas radicais de layout que vão além de redimensionar uma propriedade.

Min e max devem usar unidade relativa? Sim. Use rem para que usuários com fonte-base customizada continuem enxergando o texto. Limites em px quebram o zoom que tecnologias assistivas usam.

Como escolher o slope entre 320px e 1280px? Calcule a diferença entre max e min, divida pelo range de viewport e multiplique por 100 para virar vw. Ferramentas como utopia.fyi fazem isso automaticamente e permitem prever a curva.

Posso combinar container queries com clamp()? Sim — esse é o próximo passo da fluidez por componente. Troque vw por cqi dentro de um container e o tipo escala com o pai, não com a página.