Partie 11 — Typographie CSS : fonts, tailles, line-height et lisibilité

Un site peut avoir un beau design, de belles couleurs et une bonne structure, mais si le texte est difficile à lire, l’utilisateur quittera la page.

La typographie est l’un des éléments les plus importants du web, surtout pour les blogs, tutoriels, documentations et sites éducatifs.

Dans cette partie, nous allons voir comment utiliser le CSS pour rendre le texte clair, lisible et agréable, sans surcharger le design.

👉 Une bonne typographie améliore la compréhension sans que l’utilisateur s’en rende compte.

1) font-family : choisir une police adaptée

La propriété font-family permet de définir la police du texte.

Exemple simple :

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

Le navigateur utilise la première police disponible dans la liste.

Bonnes pratiques :

• toujours prévoir une police de secours
• utiliser sans-serif pour les textes longs
• éviter les polices fantaisistes

2) Utiliser une police externe (exemple Google Fonts)

Les polices externes permettent d’avoir un rendu plus moderne.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
  

body {
  font-family: 'Roboto', sans-serif;
}
  

3) font-size : gérer la taille du texte

La propriété font-size définit la taille du texte.

Exemple :

p {
  font-size: 16px;
}
  

Unités courantes :

• px : taille fixe
• em : relative au parent
• rem : relative au html

Exemple recommandé :

html {
  font-size: 16px;
}

p {
  font-size: 1rem;
}
  

4) line-height : l’interligne (clé de la lisibilité)

line-height définit l’espace entre les lignes de texte.

Exemple lisible :

p {
  line-height: 1.6;
}
  

Bonnes valeurs :

• texte courant : 1.5 à 1.8
• titres : 1.2 à 1.4

5) font-weight : épaisseur du texte

font-weight permet de gérer l’épaisseur du texte.

h1 {
  font-weight: 700;
}

p {
  font-weight: 400;
}
  

Valeurs courantes :

• 300 : léger
• 400 : normal
• 600–700 : gras

6) text-align : alignement du texte

p {
  text-align: left;
}

h1 {
  text-align: center;
}
  

Bonnes pratiques :

• texte long : aligné à gauche
• titres : gauche ou centré
• éviter le justify sur le web

7) Bonnes pratiques pour la lisibilité

• taille minimum du texte : 16px
• contraste suffisant entre texte et fond
• largeur de ligne raisonnable
• espacer les paragraphes

.content {
  max-width: 700px;
  margin: 0 auto;
}
  

8) Erreurs fréquentes en typographie

• texte trop petit
• line-height trop serré
• polices trop décoratives
• manque de contraste

Vous savez maintenant gérer la typographie en CSS : polices, tailles, interlignes et lisibilité globale.

Dans la Partie 12, nous verrons comment gérer les couleurs et arrière-plans : contrastes, backgrounds, gradients et bonnes pratiques visuelles.

✅ Une bonne typographie rend un site professionnel et confortable à lire.