Gerador de clamp CSS

O que é um clamp em CSS

A função clamp() do CSS recebe três valores — um mínimo, um valor preferido e um máximo — e devolve o preferido, a menos que ele fique fora dos outros dois. Para tipografia isso significa um tamanho de fonte que cresce com a janela e depois para: pequeno no celular, maior no desktop, nunca absurdo num monitor ultralargo. Ele substituiu uma pilha de media queries por uma única declaração, e é por isso que a tipografia fluida se espalhou assim que os navegadores passaram a suportá-la.

A parte interessante é o valor do meio. Para ser fluido ele precisa depender da viewport, então é escrito com unidades vw, e o que todo mundo usa é uma reta por duas âncoras: este tamanho nesta largura, aquele tamanho naquela largura, interpolando entre as duas. Essa reta é aritmética, não regra de bolso, e este gerador a calcula exatamente.

Ele também faz algo que quase nenhum gerador faz: mostrar o que o seu clamp entrega a quem não está com o tamanho de fonte padrão do navegador. Isso acaba importando mais do que a aritmética.

Como usar

1. Defina as duas âncoras. O tamanho de fonte que você quer na sua viewport mais estreita e na mais larga. Os padrões são 16px em 320px e 24px em 1280px, um ponto de partida comum.
2. Copie a declaração. O termo do meio sai como um rem mais um vw. Esse rem não é enfeite — o painel seguinte é sobre o que acontece sem ele.
3. Mude o tamanho de fonte do leitor. A tabela compara o seu clamp com as mesmas âncoras escritas só em unidades de viewport, em quatro larguras, para o tamanho padrão que você digitar. Experimente 24px.

Por que o termo do meio precisa de um rem

Um clamp fluido normalmente é escrito com limites em rem e um meio só de viewport: algo como clamp(1rem, 1.875vw, 1.5rem). Os limites são relativos ao tamanho de fonte do leitor e o meio é relativo à janela, e esse descompasso é o problema. Quando alguém aumenta o tamanho de texto padrão do navegador, o piso e o teto sobem os dois. O que está entre eles não se move nada, porque nada ali é medido nas unidades do leitor.

A consequência é pior do que um tamanho apenas errado. Pegue esse clamp e um leitor cujo padrão é 24px. Numa viewport de 320px ele recebe 24,00px. Em 600px recebe 24,00px. Em 900px, e em 1280px, ainda recebe 24,00px. O termo do meio nunca sobe acima do piso, então o clamp fica preso ao mínimo em toda a faixa de projeto e a tipografia deixou de ser fluida. Escrito com um rem no termo do meio, esse mesmo leitor recebe 24,00px na ponta estreita subindo até 30,67px na larga.

Esse colapso não é esquisitice desses números. O termo do meio feito só de viewport atinge o maior valor na âncora larga, e por construção esse valor é o máximo que você pediu — então qualquer leitor cujo 1rem tenha chegado ao seu máximo fica preso no piso em toda parte. É exato, e é por isso que o limiar que esta página mostra é sempre igual ao seu tamanho máximo.

Há uma simetria amarga nisso: os leitores para quem o clamp silenciosamente para de funcionar são justamente os que aumentaram o texto porque precisavam que ele respondesse. Nada avisa você, porque na sua máquina a 16px tudo se comporta.

Como isto foi conferido e o que não cobre

A aritmética é uma identidade, então é verificada como tal. Uma reta por dois pontos passa pelos dois, e isso foi conferido contra 576 combinações geradas de tamanhos, viewports e tamanhos raiz, em vez de contra um único exemplo resolvido — uma identidade que vale num caso e não no resto é exatamente o que um exemplo não consegue dizer. Todas elas acertam as duas âncoras, dentro do arredondamento que as quatro casas decimais de uma folha de estilos permitem.

A tabela de comparação é uma medição, não uma ilustração. As duas formas foram avaliadas do jeito que um navegador avalia o clamp — pegar o valor preferido e depois limitá-lo — ao longo de uma faixa de tamanhos de fonte do leitor e larguras de janela, antes de qualquer coisa disto ser escrita. Os números citados acima são essa medição.

Uma correção que vale passar adiante. O CSS define clamp(MIN, VAL, MAX) como max(MIN, min(VAL, MAX)), o que significa que se você puser um mínimo maior que o máximo, o mínimo vence em todas as larguras e o navegador não vai gentilmente trocá-los. Este gerador reproduz isso em vez de arrumar, porque a arrumação é o que surpreenderia você depois.

O que não é coberto: isto modela font-size, e embora clamp() sirva para qualquer comprimento, o argumento de acessibilidade aqui é especificamente sobre texto. Também supõe que o tamanho de fonte do leitor é a única coisa que ele mudou — o zoom de página escala a viewport também, e se comporta de forma diferente de uma preferência de tamanho de fonte. E um termo do meio com um rem não basta sozinho; ele faz o clamp responder ao leitor, o que é necessário e não é toda a tipografia acessível.

Por que é grátis?

É uma reta por dois pontos, calculada no seu navegador. Não há nada para rodar num servidor, então não há nada a cobrar nem conta a criar.

Nada do que você digita é enviado, guardado ou registrado. Nem seria interessante se fosse, e esse é justamente o ponto: uma ferramenta deste tamanho não tem por que coletar nada.