Commencer→
Retour au cours

frontend / css

Typographie

Leçon 41 exercice

Explication

Ce que vous allez apprendre

  • Construire une pile de polices de secours (font-family) robuste
  • Comprendre pourquoi line-height sans unité est presque toujours le bon choix
  • Limiter la largeur de ligne à environ 65-75 caractères avec l'unité ch
  • Tronquer un texte sur une ou plusieurs lignes avec text-overflow et -webkit-line-clamp
  • Utiliser text-wrap: balance pour équilibrer les lignes d'un titre

Dans quel contexte ?

Un test utilisateur révèle que le paragraphe d'introduction de article.html s'étend sur toute la largeur d'un écran desktop de 1920px, forçant l'œil à parcourir une ligne interminable avant de revenir au début. En ajoutant max-width: 65ch sur le conteneur de texte, chaque ligne se limite à environ 65-75 caractères — la largeur recommandée par les règles de lisibilité typographique — sans toucher à la taille de police ni au design environnant.

Étape 1 : le texte, matière première du Web

La grande majorité du contenu d'une page web est du texte. Pourtant, la typographie reste souvent la grande oubliée des débutants, qui se contentent des réglages par défaut du navigateur, alors qu'elle influence directement la compréhension du contenu.

Étape 2 : pourquoi empiler plusieurs polices

Commençons par font-family. Une police déclarée peut ne pas être installée sur l'appareil de l'utilisateur, ou mettre du temps à charger. C'est pour cela qu'on empile une liste de polices de secours ("Inter", -apple-system, ..., sans-serif).

Étape 3 : comment fonctionne ce plan de repli

Le navigateur essaie chaque police dans l'ordre jusqu'à en trouver une disponible, en terminant toujours par une catégorie générique garantie d'exister. C'est une sécurité, pas une simple préférence esthétique.

Étape 4 : le piège discret de line-height

Passons à l'interlignage. Écrire line-height: 1.5 sans unité signifie "1,5 fois la taille de police de CET élément", et cette valeur se recalcule pour chaque enfant selon SA propre taille.

Valeur de line-heightComportement pour les enfants
1.5 (sans unité)Recalculée selon le font-size propre de chaque enfant
24px (avec unité)Transmise identique, quelle que soit la taille de texte de l'enfant
150%Équivalent à une valeur fixe calculée une fois, puis transmise

Étape 5 : pourquoi éviter une valeur fixe ici

À l'inverse, une valeur fixe comme 24px se transmet identique à tous les descendants, quelle que soit leur taille de texte — ce qui casse souvent la lisibilité d'un titre imbriqué. Une valeur sans unité reste donc le bon réflexe presque partout.

Étape 6 : un dernier facteur sous-estimé, la largeur de ligne

Il reste un point à ne pas négliger : un bloc de texte trop large fatigue l'œil, qui doit parcourir une trop grande distance avant de revenir à la ligne. La règle empirique de la typographie recommande environ 65 à 75 caractères par ligne, d'où l'usage de max-width: 65ch — l'unité "ch" étant calibrée sur la largeur moyenne d'un caractère.

Bonne pratique

Appliquez max-width: 65ch sur tout conteneur de texte long (article, description produit). Combinée à line-height: 1.5 (sans unité) et une pile de polices avec fallback, c'est l'un des réglages qui améliore le plus visiblement la lisibilité d'une page, pour un coût quasi nul.

Et ensuite ?

Une fois le texte lisible, la prochaine étape logique consiste à aligner des éléments entiers entre eux avec Flexbox.

Commandes & code

Typographie

Contrôler la lisibilité : familles de police, graisses, interlignage, troncature.

css
body {
    /* Pile de fallback : du plus spécifique au générique système */
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    font-size: 1rem;
    line-height: 1.5;        /* sans unité = multiplicateur du font-size (recommandé) */
    font-weight: 400;
    letter-spacing: normal;
}

h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;         /* titres : interligne plus serré */
    letter-spacing: -0.02em;  /* légèrement resserré, effet "premium" */
}

/* @font-face avec variable font : une seule ressource pour toutes les graisses */
@font-face {
    font-family: "Inter";
    src: url("/fonts/inter-var.woff2") format("woff2-variations");
    font-weight: 100 900;  /* plage complète supportée par la variable font */
    font-display: swap;
}
css
/* Troncature de texte */
.une-ligne {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* ajoute "..." */
}

.multi-lignes {
    display: -webkit-box;
    -webkit-line-clamp: 3;      /* limite à 3 lignes visibles */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Alternative moderne standardisée */
.multi-lignes-moderne {
    line-clamp: 3;
    display: box; /* propriété récente, support encore partiel selon navigateurs */
}
css
/* Contrôles fins */
.texte {
    text-align: justify;
    hyphens: auto;              /* césure automatique -- nécessite lang sur <html> */
    text-wrap: balance;         /* équilibre les lignes d'un titre (évite une ligne orpheline) */
    word-break: break-word;     /* casse les mots trop longs (URLs, tokens) */
    text-transform: uppercase;
    font-variant-numeric: tabular-nums; /* chiffres alignés en colonne, idéal pour les tableaux */
}

.paragraphe-lisible {
    max-width: 65ch; /* "ch" = largeur du caractère "0" -> ~65-75 caractères/ligne = lisibilité optimale */
    text-wrap: pretty; /* évite les veuves/orphelines sur les paragraphes longs */
}

Résumé

  • line-height sans unité (ex: 1.5) évite les incohérences en cascade sur les enfants.
  • max-width: 65ch est la référence pour la lisibilité d'un bloc de texte long.
  • text-wrap: balance (titres) et text-wrap: pretty (paragraphes) évitent les lignes orphelines.
  • Une variable font (font-weight: 100 900) remplace avantageusement plusieurs fichiers de graisses.

Exercices pratiques

1 disponible
1

Mission : sauver la lisibilité d'un article qui grandit tout seul

Objectif : Corriger un interlignage transmis en cascade et une largeur de ligne excessive sur un article de blog.

Contexte

Sur article.css, le conteneur .article déclare line-height: 24px; (avec unité fixe) et aucune limite de largeur. Le titre h2 à l'intérieur de l'article, en font-size: 2rem, se retrouve visuellement écrasé avec des lignes qui se chevauchent presque, tandis que le paragraphe d'introduction s'étire sur toute la largeur d'un écran desktop de 1920px.

Résoudre l’exercice →