Cálculo de font size clamp explicado de maneira fácil
Se você já pesquisou sobre como tornar variável o tamanho de um texto sem que seja necessário o uso de media queries, certamente se deparou com um recurso chamado clamp.
Diferentemente da responsividade oferecida pela estratégia media query, que acarreta em mudanças abruptas no tamanho do texto, o clamp recebe a definição de valores mínimo e máximo, e se encarrega de interpolar o tamanho da fonte de acordo com o tamanho da tela onde o texto está sendo exibido, aumentando ou diminuindo o texto de forma suave e gradual.
A ideia por trás do clamp é ótima, mas ao ver um exemplo real de uso, a fim de entender melhor como aplicar a função ao seu contexto, você pode se deparar com algo do tipo:
font-size: clamp(24px, 4vw, 48px)
O primeiro e o terceiro parâmetros são bastante auto-explicativos. O problema é o parâmetro que está entre os outros dois.
clamp(min, val, max)
Ao ler a documentação, descobrimos que val é a expressão que será utilizada enquanto o resultado dela estiver entre os valores mínimo e máximo.
É neste momento que você pode ficar completamente perdido, já que multiplicando a largura da tela (viewport width) por 4 obtém-se um tamanho de fonte absurdamente maior do que o valor máximo definido (48px). Para que a expressão gerasse um valor que ficasse entre 24px e 48px, a largura da tela teria que ficar entre 6px e 12px, algo que não faz o menor sentido porque nenhum dispositivo tem uma largura de tela assim tão estreita.
A confusão dura apenas até entendermos que o número 4 não representa um número inteiro, mas sim um valor percentual. Na prática, a notação expressa o seguinte: 4% * vw.
Interpolando tamanho de fonte usando a função clamp
Agora sim, as coisas começam a fazer algum sentido. Teremos 24px em telas com 600px de largura ou menos, teremos 48px em telas com 1200px de largura ou mais, e nas telas intermediárias teremos um tamanho de texto aumentando ou diminuindo suave e gradualmente na medida que a largura da tela aumenta ou diminui. Por exemplo, num tablet que esteja na posição retrato teremos um tamanho de texto de aproximadamente 30px (4% * 768px). Se colocarmos o tablet na posição paisagem, passaremos a ver o texto com o tamanho de aproximadamente 40px (4% * 1024px).
Nesse Gist você encontra todo o código necessário para rodar em sua máquina a demonstração exibida neste post. Se você curtiu este post e agora entendeu perfeitamente como usar a função clamp, poderá também se interessar em saber como usar flexbox para fazer um elemento ocupar todo o espaço restante disponível.