📘 Como deixar o texto em negrito com CSS?

Para deixar um texto em negrito com CSS, use font-weight: bold;. Com a demonstração e o código copiável abaixo, qualquer pessoa pode aplicar facilmente.

✅ Demonstração

Este é um texto normal, e esta parte está em negrito.

📋 Código para copiar e colar

<style>
  .bold-text {
    font-weight: bold;
  }
</style>

<p>Este é um texto normal, e <span class="bold-text">esta parte está em negrito</span>.</p>

✅ Copiado com sucesso!

🧠 Técnicas práticas para o uso do peso da fonte

font-weight: bold é uma propriedade CSS básica, porém poderosa, para criar hierarquia visual no texto. Quando usada corretamente, ela destaca com eficácia as partes importantes do conteúdo.

🎨 Variações de design

Além de bold, o font-weight pode ser especificado com valores numéricos de 100 a 900. Por exemplo, font-weight: 600 é considerado semi-negrito, e font-weight: 800 é extra-negrito. É importante observar que os pesos disponíveis variam de acordo com a família tipográfica utilizada.

✨ Técnicas avançadas de aplicação

Ao definir fontes personalizadas com a regra @font-face, você pode especificar o font-weight para carregar corretamente diferentes espessuras. Além disso, aplicar transition: font-weight 0.3s ease permite uma transição suave ao passar o mouse sobre os elementos.

⚠️ Considerações de acessibilidade

Ao usar texto em negrito, é essencial manter uma taxa de contraste de pelo menos 4.5:1. Evite depender apenas do peso da fonte para transmitir informações importantes — combine-o com outros elementos visuais. O uso excessivo de negrito pode prejudicar a legibilidade.

O uso do peso da fonte deve ser consistente em todo o sistema de design. Definir antecipadamente os pesos a serem usados em títulos, textos em destaque e botões ajuda a criar uma aparência visual coesa.