Propriété CSS font-weight – Valeurs, conseils et exemples

La propriété CSS font-weight définit l'épaisseur ou la graisse des caractères d'une police. Vous pouvez spécifier la graisse avec un mot-clé (normal, bold), un mot-clé relatif (bolder, lighter), ou une valeur numérique de 100 à 900.

Une police est généralement livrée avec plusieurs graisses distinctes sous forme de fichiers séparés. Le navigateur ne peut afficher que les graisses réellement fournies par la police. De nombreuses polices n'incluent que deux valeurs — normal (400) et bold (700) — ainsi, une demande de font-weight: 300 peut se rabattre sur la graisse disponible la plus proche plutôt que de produire une vraie variante légère. Les polices variables constituent l'exception : elles intègrent un axe de graisse continu et peuvent afficher n'importe quelle valeur sans fichiers séparés.

Cette page couvre les valeurs par mot-clé et numériques, la résolution de bolder / lighter, l'animation de la graisse, et ce qu'il faut attendre lorsqu'une graisse demandée n'est pas disponible.

Valeur initiale	normal
S'applique à	Tous les éléments. S'applique également à ::first-letter et ::first-line.
Hérité	Oui.
Animable	Oui.
Version	CSS1
Syntaxe DOM	`object.style.fontWeight = "bolder";`

Syntaxe

font-weight: normal | bold | bolder | lighter | <number> | initial | inherit;

Valeurs

Valeur	Description
`normal`	Graisse par défaut. Équivalent à `400`.
`bold`	Graisse grasse. Équivalent à `700`.
`bolder`	Un niveau plus épais que la graisse calculée de l'élément parent (voir le tableau ci-dessous).
`lighter`	Un niveau plus léger que la graisse calculée de l'élément parent (voir le tableau ci-dessous).
`100`–`900`	Graisse numérique par paliers de 100 — du plus fin (100) au plus épais (900).
`initial`	Réinitialise à la valeur initiale de la propriété (`normal`).
`inherit`	Hérite de la graisse calculée de l'élément parent.

Exemple de base

L'exemple ci-dessous applique bolder à un paragraphe pour qu'il apparaisse plus épais que le texte du corps environnant.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.bolder {
        font-weight: bolder;
      }
    </style>
  </head>
  <body>
    <h2>Font-weight property example</h2>
    <p class="bolder">We used a bolder text here.</p>
  </body>
</html>

Essayez vous-même »

Résultat

Toutes les valeurs par mot-clé et numériques

L'exemple ci-dessous place chaque valeur principale côte à côte pour vous permettre de les comparer visuellement.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.normal {
        font-weight: normal;
      }
      p.lighter {
        font-weight: lighter;
      }
      p.bold {
        font-weight: bold;
      }
      p.bolder {
        font-weight: bolder;
      }
      p.fweight {
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <h2>Font-weight property example</h2>
    <p class="normal">We used normal weight here.</p>
    <p class="lighter">This is a lighter weight.</p>
    <p class="bold">We used bold weight here.</p>
    <p class="bolder">We used a bolder text here.</p>
    <p class="fweight">We set font-weight 600 here.</p>
  </body>
</html>

Essayez vous-même »

L'échelle de graisse numérique

Les valeurs numériques vont de 100 (le plus fin) à 900 (le plus épais) par paliers de 100. Chaque palier porte un nom conventionnel utilisé par les créateurs de polices :

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

normal correspond à 400 et bold correspond à 700, ces paires mot-clé/nombre sont donc toujours interchangeables. Utilisez une valeur numérique lorsque vous avez besoin d'un contrôle plus fin — par exemple font-weight: 500 donne un titre « medium » plus épais que le texte courant mais plus léger qu'un titre entièrement gras.

Lorsque la police ne dispose pas de la graisse demandée

Si la police ne fournit pas la graisse exacte demandée, le navigateur se rabat sur la graisse la plus proche disponible. C'est pourquoi font-weight: 100 et font-weight: 300 peuvent sembler identiques lorsque la police ne propose que 400 (Regular) et 700 (Bold). Chargez ou déclarez toujours les graisses spécifiques utilisées par votre design — consultez @font-face et font-display pour savoir comment procéder efficacement.

Comment bolder et lighter sont résolus

bolder et lighter sont relatifs à la graisse héritée de l'élément parent. Ils n'ajoutent ni ne soustraient simplement 100. Au lieu de cela, le navigateur ramène la graisse calculée du parent à une échelle à trois niveaux plus grossière avant d'appliquer le palier :

Graisse héritée	`bolder` devient	`lighter` devient
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Cela signifie que l'imbrication de deux éléments bolder ne continue pas à s'alourdir indéfiniment — une fois que vous atteignez 900, la valeur reste là.

<!DOCTYPE html>
<html>
  <head>
    <title>bolder resolution example</title>
    <style>
      .parent {
        font-weight: 400; /* normal */
      }
      .child {
        font-weight: bolder; /* resolves to 700 */
      }
      .grandchild {
        font-weight: bolder; /* resolves to 900, then stops */
      }
    </style>
  </head>
  <body>
    <p class="parent">
      Parent at normal (400).
      <span class="child">
        Child becomes bold (700).
        <span class="grandchild">Grandchild becomes black (900).</span>
      </span>
    </p>
  </body>
</html>

Animation de font-weight

font-weight est animable, vous pouvez donc effectuer une transition fluide entre les graisses avec les transitions CSS ou les animations. L'interpolation fluide ne fonctionne qu'avec les polices variables, car les polices statiques n'ont que des fichiers de graisse discrets. Sur une police statique, le navigateur bascule vers la graisse disponible la plus proche au milieu de la transition.

.heading {
  font-weight: 400;
  transition: font-weight 0.3s ease;
}

.heading:hover {
  font-weight: 700;
}

Pour des changements de graisse continus et fluides — par exemple un effet de survol qui glisse du fin au gras — utilisez une police variable avec la propriété font-variation-settings :

.heading {
  /* "wght" is the weight axis on variable fonts */
  font-variation-settings: "wght" 400;
  transition: font-variation-settings 0.3s ease;
}

.heading:hover {
  font-variation-settings: "wght" 700;
}

Conseils et accessibilité

Chargez les graisses que vous utilisez. Lorsque vous importez des polices depuis Google Fonts ou un autre service, demandez chaque graisse explicitement dans l'URL ou le descripteur @font-face. Si une graisse n'est pas chargée, le navigateur synthétise un faux gras souvent de moins bonne qualité que la vraie variante.
N'utilisez pas la graisse seule pour transmettre du sens. Le texte en gras est uniquement un repère visuel. Pour du texte qui doit porter une importance sémantique, utilisez <strong> (qui applique font-weight: bold par défaut) afin que les technologies d'assistance puissent communiquer l'emphase.
Surveillez le contraste sur les graisses légères. Les graisses 100–300 réduisent l'épaisseur des traits et peuvent tomber en dessous des seuils de contraste WCAG, notamment aux petites tailles et sur des fonds colorés. Vérifiez les ratios de contraste avec l'outil de sélection de couleurs et conservez le texte courant à 400 ou plus.
Préférez les valeurs numériques dans les systèmes de design. Les mots-clés comme bold sont grossiers. Utiliser 700 rend l'intention explicite et plus facile à auditer.

Propriétés associées

font — raccourci qui définit font-weight avec le style, la taille et la famille en une seule déclaration.
font-style — contrôle les variantes italique et oblique.
font-size — définit la taille du texte.
font-family — choisit la police utilisée.
@font-face — déclare les polices personnalisées et leurs plages de graisses disponibles.
font-display — contrôle la façon dont le navigateur affiche le texte pendant le chargement d'une police personnalisée.

Pratique

Que contrôle la propriété CSS 'font-weight' ?

Elle spécifie le poids ou l'épaisseur de la police.Elle spécifie le style de la police.Elle définit comment les extrémités des lignes sont dessinées lorsque les polices sont tracées en contour.Elle détermine si le texte est affiché en gras ou en poids normal.Elle détermine la largeur des tabulations dans le texte.

Graisse héritée	`bolder` devient	`lighter` devient
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Graisse héritée	`bolder` devient	`lighter` devient
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700

Graisse héritée	`bolder` devient	`lighter` devient
100	400	100
200	400	100
300	400	100
400	700	100
500	700	100
600	900	400
700	900	400
800	900	700
900	900	700