La police donne le ton de votre site avant qu’on ait lu une phrase : un cabinet d’avocats et un camion à pizzas ne s’écrivent pas de la même façon. Son premier travail reste pourtant d’être lue, vite, sur un téléphone, en plein soleil, par des yeux de tous les âges.
Voici comment la choisir, la régler et la charger sans alourdir la page.
Lisible d’abord
Une police de texte se juge sur un paragraphe entier, et sur un téléphone. Quelques essais suffisent à faire le tri :
- Les lettres qui se confondent. Tapez « Il1 », « rn m » et « 0O ». Si le I majuscule, le l minuscule et le chiffre 1 se ressemblent, un numéro de téléphone ou un code d’accès devient un piège.
- Les minuscules assez hautes. À taille égale, une police aux minuscules grandes (on parle de hauteur d’x) se lit mieux en petit.
- Les formes ouvertes. Un c, un e ou un a dont l’ouverture ne se referme pas reste net en petit et sur un écran peu précis.
- Les chiffres. Vos prix, vos horaires et votre numéro passent par eux : ils doivent être aussi clairs que les lettres.
Gardez les polices manuscrites, décoratives ou très étroites pour les titres, en grand.
La taille et l’interlignage
Les navigateurs affichent le texte à 16 pixels par défaut, le plus souvent (MDN) : gardez cette taille comme plancher pour le corps du texte. Exprimez les tailles en unités relatives (rem ou em) : MDN rappelle que des tailles en pixels empêchent, dans certains navigateurs, d’agrandir le texte. Or le critère WCAG 1.4.4 demande qu’il puisse être agrandi jusqu’à 200 % sans rien perdre.
Trois réglages font ensuite la différence :
- L’interlignage. Autour de 1,5 fois la taille du texte pour un paragraphe, un peu moins pour un grand titre. Le W3C retient 1,5 comme repère pour les blocs de texte (critère 1.4.8), et web.dev conseille une valeur sans unité, qui suit la taille du texte.
- La longueur des lignes. De 50 à 75 caractères par ligne, espaces compris, recommande le Baymard Institute (2022), qui a vu des visiteurs renoncer à lire des lignes trop longues. Le W3C fixe 80 caractères au plus à son niveau le plus exigeant.
- L’alignement. Alignez à gauche. Le texte justifié crée des trous irréguliers entre les mots, qui gênent les personnes ayant des difficultés de lecture (W3C, critère 1.4.8).
Pour les titres, prévoyez une taille qui suit la largeur de l’écran, entre un minimum et un maximum (web.dev).
Une ou deux familles, rarement plus
Une famille regroupe une police et ses variantes : graisses (fin, normal, gras) et italiques. Un site d’indépendant en demande rarement plus de deux :
- une seule famille, en jouant sur la taille et la graisse : le choix le plus sûr, et le plus léger ;
- deux familles : une police de caractère pour les titres, une police de texte sobre pour le reste. Un restaurant peut s’offrir un titre à empattements élégant, et un texte sans empattements très lisible.
Chaque police de plus ajoute des fichiers à télécharger, et la page perd son unité. Limitez aussi les graisses : chacune est souvent un fichier à part. Une police variable les range toutes dans un seul fichier, plus lourd qu’une graisse seule mais plus léger que plusieurs (web.dev).
Pour le texte courant, les polices déjà installées sur l’appareil ne coûtent rien à charger : web.dev les recommande quand c’est possible.
La licence : gratuite ne veut pas dire sans règles
Un fichier de police est un logiciel, protégé par le droit d’auteur, et sa licence dit ce que vous pouvez en faire. Avant de la poser sur votre site, vérifiez trois points :
- L’usage web est-il permis ? Une police achetée pour l’impression ne l’est pas forcément pour un site.
- Pouvez-vous l’héberger vous-même ? Certaines licences l’encadrent.
- Pouvez-vous la modifier ? Alléger un fichier en retirant les caractères inutiles est une modification : web.dev conseille de vérifier la licence avant.
La plupart des polices de Google Fonts sont publiées sous la SIL Open Font License, quelques-unes sous Apache 2.0 ou la licence Ubuntu. L’OFL autorise l’usage sur un site, la modification et la redistribution ; Google invite tout de même à lire la licence de chaque police employée.
Reste la vie privée. Charger une police depuis les serveurs de Google leur transmet l’adresse IP du visiteur. En 2022, un tribunal de Munich a jugé que le faire sans consentement enfreignait le RGPD, la police pouvant servir sans contacter ces serveurs. Ce jugement allemand reste isolé ; héberger les fichiers avec votre site règle la question d’avance.
Le chargement : du texte tout de suite
Une police web est un fichier que le navigateur télécharge avant de pouvoir l’afficher, et près de neuf pages sur dix en emploient au moins une (Web Almanac 2025). Pendant l’attente, le texte est soit invisible, soit affiché dans une police de secours, puis remplacé. La propriété CSS font-display choisit entre les deux (web.dev) :
| Valeur | Ce qui se passe | Pour quoi |
|---|---|---|
| swap | texte affiché aussitôt en police de secours, remplacé à l’arrivée | un titre de marque |
| fallback | une attente de 100 ms ; la police web ne remplace la police de secours que si elle arrive dans les 3 secondes | un bon compromis |
| optional | une attente de 100 ms ; si la police n’est pas là, la page garde la police de secours | le texte courant |
| block | texte invisible jusqu’à 3 secondes environ, le temps que la police arrive | à éviter pour le texte |
Le remplacement fait parfois sauter le texte : les lignes changent de longueur, et tout ce qui suit se décale, un défaut que Google mesure. Pour le limiter, web.dev conseille une police de secours aux proportions voisines, ajustable avec size-adjust, ou la valeur optional.
Côté fichiers :
- Servez du WOFF2, le format le plus compact : environ 30 % plus léger que WOFF (web.dev).
- Gardez les caractères utiles. Une police latine compte souvent de 100 à 1 000 glyphes ; un sous-ensemble limité au français allège le fichier, si la licence le permet.
- Préchargez la police du texte, une seule, pour que le navigateur la demande tôt.
L’espacement doit pouvoir changer
Certaines personnes, malvoyantes ou dyslexiques, élargissent l’espace entre les lignes, les mots et les lettres avec une extension ou une feuille de style à elles. Le critère WCAG 1.4.12 (niveau AA) demande que votre page le supporte sans perte de contenu, jusqu’à :
- un interlignage de 1,5 fois la taille du texte ;
- un espace de 2 fois la taille du texte après chaque paragraphe ;
- un espacement des lettres de 0,12 fois la taille du texte ;
- un espacement des mots de 0,16 fois la taille du texte.
Ces valeurs sont un minimum que la page doit tolérer ; vos propres réglages restent libres. En France, le RGAA, le référentiel d’accessibilité de l’administration, reprend les mêmes seuils à son critère 10.12.
Le piège courant est un bouton ou un encadré de hauteur fixe, dont le texte déborde ou se coupe quand l’espacement grandit. Le W3C suggère des dimensions en em, qui grandissent avec le texte.
En résumé : une police de texte sobre, une police de titre au plus, 16 pixels pour le corps, un interlignage autour de 1,5, des lignes de 50 à 75 caractères. Lisez la licence, servez du WOFF2 depuis votre site, et réglez font-display pour afficher le texte tout de suite.
Sources
- MDN, font-size
- W3C, Understanding WCAG 2.2 : 1.4.4 Resize Text
- W3C, Understanding WCAG 2.2 : 1.4.8 Visual Presentation
- W3C, Understanding WCAG 2.2 : 1.4.12 Text Spacing
- Baymard Institute, Readability: The Optimal Line Length (2022)
- web.dev, Typography, Learn Responsive Design (2021)
- web.dev, Best practices for fonts (2022)
- web.dev, Optimize Cumulative Layout Shift (2025)
- HTTP Archive, Web Almanac 2025 : Fonts (2026)
- Google Fonts, le dépôt des polices et de leurs licences
- SIL, Open Font License
- Landgericht München I, jugement du 20 janvier 2022, 3 O 17493/20
- DINUM, RGAA 4.1.2 : critères et tests