Uma fórmula para tamanho de fonte responsivo

Respeitando as Preferências de Fonte do Usuário vs. Controle do Designer

• Muitos argumentam que os sites não devem substituir o tamanho de fonte raiz: usuários que ajustam o tamanho do texto no navegador (ou o tamanho mínimo) esperam que isso seja respeitado.
• Outros sustentam que a maioria dos usuários nunca mexe nas configurações de font-size, então padrões responsivos “razoáveis” os ajudam e não prejudicam significativamente usuários avançados.
• Contra-argumento: padrões ruins e baixa descobribilidade são um problema do fornecedor do navegador, não algo que cada site deva “corrigir” com escala personalizada.
• Há debate sobre um terceiro grupo: pessoas que definem o tamanho da fonte uma vez por dispositivo e nunca mais ajustam; alguns as veem como importantes, outros como poucas demais para serem prioridade.

Escala Baseada na Viewport e Limitação

• Vários comentaristas criticam a escala do tamanho da fonte com a largura da viewport, chamando os pixels CSS de já “virtuais” e alertando para texto gigantesco em monitores ultrawide.
• Outros consideram aceitável uma escala modesta baseada na viewport, se rigidamente limitada, por exemplo, clamp(min, fluid, max) para evitar extremos.
• A escala linear introduz encargos de teste: em vez de verificar alguns pontos de quebra, é preciso considerar muitas larguras.

Unidades: rem, em, px e o Truque dos 62,5%

• Amplo consenso: use rem/em para texto para que acompanhe as preferências do usuário; evite px codificado no elemento raiz.
• em vs rem: rem para escala global consistente; em é útil quando elementos (como títulos) devem escalar em relação ao seu contexto local.
• O truque html { font-size: 62.5%; } (para tratar rem como “10px”) é fortemente criticado como conceitualmente errado e frágil; os defensores dizem que ele pode continuar proporcional se o texto do body for redimensionado adequadamente.

Sistemas Tipográficos Mais Amplos e Ferramentas

• Vários enfatizam que tipografia responsiva deve incluir altura de linha, espaçamento e grids de layout, e não apenas font-size.
• Ferramentas como Utopia, escalas modulares, RFS e helpers Sass para clamp() são recomendadas para automatizar escalas de tipo e espaçamento.

Acessibilidade e Necessidades de Visão no Mundo Real

• Um comentarista com deficiência visual destaca necessidades que vão além do tamanho: traços em negrito, alto contraste e substituição de temas “estéticos” de baixo contraste.
• Outros sugerem mitigar tipografia ruim com extensões de navegador, modo leitor e CSS do usuário, refletindo frustração com o fato de a web raramente honrar o controle do usuário por padrão.