Typographie web : les règles qui améliorent vos conversions

Il y a quelques mois, on a audité le site d'un cabinet de conseil en RH. Le site avait été refait six mois plus tôt — nouvelle charte graphique, nouvelles photos, nouveau contenu. Résultat : zéro progression du taux de conversion. La cliente nous a dit qu'elle ne comprenait pas, que le site lui semblait "beau".

En moins de dix minutes, on avait identifié le problème. Corps de texte en 13px, couleur #888888 sur fond blanc — soit un ratio de contraste de 3,54:1, en dessous du minimum WCAG AA. Interligne à 1,35. Pas de hiérarchie visuelle sur la page d'accueil. Les titres étaient presque de la même taille que le texte courant.

Résultat après correction : +38 % de temps moyen sur page, -24 % de taux de rebond, +19 % de demandes de contact — sans toucher au contenu, sans refaire le design. Juste de la typographie.

C'est probablement l'un des leviers d'optimisation les plus sous-estimés du web. La typographie ne fait pas que rendre un site "joli". Elle conditionne la vitesse à laquelle vos visiteurs comprennent votre proposition de valeur, la confiance qu'ils vous accordent — et leur décision de rester ou de partir.

1.Typographie et conversion : le lien direct

La relation entre typographie et conversion est rarement aussi directe qu'on pourrait l'imaginer, mais elle est constante. Elle passe par la fluidité de lecture. Quand un texte est difficile à lire — trop petit, trop dense, trop peu contrasté — le visiteur dépense de l'énergie cognitive pour décoder le contenu au lieu de le comprendre. Cette friction, même imperceptible, génère un inconfort qui pousse à quitter la page.

Dans les audits UX que l'on réalise, les problèmes typographiques reviennent dans plus de 70 % des sites vitrine analysés. Ils ne sont jamais seuls responsables d'un mauvais taux de conversion, mais ils amplifient chaque autre point de friction. Un CTA bien placé sur un fond difficile à lire sera moins efficace qu'un CTA dans un contexte typographique maîtrisé.

2.Hiérarchie typographique et lisibilité

La hiérarchie typographique, c'est la capacité d'un site à guider l'œil du visiteur depuis ce qui est le plus important vers ce qui l'est moins. Elle repose sur trois variables : la taille, la graisse et l'espacement.

Sur un site vitrine, la hiérarchie doit répondre à une question simple : si un visiteur n'a que 5 secondes, quelle est la phrase qu'il doit absolument retenir ? Cette phrase doit être la plus grande, la plus grasse, la plus visible de la page. Tout le reste s'organise autour d'elle.

La règle des 3 niveaux

Un site vitrine a rarement besoin de plus de 3 niveaux typographiques actifs simultanément : le H1 (un seul par page), les H2 de section, et le corps de texte. Les H3 existent, mais ils doivent rester discrets. Si vous avez besoin d'un H4 dans votre page d'accueil, c'est souvent le signe que la structure du contenu doit être repensée.

3.L'échelle typographique : construire une structure claire

L'échelle typographique (ou "type scale") est le système de tailles qui organise tous les niveaux de texte d'un site. Elle fonctionne comme une grille musicale : chaque niveau est en rapport harmonieux avec les autres, ce qui crée une cohérence visuelle perceptible même sans l'analyser consciemment.

La méthode la plus simple consiste à choisir un ratio multiplicateur — généralement entre 1,25 (minor third) et 1,5 (perfect fifth) — et à l'appliquer à partir de la taille de base du corps de texte. Avec un corps à 16px et un ratio 1,25, on obtient : 16 → 20 → 25 → 31 → 39 → 49px pour les différents niveaux.

Ce qui importe dans cette échelle, c'est moins les valeurs exactes que le fait d'en avoir une. Un site sans échelle typographique définie accumule les tailles "au hasard" — 14px par-ci, 18px par-là — ce qui crée un sentiment d'incohérence visuelle difficile à nommer mais immédiatement perceptible.

4.La graisse : l'art du contraste visuel

La graisse (ou font-weight) est l'un des outils les plus puissants de la hiérarchie typographique. Elle permet de distinguer visuellement ce qui est important de ce qui est secondaire, sans changer la taille ou la couleur du texte.

Les graisses qui comptent vraiment

Sur le web, on utilise généralement 3 à 4 niveaux de graisse : 400 (regular), 500 (medium), 600 (semibold) et 700 à 800 (bold/extrabold). La clé est de réserver les graisses élevées (700-800) aux titres principaux et CTAs, et de ne jamais utiliser une graisse inférieure à 400 pour le corps de texte — les graisses thin ou light (100-300) sont très difficiles à lire en petite taille.

5.L'interligne : la respiration du texte

L'interligne (line-height en CSS) est l'espace vertical entre les lignes de texte. C'est probablement la propriété typographique la plus négligée et pourtant l'une des plus impactantes sur la lisibilité.

Un texte avec une interligne trop serrée (1.2 ou moins) demande à l'œil de scanner attentivement chaque ligne pour ne pas "sauter" de rangée. À l'inverse, une interligne trop lâche (2.0 ou plus) fragmente visuellement le contenu et ralentit la lecture.

Les valeurs recommandées

• Corps de texte long : 1.65 à 1.8 — la plage optimale pour la lecture soutenue
• Corps de texte court (sous-titres, légendes) : 1.4 à 1.6
• Titres H1/H2 : 1.1 à 1.3 — les titres sont rarement lus ligne à ligne
• CTA et boutons : 1.2 à 1.4 — texte court, lecture quasi-instantanée

6.Contraste et accessibilité WCAG

Le ratio de contraste entre la couleur du texte et la couleur du fond est l'un des critères les plus objectivement mesurables de la typographie web. Les WCAG (Web Content Accessibility Guidelines) définissent des seuils minimaux que tout site professionnel doit respecter — pas seulement pour des raisons légales, mais parce qu'un contraste insuffisant nuit directement à l'expérience utilisateur et aux conversions.

Dans la pratique, on vise systématiquement le niveau AAA (7:1) pour le corps de texte. C'est le niveau où la lecture devient confortable pour la majorité des utilisateurs, y compris ceux avec une légère déficience visuelle ou dans des conditions d'éclairage difficiles (lumière du soleil sur mobile, par exemple).

7.Choisir ses polices : ce qui fonctionne vraiment

Le choix d'une police web dépend de trois facteurs qui n'ont rien à voir avec l'esthétique pure : la lisibilité à l'écran, la performance de chargement, et la cohérence avec le positionnement de la marque. Une police magnifique en grands titres peut être catastrophique en corps de texte à 16px.

Quatre combinaisons qui fonctionnent en contexte web

Performance : auto-héberger ses polices

Charger des polices depuis Google Fonts génère une requête externe qui peut ajouter 150 à 400ms au temps de rendu initial. Avec next/font en Next.js, les polices sont automatiquement auto-hébergées et chargées via le serveur Next.js, ce qui élimine la requête tierce et améliore le score Lighthouse et les Core Web Vitals (LCP notamment).

8.Typographie mobile : les règles spécifiques

La typographie mobile mérite une attention particulière, car les conditions de lecture y sont fondamentalement différentes : écran plus petit, distance de lecture variable, contexte souvent mobile (transports, rue), et police de rendu parfois moins fine que sur desktop.

Les ajustements mobiles essentiels

• Corps de texte ≥ 16px pour éviter le zoom automatique des navigateurs iOS/Android
• Largeur de colonne ≤ 90 % de la largeur viewport (éviter les marges trop faibles)
• Titres H1 redimensionnés : 2rem à 2.4rem maximum sur mobile (pas les 3.5rem du desktop)
• Interligne légèrement augmentée : 1.8 à 2.0 pour le corps (lecture plus rapide sur petit écran)
• Éviter les polices ultra-légères ou ultra-compressées : le rendu sub-pixel est moins fin sur mobile

9.Typographie des CTAs : les détails qui convertissent

Le bouton d'appel à l'action est l'élément le plus important de votre page en termes de conversion. Sa typographie doit obéir à des règles légèrement différentes du reste du contenu — elle doit déclencher une action, pas une lecture.

Les 5 règles typographiques d'un CTA efficace

• Graisse minimale 600 (semibold) — le texte du bouton doit avoir du poids visuel
• Taille minimale 15px sur desktop, 16px sur mobile
• Éviter les majuscules pour les CTA longs (plus de 3 mots) — la lisibilité chute
• Contraste texte/fond du bouton ≥ 4.5:1 — les boutons colorés sont souvent hors conformité
• Pas d'italique sur les CTA — l'italique suggère une hésitation, pas une action

10.Checklist typographique

Voici les 12 points que l'on vérifie systématiquement lors d'un audit typographique. Cliquez pour cocher les éléments déjà en place sur votre site.

11.FAQ

La typographie est rarement ce qui vient en premier dans une refonte. On pense design, couleurs, contenu, SEO — et les polices arrivent en dernier, presque par défaut. C'est précisément pourquoi les sites qui travaillent sérieusement leur typographie prennent un avantage concurrentiel réel : ils sont plus agréables à lire, plus clairs dans leur message, et ils convertissent mieux.

Les fondamentaux sont simples : corps de texte à 16px minimum, interligne entre 1.65 et 1.8, contraste à 4.5:1 au minimum, hiérarchie en trois niveaux clairement différenciés. Ce ne sont pas des détails — ce sont des conditions de base pour qu'un visiteur lise votre contenu jusqu'à votre CTA.