O que é tipografia fluida
A tipografia responsiva clássica escolhe alguns tamanhos fixos e os troca com media queries: 16px no celular, 18px no tablet, 20px no desktop. A tipografia fluida substitui esses degraus por uma função contínua da largura do viewport. Com o CSS clamp(), a regra inteira cabe em uma linha e o navegador calcula o tamanho certo para cada largura entre os seus dois extremos.
A fórmula por trás do clamp()
Um tamanho fluido é uma reta que passa por dois pontos: (viewport mínimo, tamanho mínimo) e (viewport máximo, tamanho máximo). A inclinação é (tamanho máximo − tamanho mínimo) ÷ (viewport máximo − viewport mínimo); multiplique por 100 para obter o coeficiente em vw. O intercepto é tamanho mínimo − inclinação × viewport mínimo. O resultado é clamp(tamanho mínimo, intercepto + inclinação·100vw, tamanho máximo). O gerador acima faz exatamente isso e arredonda para o número de casas decimais escolhido.
Como escolher bons tamanhos
O texto corrido raramente precisa mudar muito: de 16 a 18 ou de 16 a 20 pixels atende à maioria dos layouts de leitura. Os títulos são os que mais ganham com o tamanho fluido, porque um título de 48px que fica ótimo no notebook ocupa meia tela do celular. Comece pelo maior título e vá descendo, com uma proporção entre mínimo e máximo menor quanto menor for o texto.
Defina a faixa de viewport a partir do seu layout, não de listas de aparelhos. O mínimo costuma ser 320 ou 360 px. O máximo é a largura em que o contêiner de conteúdo atinge o seu max-width; depois disso o comprimento da linha não cresce mais, então o tamanho da fonte também não deveria crescer.
Checklist de acessibilidade
Mantenha o mínimo, o máximo e o intercepto em rem para que as preferências de fonte do usuário continuem valendo. Teste o critério WCAG 1.4.4 com zoom de 200%: se o máximo passar de cerca de 2,5 vezes o mínimo, o zoom pode não ampliar o texto o suficiente, e a ferramenta avisa. Use altura de linha relativa (por exemplo 1.5) para que ela acompanhe a fonte e teste as palavras mais longas na tela mais estreita.