Mise en forme du texte en CSS : polices, taille, graisse, soulignement, alignement
Bac à sable de mise en forme du texte CSS
Mise en forme du texte en CSS : police, taille, gras, soulignement, centrage | We.Inc
Un bac à sable en direct pour le texte en CSS : famille de police, taille en px, rem ou clamp(), graisse, style de soulignement, alignement, interlignage et espacement, avec les classes Tailwind.
On met en forme du texte en CSS avec quelques propriétés : font-family choisit la police, font-size définit la taille (rem est le meilleur choix), font-weight: 700 met en gras, text-decoration ajoute un soulignement et text-align: center centre le texte. line-height et letter-spacing gèrent l'espacement. Modifiez-les dans le bac à sable ci-dessous et copiez le CSS.
Les propriétés que vous utiliserez le plus
Objectif
CSS
Tailwind
Gras
font-weight: 700
Italique
font-style: italic
Souligné
text-decoration: underline
Centrer le texte
text-align: center
Texte plus grand
font-size: 1.25rem
Lignes plus aérées
line-height: 1.6
leading-relaxed (1.625)
Au lieu de six pages de référence séparées, ce bac à sable unique réunit police, taille, graisse, style, détails du soulignement, alignement, interlignage et espacement des lettres, écrit le CSS et les classes Tailwind à mesure que vous les modifiez, et ajoute des recettes testées pour centrer du texte, composer des piles de polices et charger des polices web.
Tapez votre propre phrase dans le bac à sable ou gardez le texte d'exemple.
Modifiez la police, l'unité de taille, la graisse, la décoration et l'espacement. L'aperçu et le CSS se mettent à jour immédiatement.
Copiez le bloc CSS, ou les classes Tailwind pour les mêmes réglages.
Utilisez les recettes plus bas pour le centrage, les piles de polices et @font-face.
Le texte courant se lit le mieux autour de 16 à 18 pixels, avec un interlignage de 1.5 à 1.7 et des lignes d'environ 60 à 75 caractères.
Définissez les tailles de police en rem pour qu'elles suivent le réglage du navigateur du lecteur. Utilisez clamp() pour les titres qui doivent grandir avec l'écran.
Ne chargez que les graisses que vous utilisez. Chaque graisse supplémentaire d'une police web est un fichier de plus à télécharger.
Évitez de souligner un texte qui n'est pas un lien. Les lecteurs s'attendent à ce que les mots soulignés soient cliquables.
Questions fréquentes
Comment mettre du texte en gras en CSS ?
Utilisez font-weight: bold ou une valeur numérique comme 600 ou 700. Les valeurs entre 100 et 900 choisissent parmi les graisses fournies par la police. Si la police n'a qu'une graisse normale, le navigateur simule le gras en épaississant les lettres, ce qui paraît plus lourd et moins net qu'un vrai fichier gras.
Comment centrer du texte verticalement ?
text-align ne centre qu'horizontalement. Pour centrer verticalement dans une boîte, faites-en un conteneur flex ou grid : display: grid; place-items: center; centre le texte dans les deux sens en une ligne. Pour une seule ligne dans une barre de hauteur fixe, un line-height égal à la hauteur de la barre fonctionne aussi.
Comment changer la couleur ou l'épaisseur du soulignement ?
Utilisez text-decoration-color, text-decoration-thickness et text-underline-offset. Par exemple text-decoration: underline; text-decoration-color: #4F98FB; text-decoration-thickness: 2px; text-underline-offset: 4px; donne un soulignement bleu plus épais, avec de l'espace sous les lettres.
line-height doit-il avoir une unité ?
Généralement non. Une valeur sans unité comme 1.5 est multipliée par la taille de police propre à chaque élément, si bien que les titres et les petits caractères à l'intérieur du bloc gardent un espacement cohérent. Une valeur fixe comme 24px est transmise telle quelle et peut tasser un texte plus grand.
Qu'est-ce qu'une pile de polices ?
Une liste de polices séparées par des virgules dans font-family. Le navigateur utilise la première disponible et descend dans la liste si elle manque, pour finir par une famille générique comme sans-serif ou serif, qui existe toujours.
Unités de taille : px, rem et clamp()
Les pixels donnent une taille exacte qui ignore la taille de texte préférée du lecteur. rem est relatif à la taille de police racine, 16px par défaut : 1.125rem fait donc 18px pour la plupart des gens et grandit pour les lecteurs qui ont choisi une taille par défaut plus grande.
clamp(min, preferred, max) sert aux tailles qui doivent s'adapter à la fenêtre. clamp(1.75rem, 1.2rem + 2.5vw, 3rem) ne descend jamais sous 28px ni ne dépasse 48px, et varie en douceur entre les deux. Gardez une part en rem dans la valeur centrale pour que le zoom du navigateur et les réglages de texte aient toujours un effet.
Des réglages par défaut lisibles
La plupart des problèmes de lecture viennent de trois réglages : un texte trop petit, des lignes trop longues et des lignes trop serrées. Un max-width d'environ 65ch sur les paragraphes, une taille de police d'au moins 1rem et un interlignage proche de 1.6 en règlent l'essentiel avant toute mise en forme.
Les grands titres demandent l'inverse : un interlignage plus serré, autour de 1.1 à 1.2, et souvent un letter-spacing légèrement négatif. Les petits libellés en majuscules se lisent mieux avec un léger letter-spacing positif.
Charger des polices web sans ralentir la page
Chaque police web est un téléchargement qui peut retarder l'affichage du texte. font-display: swap affiche immédiatement la police de secours et bascule quand la police web arrive, pour que les lecteurs ne fixent jamais un texte invisible. Héberger vous-même les fichiers WOFF2 évite une connexion à un autre domaine.
Si vous utilisez Google Fonts, demandez uniquement les familles et graisses nécessaires dans un seul lien, et ajoutez les indications preconnect qu'il suggère. Choisir dans la pile une police de secours aux proportions proches réduit le saut au moment du changement de police.
Centrer du texte horizontalement et verticalement
Horizontalement : text-align
text-align centre les lignes à l'intérieur du bloc. Pour centrer le bloc lui-même, donnez-lui une largeur et margin-inline: auto.
Dans les deux sens : grid avec place-items
Deux lignes de CSS sur le conteneur centrent n'importe quel contenu dans les deux directions, quelle que soit sa taille.
Des soulignements qui ont l'air conçus
Couleur, épaisseur, décalage et style
Les propriétés de décoration modifient le soulignement sans toucher à la couleur du texte. text-decoration-skip-ink empêche les traits de couper les jambages descendants.
Charger une police avec @font-face ou Google Fonts
Police auto-hébergée avec @font-face
Faites pointer src vers votre fichier WOFF2. Un bloc par graisse et par style réellement utilisés.
Lien Google Fonts
Ne demandez que les graisses que vous utilisez. display=swap définit font-display pour vous.
Des réglages lisibles pour commencer
Une petite base de texte raisonnable
Taille du corps, interlignage et longueur de ligne définis une fois ; titres plus serrés. Adaptez les couleurs et les tailles à votre design.
Équivalents Tailwind
Le CSS et les classes Tailwind correspondantes (thème par défaut)