1. O Que E Font-Weight

A propriedade CSS font-weight controla a espessura visual dos glifos de uma fonte. Ela pode receber valores numericos de 100 a 900 (em multiplos de 100) ou palavras-chave como normal (equivalente a 400) e bold (equivalente a 700).

Nem toda fonte disponibiliza todos os nove pesos. Se um peso solicitado nao existir, o navegador aplica o algoritmo de correspondencia de font-weight, buscando o valor mais proximo disponível. Por isso, e fundamental carregar apenas os pesos que voce realmente vai usar.

2. A Escala de Pesos de 100 a 900

A nomenclatura dos pesos varia entre fontes, mas a convencao mais comum e: 100 Thin, 200 Extra Light, 300 Light, 400 Regular, 500 Medium, 600 Semi Bold, 700 Bold, 800 Extra Bold e 900 Black.

Em um design system bem estruturado, geralmente se define dois a tres pesos para o corpo do texto (Regular, Medium e Semi Bold) e um ou dois pesos para titulos (Bold e Extra Bold), evitando carregar a pagina com pesos desnecessarios.

3. Como Usar Google Fonts com Varios Pesos

Para carregar multiplos pesos de uma Google Font, use a sintaxe de eixo de peso na URL da API. Por exemplo, para Inter com todos os pesos: Inter:wght@100;200;300;400;500;600;700;800;900. Adicione display=swap para melhorar a experiencia enquanto a fonte carrega.

"Esta ferramenta gera automaticamente a URL e o @import corretos para qualquer combinacao de fonte e pesos, pronto para colar no seu CSS."

4. Performance e Carregamento

Cada peso de fonte adiciona bytes ao carregamento da pagina. Uma fonte com todos os 9 pesos pode adicionar 300KB ou mais ao bundle. Para otimizar: carregue apenas os pesos usados, use display=swap, considere fontes variaveis (variable fonts) que incluem todos os pesos em um unico arquivo compactado, e use font-display: optional para fontes nao criticas.

5. Combinacoes Tipograficas

A tipografia de alta qualidade geralmente usa duas fontes complementares: uma para titulos (heading) e outra para corpo de texto (body). A combinacao mais eficaz cria contraste visual sem conflito — por exemplo, uma serifa elegante para titulos com uma sans-serif legivel para o corpo, ou uma fonte geometrica com uma humanista.

• Contraste de estilo: serifa + sans-serif cria hierarquia visual clara
• Harmonia de proporcoes: escolha fontes com x-height similar para consistencia
• Limitacao: duas fontes sao suficientes para 95% dos projetos
• Variaveis: fontes variaveis permitem controle granular do peso sem multiplos arquivos

6. Perguntas Frequentes

Por que alguns pesos parecem identicos visualmente?

Quando uma fonte nao possui um determinado peso, o navegador usa o mais proximo disponivel. Por isso, 100 e 200 podem parecer identicos se a fonte so tiver pesos a partir de 300. Esta ferramenta exibe o que o navegador realmente renderiza.

A ferramenta funciona com fontes que nao sao do Google Fonts?

Atualmente a ferramenta utiliza a API do Google Fonts para carregar as fontes. Para fontes proprietarias ou de outros servicos, voce pode visualizar fontes que ja estao instaladas no seu sistema digitando o nome exato.