Uma fórmula para tamanho de fonte responsivo

• Muitos sites, como New York Times, Medium e Substack, usam breakpoints (como 768px) e mudam o tamanho da fonte com base nisso (1.125 rem e 1.25rem)
• Com calc do CSS, é possível escrever valores parecidos: calc(1.0625rem + 0.2604vw)
• Arredondando isso, dá para representar como 1rem + 0.25vw. Por isso, agora eu uso o CSS abaixo na maioria dos sites

:root {  
  font-size: calc(1rem + 0.25vw);  
}  

[yanggitak]

Para implementar no PC exatamente como no layout, acho que talvez também seja preciso incluir na fórmula uma variável CSS que exclua a largura da barra de rolagem. Pelo que sei, a unidade vw considera como referência a largura incluindo a barra de rolagem.

Quando for necessário aumentar ou reduzir na mesma proporção até as margens dos elementos ao redor, como na imagem inteira, talvez também valha a pena consultar a forma de configuração de fonte do site abaixo. No caso do Galaxy Fold (320px) ou de monitores de alta resolução, também parece ok aplicar uma limitação adequada com breakpoints.
https://amerimnos.github.io/coding-playground/reponsive-css-trick-vw/

[cometkim]

É uma aproximação útil, mas é difícil substituir completamente os breakpoints realmente usados em Fluid Typography.

Normalmente, clamp(min_rem, calc_relative_vw, max_rem) é aplicado de forma diferente em cada breakpoint, de acordo com a legibilidade do conteúdo e o formato do contêiner; se você tentar resolver tudo com uma única fórmula, fica mais difícil dar conta de form factors fora do comum.

Por exemplo, ambientes como janelas pop-up do Android, monitores 21:9 ou HMDs

[nemorize]

Não conheço muito bem coisas como pop-ups do Android ou HMD...
Mas para formatos como 21:9, não ficaria bom usar vh junto também?
Algo como calc(1rem + min(1vw, 1vh) * 0.25).