Propriedade font-weight: Negrito e a 'grossura' da fonte

Saiba como aplicar negrito e controlar a espessura da fonte.

Depois de escolher a fonte (font-family) e o tamanho (font-size), você pode querer dar mais destaque a certas palavras ou frases. É aí que entra a propriedade font-weight. Ela define a grossura (ou peso) da fonte, permitindo que você use variações como negrito, extra-negrito, leve, etc.

A font-weight é crucial para criar hierarquia visual e enfatizar informações importantes no seu texto.

Pense na font-weight como a espessura da caneta que você usa para escrever. Você pode usar uma caneta mais fina para o texto normal e uma caneta mais grossa (negrito) para destacar palavras-chave.

Como usar a propriedade font-weight

A sintaxe é simples: você seleciona o elemento e atribui um valor à propriedade font-weight.

Sintaxe:

seletor {
  font-weight: valor;
}

Valores possíveis:

Existem duas categorias principais de valores: palavras-chave e valores numéricos.

1. Palavras-chave

  • normal (padrão): Corresponde ao peso 400. É o peso padrão da fonte.
  • bold: Corresponde ao peso 700. É o valor mais comum para negrito.
  • lighter: Torna a fonte um peso mais leve que o do elemento pai (se disponível).
  • bolder: Torna a fonte um peso mais pesado que o do elemento pai (se disponível).

2. Valores Numéricos

A maioria das fontes modernas suporta uma escala numérica de pesos, geralmente de 100 a 900, em múltiplos de 100.

  • 100: Thin (Fina)
  • 200: Extra Light (Extra Leve)
  • 300: Light (Leve)
  • 400: Normal / Regular
  • 500: Medium (Média)
  • 600: Semi Bold / Demi Bold (Semi Negrito)
  • 700: Bold (Negrito)
  • 800: Extra Bold (Extra Negrito)
  • 900: Black / Heavy (Preta / Pesada)

Importante: Nem todas as fontes possuem todos esses pesos. Se uma fonte não tiver um peso específico (ex: 300), o navegador tentará simular ou usar o peso mais próximo disponível. Por exemplo, se você pedir font-weight: 300; e a fonte só tiver normal (400) e bold (700), o navegador pode usar o normal.

Exemplo Prático:

Considere o seguinte HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Font Weight</title>
  <style>
    body {
      font-family: 'Roboto', sans-serif; /* Usando uma web font que suporta vários pesos */
      margin: 20px;
    }

    /* Importando a fonte Roboto com vários pesos do Google Fonts (veremos em lição futura) */
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

    p {
      font-size: 1.1rem;
      margin-bottom: 10px;
    }

    .thin {
      font-weight: 100; /* Fina */
    }

    .light {
      font-weight: 300; /* Leve */
    }

    .normal {
      font-weight: normal; /* Padrão (400) */
    }

    .medium {
      font-weight: 500; /* Média */
    }

    .semibold {
      font-weight: 600; /* Semi Negrito */
    }

    .bold {
      font-weight: bold; /* Negrito (700) */
    }

    .extrabold {
      font-weight: 800; /* Extra Negrito */
    }

    .black {
      font-weight: 900; /* Preta / Pesada */
    }

    strong {
      font-weight: bold; /* O elemento <strong> já tem font-weight: bold por padrão */
    }

    .parent {
      font-weight: 400; /* Peso normal */
    }

    .child-lighter {
      font-weight: lighter; /* Mais leve que o pai (se disponível) */
    }

    .child-bolder {
      font-weight: bolder; /* Mais pesado que o pai (se disponível) */
    }
  </style>
</head>
<body>
  <p class="thin">Este é um texto com peso 100 (Thin).</p>
  <p class="light">Este é um texto com peso 300 (Light).</p>
  <p class="normal">Este é um texto com peso normal (400).</p>
  <p class="medium">Este é um texto com peso 500 (Medium).</p>
  <p class="semibold">Este é um texto com peso 600 (Semi Bold).</p>
  <p class="bold">Este é um texto com peso bold (700).</p>
  <p class="extrabold">Este é um texto com peso 800 (Extra Bold).</p>
  <p class="black">Este é um texto com peso 900 (Black).</p>

  <p>Texto normal com uma palavra <strong>em negrito</strong> usando a tag HTML.</p>

  <div class="parent">
    <p>Este é o texto pai (peso 400).</p>
    <p class="child-lighter">Este texto é <span>lighter</span> que o pai.</p>
    <p class="child-bolder">Este texto é <span>bolder</span> que o pai.</p>
  </div>
</body>
</html>

Resultado: Observe as diferentes espessuras do texto. Para ver os valores numéricos funcionando perfeitamente, é ideal usar uma fonte que os suporte, como a Roboto importada no exemplo.

Boas Práticas:

  • Use com moderação: O negrito excessivo pode diminuir o impacto e dificultar a leitura.
  • Hierarquia: Use diferentes pesos para criar uma hierarquia visual clara, guiando o olho do leitor.
  • Acessibilidade: Certifique-se de que o contraste entre o texto e o fundo ainda seja bom, mesmo com pesos de fonte mais leves.
  • Disponibilidade da Fonte: Se você estiver usando pesos específicos (ex: 300, 500, 600, 800, 900), certifique-se de que a fonte que você está usando (seja uma web font ou uma fonte do sistema) realmente possui esses pesos. Caso contrário, o navegador tentará simular, o que pode não ter o resultado desejado. Ao importar web fonts (como do Google Fonts), você geralmente precisa especificar quais pesos deseja carregar.

A propriedade font-weight é uma ferramenta poderosa para adicionar ênfase e estrutura ao seu conteúdo textual, melhorando a legibilidade e o design geral da sua página.