Rendre un mot plus gras pour le mettre en avant est un réflexe typographique vieux de plusieurs siècles, bien avant CSS. La propriété font-weight transpose ce réflexe sur le web, mais avec une subtilité que beaucoup découvrent trop tard : demander une graisse ne garantit pas de l'obtenir.
Cette propriété règle l'épaisseur des traits d'un texte, du plus fin au plus épais, et repose entièrement sur ce que la font-family chargée propose réellement. Une valeur qui fonctionne parfaitement avec une police peut ne produire aucun effet avec une autre.
Définition
font-weight accepte deux familles de valeurs : des mots-clés simples, normal et bold, ou une valeur numérique comprise entre 100 et 900, par pas de 100.
p {
font-weight: normal; /* équivalent à 400 */
}
strong {
font-weight: bold; /* équivalent à 700 */
}
.titre-fin {
font-weight: 300;
}normal et bold sont en réalité des raccourcis vers 400 et 700. Rien n'oblige à utiliser les mots-clés : écrire directement font-weight: 700; produit exactement le même résultat, et permet d'accéder à toutes les graisses intermédiaires que les mots-clés ne couvrent pas.
L'échelle numérique complète
L'échelle va de 100, la graisse la plus fine, à 900, la plus épaisse. Chaque palier correspond à un nom que l'on retrouve dans les catalogues de polices professionnelles, utile pour savoir quoi demander à un designer ou quel fichier télécharger.
| Valeur | Nom courant |
|---|---|
100 | Thin |
300 | Light |
400 | Normal / Regular |
500 | Medium |
600 | SemiBold |
700 | Bold |
900 | Black |
Avec une police dite variable, un seul fichier contient l'intégralité de cette plage, et le navigateur interpole en douceur entre chaque valeur, y compris des nombres comme 550 qui ne figurent dans aucun tableau. Avec une police classique, chaque graisse correspond en général à un fichier distinct, chargé séparément.
Le piège d'une graisse qui n'existe pas
Écrire font-weight: 600; ne provoque aucune erreur si la police chargée ne propose que le Regular et le Bold. Le navigateur ne refuse jamais la valeur : selon les cas, il affiche la graisse la plus proche disponible, ou reconstruit lui-même une fausse graisse en épaississant artificiellement les traits.
Cette fausse graisse recréée par le navigateur, parfois appelée faux gras, produit un rendu légèrement flou ou baveux, surtout visible sur les petites tailles de texte. C'est un symptôme fréquent : un texte qui semble correct en un coup d'œil, mais dont les lettres paraissent moins nettes que le reste de la page. La cause est presque toujours la même, une graisse demandée qui n'a pas été chargée.
La solution consiste à ne déclarer, via @font-face, que les graisses réellement utilisées dans la feuille de style, et à vérifier ensuite que chaque valeur de font-weight employée correspond à l'une d'elles. Un fichier de police par graisse chargée inutilement alourdit aussi le poids de la page pour rien.
Bonnes pratiques
Limitez le nombre de graisses différentes utilisées sur un même site, généralement deux ou trois suffisent : une graisse normale pour le texte courant, une plus épaisse pour les titres, éventuellement une plus fine pour un usage décoratif ponctuel. Chaque graisse supplémentaire est un fichier de plus à télécharger, et un risque de plus de tomber sur le piège du faux gras si elle n'est pas correctement chargée.
Questions fréquentes
Quelle est la différence entre bold et font-weight: 700 ?
Aucune en pratique : bold est un simple alias pour 700. Les deux écritures produisent un résultat identique, le choix entre l'une ou l'autre est purement une question de style d'écriture du code.
Pourquoi mon texte en gras ne change rien à l'affichage ?
C'est le signe presque certain que la police chargée n'embarque pas cette graisse. Vérifiez dans les outils de développement quelle police est réellement appliquée, et comparez avec les fichiers déclarés dans les règles @font-face du site.
Peut-on utiliser des valeurs comme 450 ou 550 ?
Oui, mais uniquement avec une police variable capable d'interpoler entre les paliers standards. Avec une police classique composée de fichiers séparés, une valeur intermédiaire non prévue se rabat simplement sur le fichier disponible le plus proche.
font-weight fonctionne-t-il sur n'importe quel élément ?
Techniquement oui, il s'applique à tout élément qui affiche du texte, mais son effet dépend toujours de la font-family en vigueur à cet endroit précis, qui peut différer d'un élément à l'autre selon l'Héritage CSS et les règles plus spécifiques de la feuille de style.