Design web
Typographie web : les règles que tout site doit respecter
Eliott Guinaudie · 8 mai 2026
La typographie représente 95 % du design web. Pourtant, la plupart des sites choisissent leurs polices au hasard et ne pensent jamais à la taille, à l'interligne ou à la longueur des lignes. Résultat : des visiteurs qui peinent à lire, restent moins longtemps et convertissent moins. Voici comment corriger ça.
Pourquoi la typographie influence directement tes conversions
Une police illisible crée de la friction cognitive. Ton visiteur doit fournir un effort pour déchiffrer ton texte. Cet effort, même inconscient, l'épuise et l'incite à partir. À l'inverse, un texte bien composé rend la lecture fluide et renforce la crédibilité de ta marque.
Règle des 16px : ne descends jamais en dessous de 16px pour ton corps de texte sur desktop. Sur mobile, vise 17 à 18px. En dessous de ces valeurs, la lecture devient inconfortable et ton taux de rebond grimpe.
Construire une hiérarchie typographique lisible
La hiérarchie typographique, c'est l'ensemble des signaux visuels qui permettent à ton lecteur de scanner ta page sans effort. Elle passe par les tailles, les graisses de police et les contrastes de couleur.
- Titre H1 : 36 à 48px, gras, couleur principale de ta charte
- Titres H2 : 24 à 30px, semi-gras, contraste élevé sur le fond
- Corps de texte : 16 à 18px, regular, couleur neutre foncée
- Légendes et notes : 13 à 14px, italique ou couleur atténuée
- Maximum 2 niveaux de hiérarchie visibles simultanément sur une même section
Choisir tes polices sans te tromper
Pour les sites de PME, commence par Google Fonts : gratuit, performant et intégrable en deux lignes de code. Pour trouver des associations de polices qui fonctionnent visuellement, Typewolf recense les meilleures combinaisons utilisées par des sites réels. C'est une source d'inspiration directement exploitable.
Règle des deux polices : une pour les titres, une pour le corps du texte. C'est tout. Chaque police supplémentaire ajoute du bruit visuel et alourdit le temps de chargement de ta page.
Interligne et longueur de ligne, les détails qui changent tout
Deux paramètres souvent ignorés font pourtant toute la différence. L'interligne idéal pour du corps de texte se situe entre 1.5 et 1.7 (soit 150 à 170 % de la taille de police). La longueur de ligne optimale est de 60 à 80 caractères par ligne. Au-delà, l'oeil perd le fil et saute des lignes. Le guide typographique de web.dev et les recherches de Nielsen Norman Group sur la lisibilité en ligne confirment ces valeurs avec des tests utilisateurs réels.
Pour la propriété CSS elle-même, la documentation de MDN Web Docs détaille toutes les valeurs possibles. Utilise des valeurs unitless (1.6 plutôt que 1.6em) pour éviter les comportements inattendus sur les éléments enfants.
Les outils pour tester et améliorer ta typographie
Commence par vérifier la performance de tes polices avec PageSpeed Insights : les polices web mal chargées sont souvent responsables d'1 à 2 secondes de délai sur le rendu. Si tu veux explorer des polices professionnelles au-delà de Google Fonts, Adobe Fonts propose une bibliothèque premium incluse dans Creative Cloud. Et pour tester des combinaisons directement dans le navigateur, Fontpair est l'outil le plus simple et le plus rapide.
Par où commencer dès aujourd'hui
Ouvre ton site sur mobile. Zoom à 100 %. Si tu dois pincer l'écran pour lire confortablement, ta taille de police est trop petite. Deuxième test : compte le nombre de caractères par ligne. Si tu dépasses 90, réduis la largeur de ta colonne de texte. Ces deux corrections prennent moins d'une heure et ont un impact immédiat sur la lisibilité.
La typographie est l'un des nombreux éléments de design qui influencent tes conversions. Pour avoir une vision complète des problèmes à corriger, lis aussi les 5 erreurs de design qui coûtent des clients et commence par les corrections les plus rapides à mettre en place.
Tu veux un site qui convertit vraiment ?