Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

CSS — Typographie : polices, interligne et lisibilité | SovranCode

Contenu du coursTypography and Rhythm · 16 leçons

CSS Foundations

CSS — Introduction CSS — Sélecteurs CSS — Cascade et spécificité CSS — Unités

Layout Systems

CSS — Modèle de boîte CSS — Positionnement CSS — Flexbox CSS — Grid

Applied CSS Systems

CSS — Arrière-plans CSS — Pseudo-classes CSS — Débordements CSS — Transformations CSS — Architecture

Responsive and Responsible CSS

CSS — Media queries CSS — Typographie CSS — Accessibilité

CSS49 min

Typography and Rhythm

Create readable type scales, line lengths, spacing, and resilient text behavior.

La typographie web repose sur un équilibre entre taille du texte, interligne, longueur des lignes, graisse et espace autour du contenu. Le texte doit rester entièrement lisible sur un écran étroit, avec des mots longs, des libellés traduits ou un zoom agrandi.

Comprendre les réglages qui agissent ensemble

Repérez la largeur maximale de lecture, la taille du texte, l’interligne et la gestion des mots longs. Avant de modifier le code, cherchez comment ces réglages se complètent pour préserver la lisibilité.

.article {
  max-inline-size: 68ch;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.75;
  overflow-wrap: break-word;
}
.article h2 { margin-block: 2.5em .65em; }

Les bons réflexes

Pour un texte suivi, prenez environ 45 à 75 caractères par ligne comme point de départ, puis ajustez selon la police et le contenu.
Utilisez un line-height sans unité pour que chaque élément adapte son interligne à sa propre taille de texte.
Évitez les hauteurs fixes autour du texte.

L’erreur à éviter

Les longs paragraphes centrés rendent le début de chaque ligne plus difficile à retrouver. Réservez cet alignement à des textes courts et choisis pour cet usage.

ATELIER CSS · ENVIRON 25 MIN

Mettre en forme un article agréable à lire

Comprenez l’exemple, prévoyez le résultat, puis modifiez le code. Poursuivez avec une correction, un exercice en autonomie et deux questions pour faire le point.

Taille du texte, longueur des lignes et interligne se complètent

Un grand texte n’est pas automatiquement facile à lire : des lignes trop larges rendent le passage à la ligne suivante difficile, tandis qu’une colonne trop étroite interrompt sans cesse la lecture. ch se base sur la largeur d’avance du caractère « 0 » dans la police utilisée ; ce n’est pas un nombre exact de caractères moyens. Utilisez cette unité comme point de départ, puis vérifiez le résultat avec la police et la langue réelles. Un line-height sans unité se recalcule à partir de la taille de texte de chaque descendant, contrairement à une longueur fixe héritée qui peut devenir trop serrée pour un titre plus grand.

Laisser le contenu évoluer sans casser son conteneur

Les lecteurs peuvent agrandir le texte, utiliser une autre police ou rencontrer des libellés plus longs que ceux de vos exemples. Évitez les hauteurs fixes sur les paragraphes et les contrôles. Prévoyez des polices de repli et un interligne suffisant pour garder un contenu lisible même sans la police web. overflow-wrap peut autoriser la coupure d’un mot ou d’une adresse trop longue ; utilisez-le pour résoudre un débordement réel plutôt que d’insérer des espaces artificiels dans le contenu. Conservez les niveaux de titres qui correspondent à la structure HTML, puis réglez leur apparence avec CSS au lieu de choisir un titre pour sa taille par défaut.

Comparez des largeurs de lecture de 35ch, 65ch et 100ch. Augmentez le zoom du navigateur et observez comment l’article se réorganise sans hauteur fixe.

Votre espace de pratique CSS

Modifiez les règles dans style. Avec un compte, votre travail est synchronisé ; sans compte, il reste sur cet appareil.

Code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { margin: 0; padding: 1.5rem; color: #172b40; font-family: system-ui, sans-serif; }
.prose { max-inline-size: 65ch; margin-inline: auto; font-size: 1.125rem; line-height: 1.75; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); line-height: 1.15; }
h2 { margin-block: 2em .5em; line-height: 1.3; }
</style>
</head>
<body>
<article class="prose"><h1>Petit guide pour des interfaces lisibles</h1><p>La typographie ne se limite pas au choix d’une police. Elle associe taille du texte, longueur des lignes, interligne et espace autour du contenu.</p><h2>Tester avec du contenu réel</h2><p>Essayez un paragraphe plus long, un motextrêmementlongsansespacesquipourraitdéborderdansunecolonneétroite et une taille de police plus grande dans le navigateur. Le conteneur doit grandir avec son contenu.</p></article>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { margin: 0; padding: 1.5rem; color: #172b40; font-family: system-ui, sans-serif; }
.prose { max-inline-size: 65ch; margin-inline: auto; font-size: 1.125rem; line-height: 1.75; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); line-height: 1.15; }
h2 { margin-block: 2em .5em; line-height: 1.3; }
</style>
</head>
<body>
<article class="prose"><h1>Petit guide pour des interfaces lisibles</h1><p>La typographie ne se limite pas au choix d’une police. Elle associe taille du texte, longueur des lignes, interligne et espace autour du contenu.</p><h2>Tester avec du contenu réel</h2><p>Essayez un paragraphe plus long, un motextrêmementlongsansespacesquipourraitdéborderdansunecolonneétroite et une taille de police plus grande dans le navigateur. Le conteneur doit grandir avec son contenu.</p></article>
</body>
</html>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Ouvrir l’aperçu

Chargement du travail enregistré…

Modifiez le CSS dans style et observez l’aperçu. Votre travail s’enregistre automatiquement ; vous pouvez aussi en télécharger une copie.

DU CODE À CORRIGER

Comprendre l’erreur

Expliquez le problème et proposez votre correction avant de consulter la solution.

.prose { height: 200px; overflow: hidden; line-height: 16px; font-size: 24px; }

Voir la correction et son explication

.prose { line-height: 1.7; font-size: 1.125rem; max-inline-size: 65ch; }

Retirez la contrainte qui coupe le contenu et laissez la hauteur suivre le texte. Un line-height sans unité adapte l’interligne à la taille de police, au lieu de faire tenir des lettres de 24px dans des lignes de 16px.

À VOUS DE JOUER

Créer sans recopier l’exemple

Mettez en forme un article avec deux niveaux de titres, des paragraphes, une liste et un lien au libellé long. Testez-le avec un texte agrandi et un conteneur plus étroit.

Code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mettre en forme un article agréable à lire — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Mettre en forme un article agréable à lire</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mettre en forme un article agréable à lire — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Mettre en forme un article agréable à lire</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

Résultat

Les points à vérifier

Aucun texte n’est coupé par une hauteur fixe.Les niveaux de titres correspondent à la structure du contenu, pas seulement à leur apparence.La longueur des lignes et l’interligne restent agréables sur une largeur étroite comme sur une largeur large.

Qu’avez-vous testé et modifié ?

Chargement du travail enregistré…

Cet exercice s’enregistre séparément de l’exemple guidé. Les cases vous aident à relire votre travail ; elles ne donnent pas une note automatique.

Faire le point sur la leçon

Répondez correctement aux deux questions pour valider ce quiz. Les résultats liés à un compte sont recalculés par le serveur. Ce quiz aide à apprendre ; il ne délivre pas de certification.

1. Sur quelle mesure l’unité ch se base-t-elle ?La largeur d’avance du caractère « 0 »La hauteur d’une lettre majusculeExactement la largeur d’un caractère moyen

2. Pourquoi utiliser un line-height sans unité ?Il empêche le redimensionnement du texteIl s’adapte à la taille de police propre à chaque descendantIl télécharge une police web

Chargement du travail enregistré…

Vos choix de confidentialité

CSS Foundations

Layout Systems

Applied CSS Systems

Responsive and Responsible CSS

Typography and Rhythm

Comprendre les réglages qui agissent ensemble

Les bons réflexes

L’erreur à éviter

Mise en pratique guidée

Faire le point

Mettre en forme un article agréable à lire

Taille du texte, longueur des lignes et interligne se complètent

Laisser le contenu évoluer sans casser son conteneur

Votre espace de pratique CSS

Code

Résultat

Comprendre l’erreur

Créer sans recopier l’exemple

Code

Résultat

Les points à vérifier

Faire le point sur la leçon

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris