Guide pratique pour une typographie lisible sur le web moderne

Pourquoi la plupart des sites web sont plus difficiles à lire qu’ils ne devraient l’être

En 2026, le site web moyen est livré avec une famille de polices personnalisée, des couleurs de marque soigneusement choisies et un design system qui précise l’espacement au pixel près. Pourtant, le texte courant — ce que la plupart des visiteurs sont réellement venus lire — se retrouve souvent en 14px, dans un gris peu contrasté, avec une police optimisée pour les titres plutôt que pour les paragraphes.

Ce n’est pas une charge contre les designers. C’est un rappel que la lisibilité est une discipline distincte du design visuel, et que les deux ne s’alignent pas toujours. Une police qui paraît nette dans une section hero peut devenir épuisante à lire sur plusieurs paragraphes. Une palette de couleurs qui rend bien en image peut échouer aux tests de contraste. Une mise en page qui fonctionne sur un écran de 27 pouces peut se réduire à une colonne trop étroite sur mobile.

La bonne nouvelle : une typographie lisible ne nécessite pas de diplôme en typographie. Elle demande de l’attention à quelques variables qui ont un impact disproportionné.

Taille de police : plus grande que vous ne le pensez

L’erreur de lisibilité la plus courante sur le web est un texte courant trop petit. Les designers définissent souvent le corps du texte à 14px ou 15px parce qu’il « paraît propre » à l’échelle desktop, puis oublient qu’une part importante des lecteurs consulte le contenu sur téléphone, souvent dans des conditions d’éclairage loin d’être idéales.

Une base pratique pour le texte courant en 2026 :

• Desktop : 18px minimum, 20px de préférence
• Mobile : 16px minimum, 18px de préférence

Ces valeurs semblent grandes si vous êtes habitué à des caractères plus petits, mais elles reflètent la manière dont les gens lisent réellement sur écran. Un texte plus grand réduit la fatigue visuelle, améliore la compréhension et rend votre contenu accessible aux lecteurs ayant une légère déficience visuelle sans avoir modifié les réglages de leur navigateur.

Si votre design system impose une taille plus petite, testez-la sur un téléphone en plein soleil. Si vous plissez les yeux, c’est trop petit.

Hauteur de ligne : laissez le texte respirer

La hauteur de ligne (interlignage) est l’espace vertical entre les lignes de texte. Trop serrée, les lignes se confondent. Trop ample, l’œil perd le fil d’une ligne à l’autre.

Pour le texte courant, une hauteur de ligne de 1.5 à 1.7 fonctionne avec la plupart des polices. Les titres peuvent être plus serrés (1.1 à 1.3), mais le corps du texte a besoin d’espace pour respirer.

Le CSS :

body {
  font-size: 18px;
  line-height: 1.6;
}

C’est l’un des gains de lisibilité les plus simples. Si votre texte courant est actuellement à line-height: 1.2 ou utilise une valeur fixe en pixels, changez-le aujourd’hui.

Longueur de ligne : plus courte que vous ne le pensez

La longueur de ligne optimale pour le texte courant est de 45 à 75 caractères par ligne, soit environ 8 à 12 mots. Les lignes de plus de 90 caractères rendent difficile le retour de l’œil au début de la ligne suivante. Les lignes de moins de 40 caractères créent une expérience de lecture hachée et fragmentée.

La plupart des sites web se trompent en laissant le texte occuper toute la largeur du viewport, surtout sur desktop. Un écran de 1920px de large peut afficher plus de 150 caractères par ligne, ce qui est épuisant à lire.

La solution consiste à appliquer une largeur maximale au conteneur de texte :

.prose {
  max-width: 65ch; /* 65 characters */
  margin-inline: auto;
}

L’unité ch est sous-utilisée, mais parfaite pour cet usage : elle s’adapte à la taille de police et correspond approximativement à la largeur des caractères.

Contraste : pas aussi simple que du noir sur blanc

WCAG 2.1 spécifie un ratio de contraste minimal de 4.5:1 pour le texte courant (niveau AA) et de 7:1 pour une accessibilité renforcée (niveau AAA). La plupart des sites web respectent cela sur le papier, mais échouent en pratique parce qu’ils utilisent du texte gris clair sur fond blanc.

Coupables fréquents :

• #666666 sur #FFFFFF (4.54:1, passe tout juste)
• #777777 sur #FFFFFF (4.47:1, échoue)
• Toute nuance plus claire que #767676 sur blanc (échoue)

Si votre design system définit « text-secondary » comme un gris clair, testez-le. Le WebAIM contrast checker est le moyen le plus rapide de vérifier.

Le mode sombre complique encore les choses. Un texte blanc pur sur noir pur crée de la halation (un effet lumineux) plus difficile à lire qu’un blanc légèrement cassé sur gris foncé. Une meilleure approche :

@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Choix de police : les polices par défaut sont meilleures que vous ne le pensez

Les polices web personnalisées sont omniprésentes, mais elles impliquent des compromis. Elles ajoutent de la latence, augmentent le poids de la page et peuvent bloquer le rendu si elles ne sont pas chargées avec soin. Pour le texte courant, les polices système sont souvent le meilleur choix.

Une pile de polices système robuste en 2026 :

body {
  font-family: system-ui, -apple-system, 'Segoe UI', 
               Roboto, Helvetica, Arial, sans-serif;
}

Vous obtenez ainsi San Francisco sur macOS/iOS, Segoe UI sur Windows et Roboto sur Android — toutes des polices très lisibles, conçues professionnellement et chargées instantanément.

Si vous utilisez une police personnalisée pour le texte courant, choisissez-en une conçue pour la lecture longue, et non pour l’affichage. Évitez :

• Les graisses ultra-light ou ultra-bold pour le corps du texte
• Les variantes condensées ou étendues
• Les polices avec une faible hauteur d’x (la hauteur des lettres minuscules)

Testez la police choisie sur des paragraphes entiers avant de vous engager.

Typographie responsive : des échelles fluides

Les tailles de police fixes ne s’adaptent pas bien aux différents appareils. Un corps de texte à 20px confortable sur desktop peut sembler trop grand sur mobile.

La typographie fluide utilise clamp() pour faire varier la taille de police en douceur entre un minimum et un maximum :

body {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

Cela passe de 16px sur les petits écrans à 20px sur les grands écrans, avec une interpolation fluide entre les deux. C’est plus sophistiqué que des points de rupture en media queries et cela s’adapte à n’importe quelle largeur de viewport.

Pour une échelle typographique complète (titres, corps, petit texte), des outils comme Utopia génèrent des échelles fluides à partir de vos contraintes.

Espacement des paragraphes et alignement du texte

Deux petits détails qui comptent :

1. Espacement des paragraphes : Ajoutez de l’espace entre les paragraphes (margin-block-end: 1em) ou utilisez un retrait de première ligne (text-indent: 1.5em), mais pas les deux. La plupart des contenus web utilisent l’espacement.

1. Alignement du texte : L’alignement à gauche (ou à droite pour les langues RTL) est presque toujours plus lisible qu’un texte justifié, qui crée un espacement irrégulier entre les mots si la césure n’est pas activée. Le texte courant centré est difficile à lire et devrait être réservé aux passages courts.

Tester la lisibilité en pratique

La lisibilité n’est pas entièrement objective, mais vous pouvez la tester :

• Lisez votre propre contenu sur votre téléphone dans différentes conditions d’éclairage
• Lancez un audit d’accessibilité Lighthouse pour repérer les problèmes de contraste et de taille de police (voir comment lire un rapport Lighthouse sans paniquer pour des conseils)
• Demandez à une personne de plus de 50 ans de lire une page sans modifier ses réglages
• Consultez vos analytics pour le taux de rebond des pages riches en texte — si les gens partent rapidement, la lisibilité peut être un facteur

Si votre contenu est difficile à lire, les gens ne le liront pas. C’est aussi simple que cela.

À quoi cela ressemble en pratique

Un style de texte courant lisible en 2026 pourrait ressembler à ceci :

.prose {
  font-family: system-ui, sans-serif;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: #1a1a1a;
  max-width: 65ch;
  margin-inline: auto;
}

.prose p {
  margin-block-end: 1.25em;
}

@media (prefers-color-scheme: dark) {
  .prose {
    background: #1a1a1a;
    color: #e4e4e4;
  }
}

Cela couvre la taille de police, la hauteur de ligne, la longueur de ligne, le contraste et la mise à l’échelle responsive en une douzaine de lignes de CSS. Ce n’est pas spectaculaire, mais ça fonctionne.

Quand enfreindre les règles

Ces lignes directrices s’appliquent au texte courant — les paragraphes que les gens lisent pour s’informer. Les titres, légendes, libellés d’interface et textes marketing ont d’autres contraintes et peuvent assouplir ces règles.

Mais si quelqu’un vient sur votre site pour lire un article, une page de documentation ou une description de produit, une typographie lisible n’est pas optionnelle. C’est l’attente de base.