Tipografia web brasileira e a fonte Rawline do governo federal
No Brasil, o texto de corpo web se situa entre 16 e 18px, com interlineado de 1,5 para leitura confortavel em tela. O governo federal brasileiro adotou a fonte Rawline em 2021 como tipografia principal do sistema de identidade visual federal, substituindo a Calibri em documentos oficiais. Em projetos web privados, a Quarta justa (1.333) e a Terca maior (1.250) sao as razoes mais usadas por equipes de design no Brasil. Com mais de 70% dos acessos web feitos pelo celular no Brasil, a validacao da escala em dispositivos moveis e tao importante quanto no desktop.
As configuracoes personalizadas do Tailwind CSS aceitam os valores gerados diretamente sob a chave fontSize no tailwind.config.js. O modo escuro esta crescendo rapidamente em apps brasileiros; as razoes de escala permanecem as mesmas no modo escuro, mas o interlineado pode ser ligeiramente maior (1.6) para melhorar a legibilidade de texto claro sobre fundo escuro.
Razoes de escala comuns
| Razao | Nome | Recomendado para |
|---|---|---|
| 1.125 | Segunda maior | Interfaces densas, paineis de dados |
| 1.250 | Terca maior | Aplicativos, sistemas de design |
| 1.333 | Quarta justa | Sites generalistas, blogs |
| 1.618 | Numero de ouro | Editorial, landing pages, marketing |
Limites das escalas tipograficas matematicas
Uma escala matematica assegura proporcoes coerentes , nao garante harmonia visual em todas as tipografias. Fontes com altura de x elevada (Inter, Roboto) parecem maiores no mesmo valor em px do que fontes com altura de x reduzida (Garamond). Teste sempre a escala gerada com a fonte real escolhida e em diferentes niveis de zoom, especialmente em telas moveis. Os valores sao um ponto de partida; o ajuste optico fino continua sendo parte do trabalho tipografico.
rem preferido na comunidade dev BR
A comunidade frontend brasileira prefere rem a px para tamanhos de fonte: rem respeita o tamanho de base configurado pelo usuario no navegador, um requisito de acessibilidade (WCAG 1.4.4 , Redimensionamento de Texto). Use clamp(min, preferido, max) para escala fluida responsiva: font-size: clamp(1rem, 2.5vw, 1.5rem).