Laisse respirer ton texte

🎯 Objectif

Régler l'interligne avec line-height, et comprendre pourquoi on l'écrit sans unité.

📖 Exemple

Le même avis aux voisins, affiché deux fois — serré, puis aéré :

<p class="serre">Réunion des voisins jeudi à 19 h à la buvette. Au programme : la fête d'été, le tri des déchets et le nouveau bac à sable.</p>
<p class="aere">Réunion des voisins jeudi à 19 h à la buvette. Au programme : la fête d'été, le tri des déchets et le nouveau bac à sable.</p>

.serre {
  line-height: 1.1;
}

.aere {
  line-height: 1.8;
}

Pourquoi pas d'unité ? Un nombre nu est un multiplicateur de la taille du texte : 1.8, c'est une ligne qui mesure une fois huit la hauteur des caractères. L'avantage : si la taille du texte change demain, l'interligne suit tout seul — figé en pixels, il resterait bloqué, et un jour les lignes se chevaucheraient.

♿ Ce n'est pas qu'une question de goût : les recommandations WCAG demandent au moins 1,5 pour le texte courant. Des lignes trop serrées font relire deux fois la même ligne — un obstacle réel pour les personnes dyslexiques, et pour toi à deux heures du matin.

📝 Consigne

Le grand paragraphe du blog de Lou étouffe. Le HTML est fourni ; dans l'onglet CSS, écris une seule règle sur le sélecteur p, contenant deux déclarations :

1. La propriété font-size : le texte passe à 20px
2. La propriété line-height : un interligne de 1.6 — un nombre nu, sans px