Mettre en gras en CSS : bold ne suffit pas si la police ne suit pas
Pour mettre du texte en gras en CSS, appliquez la déclaration font-weight: bold; à l’élément concerné. La valeur numérique 700 produit la même demande de graisse. Le résultat dépend toutefois de la police chargée et des règles déjà présentes dans votre page : voici les exemples à reprendre et les vérifications à effectuer.
Appliquer le gras à un paragraphe ou à quelques mots
La propriété CSS font-weight règle la graisse des caractères, autrement dit l’épaisseur de leurs traits. Elle ne modifie pas directement leur taille : pour cela, on utilise font-size. Pour commencer, une classe CSS permet de cibler précisément le texte à mettre en valeur.
Testez vos connaissances sur le texte en gras en CSS
Répondez aux six questions, puis validez pour découvrir votre score et les corrections.
Une classe réutilisable pour vos éléments HTML
Ajoutez cette règle dans votre feuille de styles : .texte-gras { font-weight: bold; }. Associez ensuite la classe au paragraphe voulu avec ce HTML :
<p class="texte-gras">Ce paragraphe apparaît en gras.</p>
La même classe peut servir sur un titre, un lien ou un élément de liste. Le point devant texte-gras appartient au sélecteur CSS ; il ne faut pas le recopier dans l’attribut HTML class. Cette séparation permet de modifier plusieurs éléments en changeant une seule règle.
Ne mettre en gras qu’une partie de la phrase
Pour une mise en valeur purement visuelle, entourez uniquement les mots concernés avec une balise span, puis appliquez votre classe :
<p>La livraison est <span class="texte-gras">offerte dès aujourd’hui</span>.</p>
Un style directement dans le HTML fonctionne aussi : <span style="font-weight: 700;">Texte en gras</span>. Cette solution convient à un essai ponctuel, mais une classe reste plus simple à maintenir. Dans WordPress, attribuez la classe au bloc dans ses réglages avancés, puis ajoutez la règle dans l’espace de CSS personnalisé disponible selon votre thème ou votre configuration.
Choisir entre bold, 700 et les autres valeurs
Bold et 700 sont équivalents ; normal et 400 le sont également. Les nombres permettent surtout de construire une hiérarchie plus nuancée : un sous-titre légèrement appuyé, un bouton bien visible ou une information secondaire moins dense.
| Valeur | Effet demandé | Usage courant |
|---|---|---|
| normal ou 400 | Graisse normale | Texte courant |
| 500 | Graisse intermédiaire | Libellé légèrement renforcé |
| 600 | Demi-gras, si disponible | Sous-titre ou bouton |
| bold ou 700 | Gras | Mise en valeur nette |
| 800 ou 900 | Graisse très forte, si disponible | Titre particulièrement marqué |
| lighter ou bolder | Graisse relative au parent | Variation dépendant du contexte |
Les valeurs classiques s’échelonnent de 100 à 900, généralement par centaines. Le CSS moderne accepte plus largement des valeurs numériques de 1 à 1000, notamment utiles avec les polices variables. Une valeur comme 650 peut donc être valide, sans garantir un dessin distinct si la police ne le propose pas.
Les mots-clés bolder et lighter ne correspondent pas simplement à une addition ou une soustraction de 100. Ils déterminent une graisse relative à celle héritée du parent, selon des paliers définis par CSS. Pour obtenir un rendu prévisible dans une interface, une valeur explicite comme 600 ou 700 est souvent préférable.
Si le gras ne change rien, vérifier la cascade et la police
La propriété font-weight est largement compatible avec les navigateurs courants, avec une disponibilité inter-navigateurs établie depuis juillet 2015. Lorsqu’un texte reste visuellement inchangé, cherchez d’abord une règle concurrente ou une variante de police manquante plutôt qu’un défaut de compatibilité.
Comprendre l’héritage et les règles prioritaires
La graisse se transmet normalement aux descendants. Avec .encadre { font-weight: 700; }, le texte contenu dans cet encadré hérite du gras, sauf si une autre déclaration le remplace. Pour rétablir une partie en graisse normale, utilisez par exemple .encadre .detail { font-weight: 400; }.
La valeur inherit demande explicitement la graisse du parent : .detail { font-weight: inherit; }. Si votre règle ne produit aucun effet, inspectez l’élément dans les outils de développement du navigateur. Une déclaration barrée indique généralement qu’une autre règle l’emporte. Vérifiez la spécificité des sélecteurs, les styles en ligne et l’ordre des règles avant de recourir à !important.
Charger une véritable variante grasse
Certaines polices ne disposent que des variantes normale et grasse ; d’autres offrent plusieurs graisses. Si seul le fichier normal est chargé, le navigateur peut synthétiser un gras, avec un résultat parfois moins soigné. Il peut également sélectionner une graisse disponible proche de celle demandée. C’est pourquoi 500, 600 et 700 peuvent sembler identiques.
Pour une police statique, déclarez correctement chaque fichier avec son descripteur font-weight dans @font-face. Pour une police variable, déclarez la plage réellement prise en charge, par exemple font-weight: 300 700;. Cette plage appartient à la déclaration de la police ; sur les éléments, utilisez ensuite une valeur unique comme font-weight: 600;.
Distinguer le style visuel de l’importance du texte
Mettre en gras avec CSS et utiliser une balise porteuse de sens répondent à deux besoins différents. La présentation ne remplace pas la sémantique HTML. Choisissez d’abord ce que le passage signifie, puis ajustez son apparence.
- font-weight modifie l’aspect du texte sans lui donner d’importance sémantique particulière.
- La balise <strong> indique une importance forte, une gravité ou une urgence.
- La balise <b> attire l’attention sans exprimer cette importance forte, par exemple sur certains mots-clés.
Pour un avertissement tel que « Ne débranchez pas l’appareil pendant la mise à jour », strong peut être approprié. Pour donner plus de présence au nom d’un produit dans une carte, une classe CSS peut suffire. Les navigateurs affichent généralement strong et b en gras par défaut, mais leur apparence reste modifiable.
Un lecteur d’écran ne prononce pas systématiquement les passages strong avec une intonation différente : cela dépend de l’outil et des réglages. N’utilisez donc jamais le gras comme unique moyen de transmettre une consigne. Écrivez explicitement « Obligatoire » ou « Attention » lorsque cette information est nécessaire.
Créer une hiérarchie lisible sans alourdir la page
Réservez le gras aux informations que le lecteur doit retrouver rapidement : condition décisive, montant, échéance ou action attendue. Un paragraphe entièrement épaissi perd son contraste interne. Vérifiez aussi le rendu sur mobile : une graisse différente peut modifier la largeur des caractères et déplacer les retours à la ligne.
Pensez au gras comme à un écho visuel : les mêmes types d’informations doivent recevoir le même traitement d’une section à l’autre. Si les délais sont en gras dans une première carte, conservez ce repère dans les suivantes. Le lecteur reconnaît alors un motif et compare plus vite les offres, sans devoir relire chaque phrase. Cette cohérence compte davantage qu’une accumulation de mots épaissis.
Une animation de font-weight est possible, notamment avec une police variable : .bouton { font-weight: 400; transition: font-weight 0.2s; }, puis .bouton:hover { font-weight: 700; }. L’interpolation peut être fluide si la police couvre la plage ; avec des variantes statiques, le rendu change par paliers. Testez les déplacements éventuels du texte et prévoyez aussi un état de focus perceptible au clavier.
Pour un usage courant, retenez cette base : une classe CSS, une valeur de 700 et une variante grasse correctement chargée. Vous obtenez ainsi une mise en valeur maîtrisée, sans confondre décoration, lisibilité et importance du contenu.