Docs executáveis de CSS: Font-weight

Q: Como deixar um texto em negrito no CSS?

Use font-weight: bold; ou o número equivalente font-weight: 700; no elemento. Para tirar o negrito de um título ou de um , defina font-weight: normal; (400).

Q: font-weight bold é o mesmo que 700?

Sim. bold é calculado como 700 e normal como 400, então as duas formas ficam idênticas na tela.

Q: Devo usar font-weight no CSS ou a tag ?

Use quando as palavras são importantes, para um texto que só tem um estilo diferente e font-weight para o design visual, como botões, rótulos e títulos. As tags carregam significado; a propriedade é só aparência.

Como deixar o texto em negrito no CSS

font-weight define a espessura das letras. bold (o mesmo que 700) deixa o texto em negrito, e normal (o mesmo que 400) é o texto regular.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Font weight</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 6px 0; }
    .normal { font-weight: normal; }
    .bold { font-weight: bold; }
    .heavy { font-weight: 900; }
    h2.plain { font-weight: normal; }
  </style>
</head>
<body>
  <p class="normal">font-weight: normal (400)</p>
  <p class="bold">font-weight: bold (700)</p>
  <p class="heavy">font-weight: 900</p>
  <h2 class="plain">A heading with font-weight: normal</h2>
</body>
</html>

Títulos, <th>,  e  já vêm em negrito por causa da folha de estilo do próprio navegador, então font-weight: normal é o jeito de tirar o negrito. Para saber quando usar  ou  no HTML, veja negrito no HTML.

A escala numérica: de 100 a 900

Os números têm nomes padrão que as famílias de fontes seguem:

Valor	Nome comum
`100`	Thin
`200`	Extra Light
`300`	Light
`400`	Normal (Regular)
`500`	Medium
`600`	Semi Bold
`700`	Bold
`800`	Extra Bold
`900`	Black (Heavy)

Qualquer número de 1 a 1000 é válido, então 450 e 650 também são permitidos. Se você vai ver diferença depende da fonte: o navegador só consegue desenhar os pesos que a fonte realmente tem.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Weight scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 22px; color: #111827; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <p style="font-weight: 100;">100 Thin</p>
  <p style="font-weight: 200;">200 Extra Light</p>
  <p style="font-weight: 300;">300 Light</p>
  <p style="font-weight: 400;">400 Normal</p>
  <p style="font-weight: 500;">500 Medium</p>
  <p style="font-weight: 600;">600 Semi Bold</p>
  <p style="font-weight: 700;">700 Bold</p>
  <p style="font-weight: 800;">800 Extra Bold</p>
  <p style="font-weight: 900;">900 Black</p>
</body>
</html>

system-ui é a fonte da interface do sistema operacional, que costuma trazer muitos pesos. Se todas as linhas acima parecem ter um de dois pesos, a fonte do seu sistema só tem regular e bold.

Por que um peso não muda nada

Uma fonte é um conjunto de arquivos, muitas vezes um por peso. Quando o peso exato não existe, o navegador escolhe o mais próximo que tiver:

Para 500, ele tenta 500, depois os pesos mais leves, depois os mais pesados.
Para 600 ou mais, ele tenta primeiro os pesos mais pesados, depois os mais leves.
Se não houver nenhum arquivo bold, a maioria dos navegadores simula um engrossando as letras regulares (negrito sintético).

Compare uma fonte com muitos pesos com serif, que na maioria dos sistemas só tem regular e bold:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Missing weights</title>
  <style>
    body { font-size: 22px; color: #111827; }
    .col { display: inline-block; vertical-align: top; margin-inline-end: 32px; }
    .sans { font-family: system-ui, sans-serif; }
    .serif { font-family: Georgia, serif; }
    p { margin: 4px 0; }
  </style>
</head>
<body>
  <div class="col sans">
    <p style="font-weight: 300;">300 sans</p>
    <p style="font-weight: 500;">500 sans</p>
    <p style="font-weight: 600;">600 sans</p>
  </div>
  <div class="col serif">
    <p style="font-weight: 300;">300 serif</p>
    <p style="font-weight: 500;">500 serif</p>
    <p style="font-weight: 600;">600 serif</p>
  </div>
</body>
</html>

Na coluna serif, 300 e 500 normalmente caem na face regular e 600 na face bold. Essa é a resposta para a maioria das dúvidas de "font-weight não funciona": o CSS está certo, falta o peso na fonte. Uma fonte variável (um arquivo com um eixo de peso) desenha qualquer valor dentro da sua faixa de pesos de forma contínua.

bolder e lighter

bolder e lighter são relativos ao peso que o elemento herda. Eles pulam para o próximo grupo de peso em vez de somar um valor fixo:

Peso do pai	`bolder` dá	`lighter` dá
100 a 349	400	100
350 a 549	700	100
550 a 749	900	400
750 a 900	900	700

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bolder and lighter</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 20px; color: #111827; }
    .bolder { font-weight: bolder; }
    .lighter { font-weight: lighter; }
  </style>
</head>
<body>
  <p style="font-weight: 400;">400 with <span class="bolder" id="a">bolder</span> and <span class="lighter" id="b">lighter</span></p>
  <p style="font-weight: 700;">700 with <span class="bolder" id="c">bolder</span> and <span class="lighter" id="d">lighter</span></p>
  <p id="out"></p>
  <script>
    const w = (id) => getComputedStyle(document.getElementById(id)).fontWeight;
    document.getElementById('out').textContent =
      'computed: ' + w('a') + ', ' + w('b') + ', ' + w('c') + ', ' + w('d');
  </script>
</body>
</html>

Padrão do dia a dia: uma escala de pesos em variáveis

Escolha três ou quatro pesos para o site inteiro e dê nome a eles, em vez de espalhar números:

:root {
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
}
body   { font-weight: var(--weight-regular); }
button { font-weight: var(--weight-medium); }
h1, h2 { font-weight: var(--weight-bold); }

Erros comuns

Esperar que todo número pareça diferente. Só os pesos que a fonte contém aparecem distintos.
Usar  no rótulo de um botão. Estilize o botão com font-weight; deixe  e  para o texto.
Colocar o número entre aspas. font-weight: "700" é inválido e ignorado. Escreva font-weight: 700.
Negrito para dar ênfase em tudo. Quando tudo está em negrito, nada se destaca. Mantenha o texto do corpo em 400.
Pesos finos em texto pequeno. De 100 a 300 em tamanhos pequenos fica difícil de ler, principalmente em fundos com pouco contraste.

Perguntas frequentes

Como deixar um texto em negrito no CSS?

Use font-weight: bold; ou o número equivalente font-weight: 700; no elemento. Para tirar o negrito de um título ou de um , defina font-weight: normal; (400).

Quais são os valores de font-weight?

Números de 1 a 1000, normalmente escritos em centenas: 100 thin, 200 extra light, 300 light, 400 normal, 500 medium, 600 semibold, 700 bold, 800 extra bold, 900 black. As palavras-chave normal e bold valem 400 e 700, e bolder e lighter são relativas ao pai.

font-weight bold é o mesmo que 700?

Sim. bold é calculado como 700 e normal como 400, então as duas formas ficam idênticas na tela.

Por que font-weight 500 ou 600 parece igual a normal ou bold?

A fonte não tem esse peso. Quando uma fonte só traz 400 e 700, o navegador escolhe o arquivo mais próximo disponível, então 500 aparece como 400 e 600 como 700. Carregue uma fonte com mais pesos ou uma fonte variável.

Devo usar font-weight no CSS ou a tag ?

Use  quando as palavras são importantes,  para um texto que só tem um estilo diferente e font-weight para o design visual, como botões, rótulos e títulos. As tags carregam significado; a propriedade é só aparência.

Conceitos relacionados