Tu montes ton site, tu arrives sur le réglage de la typo et là, c’est le flou total. 14px ? 16px ? 18px ? Et tu te dis que de toute façon, « ça se voit pas tant que ça ».
Spoiler : ça se voit. Une police trop petite, c’est la garantie de faire plisser les yeux à tes visiteurs et de les faire fuir avant même ta première phrase. Sur mobile, où se passe plus de la moitié du trafic, c’est encore pire.
Je te donne les bonnes tailles directement, sans te noyer sous la théorie. Tu vas savoir quoi régler sur desktop comme sur mobile en 5 minutes, avec le tableau exact qu’on applique à l’agence.
Si tu ne dois retenir que ça :
- Texte : 16px minimum, sur desktop comme sur mobile.
- Titres : une hiérarchie claire, du plus gros (H1) au plus petit, environ 1,3 à 2 fois la taille du texte.
- Sur mobile : tu réduis uniquement les titres, jamais le texte de lecture.
Le reste, c’est de l’ajustement. Mais si tu appliques juste ces trois lignes, tu fais déjà mieux que 80% des sites.
Quelle taille pour les paragraphes sur ton site
Ton texte (les paragraphes) doit faire 16px minimum sur desktop.
C’est la taille par défaut de tous les navigateurs depuis des années. C’est la taille que ton visiteur lit sans effort. En dessous, tu lui demandes de forcer. Et tu n’es pas obligé de me croire sur parole : Material Design (Google) part sur 16px, iOS (Apple) sur 17px.
Quand Google et Apple sont d’accord, c’est rarement un hasard.
Mon conseil : vise 16 à 18px pour le corps de texte. Et si tu fais un blog, où les gens lisent de longs articles, n’hésite pas à monter un peu, vers 18 à 20px. Plus on lit longtemps, plus le confort compte.
Le tableau des tailles à appliquer (desktop + mobile)
Un site, ce n’est pas une seule taille. Tu as des titres, des sous-titres, du texte, des petites mentions. Voici les fourchettes que je te recommande, c’est exactement la logique qu’on applique sur nos projets :
| Élément | Desktop | Mobile |
|---|---|---|
| Titre principal (H1) | 48 à 56px | 32 à 40px |
| Titre de section (H2) | 32 à 46px | 28 à 32px |
| Sous-titre (H3) | 24 à 32px | 20 à 26px |
| Texte courant (paragraphe) | 16 à 18px | 16px |
| Petites mentions, légendes | 12 à 14px | 12 à 14px |
| Bouton | 14 à 16px | 14 à 16px |
Ces fourchettes te laissent de la marge selon ta charte. Le principe à respecter : une hiérarchie claire du H1 jusqu’au texte, et un corps qui ne descend jamais sous 16px. C’est ce genre de cohérence qu’on construit quand on fait une refonte de site WordPress.
Sur mobile, réduis les titres, pas le texte
C’est là que la plupart des gens se plantent. Le réflexe, c’est de tout réduire parce que « l’écran est plus petit ».
Erreur. Comme tu le vois dans le tableau, le texte courant reste à 16px sur mobile. Ton visiteur tient son téléphone à 30 cm de ses yeux, il a autant besoin de confort que sur desktop, sinon plus. Ce qui rétrécit, ce sont uniquement les gros titres, pour qu’ils ne débordent pas de l’écran.
Mon astuce terrain : sur les champs de formulaire, ne descends jamais sous 16px. En dessous, le navigateur de l’iPhone zoome automatiquement quand l’utilisateur clique dans le champ, et ça casse toute ta mise en page. Petit détail, gros effet.
px, em ou rem : lequel utiliser ?
C’est la question technique qui revient toujours. Voici la différence concrète, et ma reco à la fin.
Le px
C’est une taille fixe. 16px, c’est 16px, point. Avantage : simple à visualiser, tu contrôles tout. Inconvénient : si ton visiteur a augmenté la taille de police par défaut de son navigateur (souvent pour des raisons de vue), ton texte en px ne bougera pas. Tu lui imposes ta taille.
Le em
C’est une taille relative à l’élément parent. Pratique, mais ça peut vite devenir un casse-tête : un em dans un em dans un em, et tes tailles se cumulent sans que tu comprennes pourquoi.
Le rem
C’est une taille relative à la racine du site (souvent 16px par défaut). Tu fixes une base une fois, tout en découle, et surtout ça s’adapte aux préférences du navigateur de ton visiteur.
Ma reco : raisonne en px pour visualiser et décider tes tailles (c’est plus simple dans ta tête), mais fais créer ton site en rem avec une base de 16px. Le em, tu le gardes pour des cas ponctuels (un espacement qui doit suivre la taille d’un bouton, par exemple).
Les 3 pièges qui plombent ta lisibilité
La taille ne fait pas tout. Trois trucs ruinent la lecture même avec la bonne typo :
1. L’interligne trop serré : Une bonne taille avec des lignes collées, ça reste pénible. Vise un interligne de 150% (1,5) pour le texte courant.
2. Les lignes trop longues : Sur desktop, ne laisse pas une ligne traverser tout l’écran. Au-delà de 70 à 80 caractères, l’oeil se perd. Limite la largeur de tes blocs de texte.
3. Le contraste faible : Du gris clair sur fond blanc à 14px, c’est le combo parfait pour fatiguer tes lecteurs. La taille compte autant que le contraste.
En résumé
Texte à 16px desktop ET mobile (un peu plus pour un blog), hiérarchie de titres claire, et sur mobile tu ne touches qu’aux titres. Raisonne en rem pour l’accessibilité. Respecte ça et le plus gros du travail de lisibilité est fait.
Si tu veux qu’on jette un oeil à ton site ou qu’on te construise un vrai système typo propre, c’est notre métier. Découvre notre agence WordPress à Montpellier, ou si tu préfères gérer ça toi-même, jette un oeil à notre formation WordPress.
