Formation Apprendre le CSS : Styles de textes

Ce chapitre est l'occasion de découvrir les premières vraies propriétés CSS mais aussi de comprendre un mécanisme fondamental du langage : l'héritage, à l'origine du mot Cascading dans CSS.

L'héritage et la cascade

Imaginons qu'on veuille donner une couleur grise à tous les paragraphes. On pourrait cibler p, puis li, puis chaque élément concerné un par un... Ou on peut simplement appliquer la couleur au body :

body {
  color: gray;
}

Et là, tous les éléments de la page, paragraphes, listes, titres, héritent automatiquement de cette couleur. C'est le principe d'héritage : certaines propriétés CSS se transmettent en cascade depuis un élément parent vers tous ses enfants. C'est précisément de là que vient le terme Cascading dans CSS.

Toutes les propriétés ne se comportent pas de la même façon. La documentation MDN indique, dans la section Formal definition de chaque propriété, si elle est héritée (Inherited: yes) ou non (Inherited: no). La propriété color est héritée, ce qui explique pourquoi définir une couleur sur le body suffit à colorer toute la page. La propriété background, elle, ne l'est pas.

En pratique, on définit généralement la couleur de texte globale sur le body, puis on affine pour les éléments qui doivent se démarquer :

body {
  color: #444;
}

h1,
h2,
h3 {
  color: black;
}

Les propriétés essentielles

font-size, la taille de police

font-size définit la taille du texte. On peut l'exprimer en pixels, en em, en rem... Les unités de mesure feront l'objet d'un chapitre à part. Pour l'instant, on travaille en pixels. La taille par défaut des navigateurs est de 16px.

body {
  font-size: 16px;
}

h1 {
  font-size: 36px;
}

font-weight, le graissage

font-weight contrôle l'épaisseur des caractères. On peut utiliser des mots-clés (normal, bold, lighter) ou des valeurs numériques de 100 à 900 :

• 400 → normal
• 500 → medium
• 600 → semi-bold
• 700 → bold
• 900 → extra-bold

h2 {
  font-weight: 600;
}

font-family, la police

font-family permet de spécifier la police à utiliser. On indique généralement plusieurs polices en cascade : si la première n'est pas installée sur le système de l'utilisateur, le navigateur passe à la suivante.

body {
  font-family: Arial, Helvetica, sans-serif;
}

Les termes génériques comme sans-serif ou serif servent de filet de sécurité : ils désignent n'importe quelle police du système correspondant à cette catégorie. La différence entre les deux ? Les polices serif ont des petits empattements au bout des lettres (comme Times New Roman), les polices sans-serif n'en ont pas (comme Arial). Ces dernières sont généralement plus lisibles à l'écran.

Il est possible d'utiliser des polices personnalisées non installées sur le système mais c'est un sujet qui sera traité dans un chapitre dédié.

line-height, la hauteur de ligne

line-height définit l'espacement entre les lignes d'un texte. On préférera une valeur sans unité (un multiplicateur), ce qui la rend relative à la taille de police de l'élément :

p {
  line-height: 1.4;
}

Une valeur de 1 colle les lignes, 2 les double. Autour de 1.4 à 1.6 est généralement un bon compromis pour la lisibilité.

La propriété raccourci font

Ces propriétés peuvent être regroupées en une seule déclaration avec la propriété font :

body {
  font:
    16px/1.4 Arial,
    Helvetica,
    sans-serif;
}

La syntaxe taille/hauteur-de-ligne permet de définir font-size et line-height en même temps, suivis de la liste de polices. C'est un motif courant en CSS : les propriétés font-*, background-*, border-* ont toutes une version raccourcie.

Décoration et mise en forme

text-decoration

text-decoration gère les décorations de texte (soulignage, surlignage, texte barré). Les liens HTML sont soulignés par défaut grâce à cette propriété. On peut la supprimer avec none, ou l'ajouter au survol :

nav a {
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

Par convention, le soulignage est associé aux liens. Les pointillés (dotted) sont plutôt réservés aux définitions ou abréviations.

⚠️ Cette propriété n'est pas héritée : il faut l'appliquer directement sur les éléments concernés, pas sur un parent en espérant qu'elle se propage.

text-align

text-align contrôle l'alignement horizontal du texte. Les valeurs classiques sont left, right, center et justify. On préférera cependant start et end à left et right : ces valeurs sont indépendantes de la direction de lecture et fonctionnent correctement pour des langues comme l'arabe, qui se lisent de droite à gauche.

h1 {
  text-align: center;
}

Comme color, cette propriété est héritée, la définir sur le body l'applique à toute la page.

font-style

font-style permet de mettre du texte en italique (italic) ou oblique (oblique). Une propriété simple, mais qu'on utilise rarement directement, les balises <em> et <i> s'en chargent souvent côté HTML.

text-transform

text-transform modifie la casse du texte : uppercase passe tout en majuscules, lowercase en minuscules, capitalize met la première lettre de chaque mot en majuscule. Utile pour certains titres ou boutons, sans avoir à modifier le contenu HTML.

Propriétés plus avancées

text-wrap

Ajoutée en 2024, text-wrap contrôle la manière dont le texte passe à la ligne :

• pretty évite qu'un mot isolé se retrouve seul en fin de paragraphe (le fameux "veuf typographique").
• balance équilibre le nombre de caractères entre les lignes, particulièrement utile sur les grands titres.

p {
  text-wrap: pretty;
}

h1,
h2 {
  text-wrap: balance;
}

Ce sont des détails, mais ils font une vraie différence sur la qualité typographique d'un site.

white-space

white-space détermine comment les espaces blancs et les sauts de ligne sont traités. Par défaut (normal), les lignes se cassent automatiquement quand le texte déborde. Avec nowrap, le texte reste sur une seule ligne, pratique pour des éléments comme des boutons ou des badges. Avec pre, les sauts de ligne présents dans l'HTML sont respectés, ce qui reproduit un comportement proche de la balise <pre>.