O valor clamp() para 14–16px
Com uma faixa de viewport de 320px a 1280px, o resultado é clamp(0.875rem, 0.8333rem + 0.2083vw, 1rem). O tamanho cresce 0,21px a cada 100px de largura do viewport: chega a cerca de 14,9px em um tablet de 768px e a 15,5px em 1024px, e se fixa em 16px a partir de 1280px.
O valor preferido combina uma parte fixa em rem com uma parte em vw. A parte em rem mantém o texto ligado ao tamanho de fonte do navegador do leitor; a parte em vw garante o crescimento. Altere os campos de viewport acima se o contêiner do seu layout parar de crescer antes ou depois.
Quando usar de 14px a 16px
Uma faixa de 14 a 16px serve para texto secundário: legendas, dicas de formulário, células de tabela, notas de rodapé e menus densos. A mudança é sutil, então o texto fica um pouco mais confortável no desktop sem ocupar mais espaço no celular. Combine com um texto corrido de 16–18px para manter uma hierarquia clara.
O máximo é 1,14× o mínimo, dentro da diretriz de 2,5× que costuma ser aplicada ao critério WCAG 1.4.4 Redimensionar texto, então o zoom do navegador continua ampliando esse tamanho de forma previsível.
De onde vêm os números
Inclinação = (16 − 14) ÷ (1280 − 320) = 0,0021, ou seja, 0,2083vw. Intercepto = 14 − inclinação × 320 = 13,33px, ou 0,8333rem com fonte raiz de 16px. Esses dois números formam o argumento do meio do clamp(); o primeiro e o último são o seu mínimo e o seu máximo convertidos para rem.
Como usar no seu projeto
Cole o valor em uma declaração font-size, guarde-o em uma propriedade personalizada como --fluid-size ou use a classe do Tailwind text-[clamp(0.875rem,0.8333rem_+_0.2083vw,1rem)]. Se precisar de um conjunto completo de tamanhos relacionados, o gerador de escala tipográfica cria passos em torno de um tamanho base com a mesma faixa de viewport.