Docs CSS exécutables : Font-weight CSS

Q: Comment mettre du texte en gras en CSS ?

Utilisez font-weight: bold; ou le nombre équivalent font-weight: 700; sur l'élément. Pour retirer le gras d'un titre ou d'un , définissez font-weight: normal; (400).

Q: font-weight bold est-il identique à 700 ?

Oui. bold se calcule en 700 et normal en 400, les deux formes donnent donc exactement le même rendu.

Q: Faut-il utiliser font-weight en CSS ou la balise ?

Utilisez quand les mots sont importants, pour un texte simplement présenté autrement, et font-weight pour le design visuel comme les boutons, les étiquettes et les titres. Les balises portent un sens ; la propriété ne concerne que l'apparence.

Comment mettre du texte en gras en CSS

font-weight définit l'épaisseur des lettres. bold (identique à 700) met le texte en gras, et normal (identique à 400) correspond au texte normal.

<!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>

Les titres, <th>,  et  sont en gras par défaut à cause de la feuille de style du navigateur, et font-weight: normal est donc la façon de retirer le gras. Pour savoir quand utiliser  ou  dans le HTML lui-même, voir le gras en HTML.

L'échelle numérique : de 100 à 900

Les nombres ont des noms standard que suivent les familles de polices :

Valeur	Nom courant
`100`	Thin
`200`	Extra Light
`300`	Light
`400`	Normal (Regular)
`500`	Medium
`600`	Semi Bold
`700`	Bold
`800`	Extra Bold
`900`	Black (Heavy)

Tout nombre de 1 à 1000 est valide, 450 et 650 sont donc autorisés aussi. Voir une différence dépend de la police : le navigateur ne peut dessiner que les graisses que la police possède réellement.

<!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 est la police d'interface du système d'exploitation, qui fournit en général de nombreuses graisses. Si chaque ligne ci-dessus ressemble à l'une de deux graisses seulement, votre police système n'a que le normal et le gras.

Pourquoi une graisse ne change rien

Une police est un ensemble de fichiers, souvent un par graisse. Quand la graisse exacte manque, le navigateur prend la plus proche qu'il possède :

Pour 500, il essaie 500, puis les graisses plus légères, puis les plus épaisses.
Pour 600 et au-delà, il essaie d'abord les graisses plus épaisses, puis les plus légères.
S'il n'existe aucun fichier gras, la plupart des navigateurs en simulent un en épaississant les lettres normales (gras synthétique).

Comparez une police qui a de nombreuses graisses avec serif, qui sur la plupart des systèmes n'a que le normal et le gras :

<!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>

Dans la colonne serif, 300 et 500 retombent en général sur le style normal et 600 sur le gras. C'est la réponse à la plupart des questions du type « font-weight ne fonctionne pas » : le CSS est correct, c'est la police qui n'a pas la graisse. Une police variable (un seul fichier avec un axe de graisse) dessine en douceur toutes les valeurs de sa plage.

bolder et lighter

bolder et lighter sont relatifs à la graisse dont l'élément hérite. Ils passent au groupe de graisse suivant au lieu d'ajouter une valeur fixe :

Graisse du parent	`bolder` donne	`lighter` donne
100 à 349	400	100
350 à 549	700	100
550 à 749	900	400
750 à 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>

Un schéma concret : une échelle de graisses en variables

Choisissez trois ou quatre graisses pour tout le site et donnez-leur un nom, au lieu de disperser des nombres :

: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); }

Erreurs courantes

S'attendre à ce que chaque nombre soit différent. Seules les graisses contenues dans la police s'affichent distinctement.
Utiliser  pour le libellé d'un bouton. Stylisez le bouton avec font-weight ; gardez  et  pour le texte.
Mettre le nombre entre guillemets. font-weight: "700" est invalide et ignoré. Écrivez font-weight: 700.
Du gras partout pour insister. Quand tout est en gras, rien ne ressort. Gardez le texte courant à 400.
Des graisses fines pour du petit texte. De 100 à 300 en petite taille, le texte est difficile à lire, surtout sur des fonds peu contrastés.

Questions fréquentes

Comment mettre du texte en gras en CSS ?

Utilisez font-weight: bold; ou le nombre équivalent font-weight: 700; sur l'élément. Pour retirer le gras d'un titre ou d'un , définissez font-weight: normal; (400).

Quelles sont les valeurs de font-weight ?

Des nombres de 1 à 1000, écrits en général par centaines : 100 thin, 200 extra light, 300 light, 400 normal, 500 medium, 600 semibold, 700 bold, 800 extra bold, 900 black. Les mots-clés normal et bold valent 400 et 700, et bolder et lighter sont relatifs au parent.

font-weight bold est-il identique à 700 ?

Oui. bold se calcule en 700 et normal en 400, les deux formes donnent donc exactement le même rendu.

Pourquoi font-weight 500 ou 600 ressemble-t-il à normal ou bold ?

La police n'a pas cette graisse. Quand une police ne fournit que 400 et 700, le navigateur prend le fichier disponible le plus proche : 500 s'affiche comme 400 et 600 comme 700. Chargez une police avec plus de graisses ou une police variable.

Faut-il utiliser font-weight en CSS ou la balise ?

Utilisez  quand les mots sont importants,  pour un texte simplement présenté autrement, et font-weight pour le design visuel comme les boutons, les étiquettes et les titres. Les balises portent un sens ; la propriété ne concerne que l'apparence.

Concepts liés