Esta página foi traduzida com auxílio de IA. O original em inglês é a versão de referência.
A orientação de 2005 sobre peso era compacta e correta: componha o texto em pesos do regular ao levemente negrito; evite tipos finos, cujos traços carregam contraste de menos para leitores com baixa visão, e evite tipos pesados a pretos, cujos olhos fechados sufocam a legibilidade para todos. Vinte anos depois, o alvo não se moveu. O que mudou foi tudo ao redor dele — o peso agora é uma variável contínua, e não um cardápio de dois ou três cortes, as interfaces escuras tornaram o peso dependente de contexto, e a moda passou boa parte do período puxando a tipografia de interface exatamente na direção contra a qual este capítulo adverte.
O que mudou desde 2005
Em 2005, o peso era uma escolha discreta. Uma família era distribuída como regular e negrito, talvez light e black, e o designer escolhia um. As fontes variáveis dissolveram essa restrição: o eixo wght expõe o peso como um contínuo, tipicamente de 100 a 900, endereçável do CSS com font-weight ou font-variation-settings. "Do regular ao levemente negrito" já não é um solavanco de 400 para 700 — pode ser 430 para o texto corrido no modo claro, 380 sobre fundo escuro, 500 para um rótulo pequeno que precisa de reforço. A recomendação sobrevive; a precisão com que pode ser executada é nova.
Algumas famílias vão além e expõem um eixo de grade (GRAD), convenção popularizada por famílias como a Roboto Flex do Google. O grade muda a espessura do traço sem mudar as larguras das letras, então ajustá-lo não refaz o fluxo do texto. Essa distinção importa sempre que o peso precisa responder ao contexto — modo escuro, estados de hover, diferenças de renderização — sem deslocar o layout.
A segunda mudança é a ascensão das interfaces escuras como modo de primeira classe, consultável via prefers-color-scheme. Peso e polaridade interagem, e as diretrizes de 2005 — escritas em uma era de texto escuro-sobre-claro quase universal — nunca precisaram tratar disso.
Modo escuro e compensação de peso
Texto claro sobre fundo escuro lê-se mais pesado do que o mesmo texto em polaridade positiva. Os traços claros parecem inchar contra o entorno escuro — o efeito é comumente descrito pela halação, o espalhamento da luz a partir das áreas claras, e é pronunciado em telas emissivas e para leitores com astigmatismo ou condições de dispersão de luz. Um tipo afinado para parecer certo em escuro-sobre-claro parecerá levemente inflado e borrado em claro-sobre-escuro; os olhos das letras se apertam e, em corpos pequenos, as letras começam a entupir.
A compensação prática é reduzir levemente o peso no modo escuro. Com um eixo wght variável, baixar o texto corrido na ordem de 20 a 50 unidades — de 400 em direção a 370, digamos — restaura a densidade de traço pretendida. Onde existe um eixo GRAD, ele é a ferramenta melhor, já que um grade negativo afina os traços sem refluxo; esse é precisamente o caso de uso para o qual os grades foram projetados. As famílias estáticas não oferecem boa alavanca, o que por si só é um argumento a favor das fontes variáveis em qualquer produto comprometido com os dois esquemas de cor.
O modo escuro carrega um segundo ajuste relacionado: texto branco puro sobre preto puro maximiza a halação. Primeiros planos levemente suavizados (off-white) e superfícies escuras elevadas reduzem o ofuscamento sem sacrificar significativamente o contraste. A compensação de peso e a suavização de valores trabalham juntas.
O problema dos pesos finos
A revisão mais forte que este capítulo faz não é à regra, mas à sua urgência. Em 2005, o tipo fino era raro porque não conseguia ser renderizado — uma haste finíssima em uma tela de 96 DPI simplesmente desaparecia. As telas de alta densidade tornaram os pesos ultraleves renderizáveis, e a moda veio logo atrás: os pesos thin e extralight viraram atalho para elegância e modernidade em branding, interfaces e texto grande de exibição.
Renderizável não é legível. Um traço de peso 200 que sobrevive na tela de alta densidade do designer degrada-se em monitores de densidade padrão, esmaece ainda mais sob brilho de tela baixo ou filtragem noturna agressiva e, para leitores com baixa visão, pode cair de vez abaixo do limiar de contraste de traço útil. O tipo fino é uma aposta empilhada de que todo leitor tem acuidade excelente, uma tela premium e brilho máximo. As razões de contraste medidas também superestimam o desempenho real do tipo fino: a fórmula das WCAG compara as cores de primeiro plano e fundo, mas não considera a largura do traço, de modo que um tipo de peso 100 pode tecnicamente passar em 4,5:1 apresentando muito menos contraste utilizável do que um tipo de peso 400 nas mesmas cores. A pesquisa do APCA que alimenta o rascunho das WCAG 3.0 ataca exatamente essa lacuna — seu modelo trata contraste, corpo e peso como variáveis que interagem, atribuindo a textos mais finos e menores requisitos mais rigorosos de contraste de luminosidade. Essa direção confirma o instinto de 2005: o peso é parte do contraste, diga ou não a fórmula atual.
O outro polo precisa de menos rediscussão. Os pesos pesados e pretos continuam fechando os olhos das letras e fundindo formas nos corpos de texto; permanecem ferramentas de exibição. O negrito conserva seu papel legítimo de ênfase e hierarquia — e as próprias WCAG reconhecem a contribuição do negrito ao baixar o limiar de texto grande para 14pt no negrito contra 18pt no regular.
O peso na prática
Uma política moderna de peso é assim. O texto corrido fica entre aproximadamente 400 e 500, escolhido por família — alguns tipos são desenhados leves no 400 e leem melhor a 450. A ênfase sobe de 200 a 300 unidades em relação ao peso do corpo, para ser inconfundível em vez de ambígua. O modo escuro subtrai uma quantia modesta via wght ou, de preferência, GRAD. Nada abaixo de cerca de 300 aparece nos corpos de texto, e qualquer coisa abaixo disso em corpos de exibição é conferida em uma tela de densidade padrão com brilho realista. Onde fontes variáveis não estão disponíveis, aplicam-se os cortes estáticos mais próximos desses alvos, e a compensação do modo escuro passa a ser a suavização de cor.
Em CSS
body { font-weight: 400; }
strong { font-weight: 600; } /* semibold beats bold for emphasis */
@media (prefers-color-scheme: dark) {
/* light-on-dark reads heavier — pull back with a variable axis */
body { font-variation-settings: "GRAD" -20; }
}Recomendações
- Mantenha o texto corrido na faixa 400–500, afinado por tipo com o eixo variável wght quando disponível.
- Reduza levemente o peso no modo escuro; prefira um eixo GRAD quando a família o oferecer, já que o grade não refaz o fluxo do texto.
- Suavize os pares branco puro sobre preto no modo escuro para limitar a halação.
- Trate pesos abaixo de aproximadamente 300 como apenas de exibição, e verifique-os em telas de densidade padrão; nunca os use em texto contínuo.
- Evite pesos pesados a pretos nos corpos de texto; use o negrito como um degrau deliberado de ênfase de 200–300 unidades acima do peso do corpo.
- Não deixe uma razão de contraste WCAG aprovada desculpar traços finos — o peso é parte do contraste efetivo, como o trabalho do APCA por trás do rascunho das WCAG 3.0 torna explícito.