Dominando a Propriedade font-weight: Muito Além do Negrito Básico no CSS
Fala, dev! Tudo tranquilo? Se você está acompanhando nosso curso completo de HTML e CSS, já percebeu que o mundo do desenvolvimento web vai muito além de jogar elementos na tela de qualquer jeito. O design importa, e a tipografia é, sem dúvidas, a alma de uma interface bonita e profissional.
Hoje, vamos desmistificar uma propriedade que todo mundo acha que conhece, mas que esconde segredos fantásticos: o font-weight. Prepare sua xícara de café, porque nós vamos abandonar de vez a dependência daquele HTML amador e engessado e entrar no nível sênior de estilização de fontes.
O que é a propriedade font-weight no CSS?
A propriedade font-weight no CSS define a espessura (ou "peso") dos caracteres de um texto. A forma mais moderna de usá-la é aplicando valores nominais como bold e normal, ou adotando uma escala numérica avançada de 100 a 900 para controle tipográfico absoluto, separando a semântica do design visual.
A Evolução: Antes vs. Depois (Por que usar CSS?)
Se você estudou no nosso módulo básico, lembra da saudosa tag <b>, certo? Para deixar uma palavra em negrito, a gente simplesmente fazia assim no HTML antigo:
"Eu adoro codar em HTML e CSS!"
A treta disso: Imagina um site gigante com 50 páginas. Você encheu tudo de tags <b>. Aí, o cliente vira pra você e diz: "Achei esse negrito muito forte, não tem como deixar só um pouquinho mais fino?". Se você fez tudo no HTML "na mão", meus pêsames. Você terá um trabalho colossal.
A solução profissional (o seu "Depois") é usar a tag <strong> apenas quando o texto for realmente importante para a semântica e SEO, e usar o CSS com font-weight para controlar o peso de todo o seu site de um único arquivo central. Isso é poder!
Valores Nominais: O "bold" e o "normal"
Vamos começar pelo básico da sintaxe. O CSS possui dois valores fundamentais e muito fáceis de memorizar:
font-weight: bold;👉 Transforma o texto em negrito (equivale ao valor 700).font-weight: normal;👉 Tira qualquer negrito ou afinamento herdado, deixando a fonte no padrão do navegador (equivale ao valor 400).
Veja na prática como aplicamos isso em uma classe CSS:
/* Definindo nossas classes de peso de fonte */
.destaque-forte {
font-weight: bold;
color: #0f172a;
}
.texto-comum {
font-weight: normal;
}
<p>O CSS é uma linguagem de estilo <span class="destaque-forte">realmente importante</span> na criação de sites.</p>
<h3>Título H3 normal (que já é negrito), mas eu quero <span class="texto-comum">essa parte fina</span></h3>
O CSS é uma linguagem de estilo realmente importante na criação de sites.
Título H3 normal (que já é negrito), mas eu quero essa parte fina
A Escala Numérica Profissional: 100 a 900
Aqui é onde o amador se separa do Front-End Sênior. Os jornais modernos e as startups não usam apenas "negrito ou sem negrito". Eles usam nuances.
O CSS nos fornece uma escala que varia de 100 a 900 (em passos de 100):
100- Thin (Extrafina - quase um fio de cabelo)200- Extra Light300- Light (Leve)400- Regular / Normal (O peso padrão do navegador)500- Medium600- Semi Bold700- Bold (O nosso famoso negrito)800- Extra Bold900- Black / Heavy (Extremamente grossa)
⚠️ Atenção: O Falso Negrito (Faux Bold)
Não adianta colocar font-weight: 100; no seu CSS se você não carregou a variação extrafina dessa fonte (via Google Fonts, por exemplo). Se o peso não existir no arquivo da fonte, o navegador tentará esticar ou encolher a fonte nativa artificialmente, o que deixa o design embaçado e horrível.
Olha como fica o código quando queremos criar títulos com um design arrojado e moderno usando essa numeração:
.titulo-fino {
font-weight: 200; /* Requer fonte que suporte Extra Light */
font-size: 24px;
}
.titulo-black {
font-weight: 900; /* Peso máximo, ideal para banners hero */
font-size: 24px;
}
Pesos Relativos: bolder e lighter
Por fim, o CSS permite usar configurações "relativas". Ou seja, em vez de passar um número fixo, você manda o elemento olhar para o elemento pai dele e agir de acordo.
font-weight: bolder;👉 Fica mais forte/espesso que o elemento que o envolve (sobe na escala).font-weight: lighter;👉 Fica mais fraco/fino que o elemento que o envolve (desce na escala).
🛠️ Curiosidade: Fontes Variáveis (Variable Fonts)
Hoje em dia, com o avanço do CSS3, não precisamos baixar 9 arquivos diferentes de fontes para ter os 9 pesos. As Variable Fonts permitem que um único arquivo super leve assuma literalmente qualquer peso entre 1 e 1000. Dê uma olhada na documentação oficial da MDN Web Docs sobre fontes variáveis depois!
Perguntas Frequentes (FAQ)
Sempre rola aquela dúvida de iniciante, né? Respondi as mais comuns que o Google costuma me mostrar:
1. Qual a diferença entre as tags HTML <strong>, <b> e a propriedade font-weight?
A tag <b> é estilística (apenas deixa visualmente em negrito). A tag <strong> tem valor semântico, indicando aos leitores de tela e ao Google (SEO) que aquela palavra tem forte importância na frase. Já o font-weight é a propriedade CSS responsável exclusivamente pelo design visual (a grossura da fonte), sendo a melhor prática para layouts modernos.
2. Por que meu font-weight: 300 não está mudando nada na tela?
Isso acontece porque a família de fontes (font-family) que você declarou no projeto provavelmente não tem o corte de peso "300" (Light) carregado. Se você importar fontes do Google Fonts, certifique-se de marcar a caixinha correspondente ao peso 300 na hora de gerar o link do seu <head>.
3. Posso usar valores quebrados, como font-weight: 450?
Em tipografia tradicional web, os valores vão pulando de 100 em 100. Porém, com a introdução das Variáveis Fonts modernas no CSS, sim, é possível definir pesos totalmente exatos como 450 ou 512, desde que o arquivo da fonte ofereça suporte contínuo de eixos de variação (wght).
O que estudar a seguir (Jornada Progressiva)
Dominou o peso das fontes? Excelente! Para fechar o cerco na estilização de textos em CSS, recomendo fortemente que você confira estes próximos artigos da nossa trilha:
- [INSERIR LINK: Como usar Itálico com font-style] - A dupla perfeita para o negrito.
- [INSERIR LINK: Tamanho das fontes: PX, EM e REM] - Entenda as unidades relativas de medida.
- [INSERIR LINK: Centralização e Alinhamento de Texto no CSS] - A dor de cabeça de todo júnior.
Lembre-se: se você já se cansou de ficar "pescando" tutoriais e quer algo que te puxe do zero à maestria, nós já temos um curso completo de PHP. E se precisar de códigos de nível hard em linguagens como C e Java, o portal está recheado de materiais.
Nenhum comentário:
Postar um comentário