Un texte parfaitement rédigé devient illisible si la police choisie fatigue l’œil au bout de trois lignes. Sur le web, la typographie n’est pas un détail décoratif : c’est le premier filtre entre un visiteur qui reste et un visiteur qui ferme l’onglet. Ce guide se concentre sur les erreurs concrètes qui plombent la lisibilité, et sur les réglages qui font la différence entre une lecture fluide et un abandon silencieux.
Espacement des caractères et interligne : les réglages que la plupart des sites négligent
Vous avez déjà lu un paragraphe où les lettres semblaient collées les unes aux autres, ou au contraire tellement espacées que chaque mot perdait sa forme ? Ce problème vient rarement de la police elle-même. Il vient de ses réglages d’espacement.
Lire également : Les erreurs d’indexation : comment SpeedyIndex les identifie et corrige
Trois paramètres CSS contrôlent la respiration d’un texte : le letter-spacing (espace entre les caractères), le line-height (interligne) et l’espacement entre paragraphes. La norme WCAG 2.2, dans son critère 1.4.12 de niveau AA, impose que la mise en page reste fonctionnelle quand un utilisateur augmente ces valeurs jusqu’à certains seuils.
- L’interligne doit supporter une augmentation jusqu’à 1,5 fois la taille de police sans provoquer de chevauchement de texte ni de contenu tronqué.
- L’espacement entre paragraphes doit pouvoir atteindre 2 fois la taille de police sans casser la mise en page.
- Le letter-spacing doit rester lisible jusqu’à 0,12 fois la taille de police au minimum.
L’erreur fréquente : figer ces valeurs dans le CSS avec des unités fixes (pixels) au lieu d’unités relatives (em, rem). Résultat, dès qu’un utilisateur modifie la taille du texte dans son navigateur, les lignes se chevauchent ou le texte disparaît sous un bloc voisin.
A lire aussi : Faker : Comment cet outil révolutionne le développement web
Pour vérifier, augmentez la taille de police de votre navigateur à 200 %. Si le texte déborde de ses conteneurs ou devient illisible, vos réglages d’espacement posent problème, quelle que soit la beauté de la police choisie.
Serif ou sans-serif : quel type de police pour quel usage web
Les polices serif (avec empattements, comme Georgia ou Merriweather) portent de petites extensions aux extrémités des lettres. Les polices sans-serif (comme Inter, Open Sans ou Verdana) en sont dépourvues. Cette distinction n’est pas qu’esthétique : elle influence directement le confort de lecture selon le support.
Sur écran, les polices sans-serif offrent généralement une meilleure lisibilité pour le texte courant. Leurs formes plus simples se rendent mieux à basse résolution et sur les petits écrans mobiles. Les polices serif, elles, fonctionnent bien pour les titres ou les contenus éditoriaux longs sur grand écran, où les empattements guident l’œil d’une lettre à l’autre.
L’erreur n’est pas de choisir l’une plutôt que l’autre, mais de les utiliser à contre-emploi. Un blog avec un corps de texte en police cursive, par exemple, devient pénible dès la troisième ligne. Une page d’accueil entièrement en police monospace donne l’impression d’un terminal de développeur, pas d’un site commercial.
Polices décoratives et cursives : réservées aux titres courts
Les polices display ou cursives attirent l’attention. C’est leur force et leur limite. Utilisées sur un paragraphe entier, elles ralentissent la lecture parce que le cerveau doit décoder chaque glyphe individuellement au lieu de reconnaître des formes de mots familières.
Limitez les typographies décoratives à quelques mots : un titre, un slogan, un élément de navigation. Le reste du texte mérite une police conçue pour la lecture continue.
Taille de police et lisibilité mobile : le seuil en dessous duquel vous perdez des lecteurs
Afficher un texte en 12 pixels sur un écran de bureau peut encore passer. Sur mobile, c’est une garantie de plissement des yeux et de zoom compulsif. La taille de référence recommandée pour le corps de texte web est de 16 px minimum, soit 1 rem. En dessous, la lisibilité chute, surtout pour les utilisateurs de plus de 45 ans ou les personnes présentant des difficultés visuelles.
L’erreur classique : définir une taille correcte sur desktop et ne pas vérifier le rendu sur mobile. Avec un viewport réduit, un texte à 14 px devient rapidement inconfortable. Pensez aussi à la hiérarchie des tailles : si votre H2 fait 18 px et votre corps de texte 16 px, la distinction visuelle est trop faible pour guider la lecture.
Un ratio de taille cohérent entre niveaux de titres aide le lecteur à scanner la page. Augmentez d’au moins 20 à 30 % entre le corps de texte et le premier niveau de sous-titre pour créer un contraste visuel suffisant.
Associer deux polices sans créer de cacophonie typographique
Combiner plusieurs typographies sur un même site est courant, mais mal exécuté, le résultat ressemble à un collage. Deux polices suffisent dans la majorité des cas : une pour les titres, une pour le corps de texte.
Le principe de base : associer des polices qui contrastent sans se contredire. Une sans-serif géométrique (comme Montserrat) en titre avec une serif classique (comme Merriweather) en lecture fonctionne parce que les deux ont des proportions compatibles tout en offrant un contraste visuel clair.
Ce qui ne fonctionne pas : deux polices trop proches (deux sans-serif humanistes par exemple) qui créent une impression de flou, ou deux polices très expressives qui se disputent l’attention. La cohérence typographique passe aussi par la constance : utilisez les mêmes associations sur toutes les pages du site.
Le piège des polices web personnalisées non optimisées
Chaque fichier de police chargé par le navigateur ajoute du poids à la page. Charger quatre graisses d’une police Google Fonts (regular, italic, bold, bold italic) pour n’en utiliser que deux gaspille de la bande passante et ralentit l’affichage.
- Ne chargez que les graisses et styles que vous utilisez réellement dans votre CSS.
- Privilégiez le format WOFF2, plus léger que TTF ou OTF pour le web.
- Utilisez la propriété font-display: swap pour afficher un texte lisible immédiatement, même pendant le chargement de la police.
- Auditez régulièrement vos appels de polices : un thème WordPress ou un page builder peut charger des polices que vous n’avez jamais choisies.
Alignement du texte et accessibilité cognitive
Le texte justifié (aligné à gauche et à droite) donne un aspect soigné sur le papier. Sur le web, il crée des espaces irréguliers entre les mots, surtout sur les colonnes étroites des écrans mobiles. Ces « rivières blanches » perturbent la lecture pour tout le monde, et deviennent un obstacle réel pour les personnes dyslexiques.
L’alignement à gauche reste le choix le plus sûr pour la lisibilité web. Il produit un espacement régulier entre les mots et un bord gauche constant qui sert de repère visuel à chaque retour à la ligne. Entre 5 et 10 % de la population présente une dyslexie, et une part plus large encore rencontre des difficultés de lecture : l’alignement du texte n’est pas un détail cosmétique.
Un dernier point souvent oublié : la longueur de ligne. Au-delà de 75 à 80 caractères par ligne, l’œil perd le fil au retour à la ligne suivante. Contraignez la largeur de vos blocs de texte (max-width en CSS) plutôt que de laisser les paragraphes s’étirer sur toute la largeur de l’écran.
Bienvenue sur Triple Le Mag, là où la connaissance prend une dimension nouvelle. Ouvert aux coopérations, ce site généraliste vous offre une fenêtre sur un monde d’explorations, de tendances et d’innovations. Pour trois fois plus d’inspiration, chaque article est une étincelle qui allume la flamme de votre curiosité. 
