Texte et polices

Choisissez une police avec font-family, réglez la taille, la graisse et l'espacement des lignes pour un texte agréable à lire.

9 min · 3 questions

Une police de caractères (font en anglais) est le dessin des lettres : Arial, Georgia ou Times New Roman sont des polices. En CSS, la propriété font-family choisit la police d'un texte. On lui donne une liste de polices séparées par des virgules : le navigateur essaie la première ; si elle n'est pas installée sur l'appareil du visiteur, il passe à la suivante, et ainsi de suite. C'est un plan A, un plan B, un plan C.

body {
  font-family: Georgia, "Times New Roman", serif;
}

Le dernier mot de la liste est une famille générique : serif désigne les polices à empattements (les petits pieds au bout des lettres, comme dans un journal papier), sans-serif les polices sans empattements (plus modernes, comme Arial), et monospace les polices à chasse fixe où toutes les lettres ont la même largeur (idéales pour le code). Notez les guillemets autour de "Times New Roman" : ils sont obligatoires dès qu'un nom de police contient des espaces.

La taille du texte se règle avec font-size. Vous connaissez déjà les pixels (16px est la taille par défaut des navigateurs). Il existe aussi l'unité rem : 1rem vaut la taille de base de la page, donc 1.5rem vaut une fois et demie cette taille. La graisse, c'est-à-dire l'épaisseur du trait des lettres, se règle avec font-weight : normal pour un texte courant, bold pour du gras, ou un nombre de 100 (très fin) à 900 (très épais), 400 étant l'équivalent de normal et 700 celui de bold.

h1 {
  font-size: 2rem;
  font-weight: 700;
}

p {
  font-size: 16px;
  font-weight: normal;
}

Dernier réglage, souvent oublié et pourtant essentiel au confort de lecture : line-height, la hauteur de ligne. Elle contrôle l'espace vertical entre les lignes d'un paragraphe. Trop serrées, les lignes deviennent étouffantes ; trop espacées, l'œil se perd. La meilleure pratique est une valeur sans unité, qui multiplie la taille du texte : line-height: 1.5; donne des lignes hautes d'une fois et demie la taille de la police.

p {
  font-size: 16px;
  line-height: 1.5;
}

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Pourquoi donne-t-on plusieurs polices à font-family, séparées par des virgules ?
   • Pour mélanger les polices dans un même mot
   • Pour que le navigateur essaie la suivante si une police manque
   • Parce que la syntaxe CSS impose au moins trois valeurs
2. Quelle valeur de font-weight correspond au gras classique (bold) ?
   • 100
   • 400
   • 700
   • 900
3. Avec font-size: 20px et line-height: 1.5, quelle est la hauteur de chaque ligne ?
   • 20 pixels
   • 25 pixels
   • 30 pixels
   • 35 pixels