Typographie

La typographie, c'est le choix et la mise en forme du texte : polices, tailles, interlignage, largeur des lignes, alignement. Sur un site, c'est elle qui décide si une page se lit sans effort ou si le visiteur repart. Ce guide s'adresse aux éditeurs de sites qui ne sont pas designers : choisir et associer ses polices, régler les tailles, rester lisible et accessible, charger les polices sans ralentir le site ni enfreindre le RGPD, et savoir quand centrer un texte.

Une police est une famille de caractères dessinés dans un même style. Pour un site, on la choisit d'abord pour sa lisibilité, ensuite pour l'image de la marque : une police originale qui fatigue l'œil dessert le contenu.

Deux grandes familles se partagent le texte des sites :

• Serif (avec empattements) : les lettres se terminent par de petits traits, comme dans Times ou Garamond. Elles évoquent l'édition, la presse, la tradition. Exemples gratuits : Lora, Merriweather, Source Serif 4.

• Sans serif (sans empattements) : les traits se terminent nets, comme dans Arial ou Helvetica. Elles donnent un ton plus neutre et moderne, et dominent les interfaces. Exemples gratuits : Inter, Source Sans 3, IBM Plex Sans.

Les deux familles conviennent au texte courant d'un site, à condition d'une taille suffisante : choisissez selon le ton de votre site. Les polices manuscrites, décoratives ou très fines sont à réserver à quelques mots (un logo, un grand titre), jamais aux paragraphes.

La formule la plus sûre : une police pour les titres, qui porte la personnalité du site, et une police très lisible pour le texte courant. Une seule famille peut aussi suffire, en jouant sur la taille et la graisse pour distinguer les titres. Ce choix se note dans la charte graphique, avec les graisses et les tailles utilisées (voir créer une charte graphique).

Dans le CSS, terminez toujours la liste des polices par une famille générique (serif ou sans-serif) : si la police choisie ne se charge pas, le navigateur affiche une police du même genre plutôt que sa police par défaut.

Deux polices suffisent dans la plupart des cas, trois au maximum (par exemple une police à chasse fixe pour afficher du code). Au-delà, la page paraît désordonnée, et chaque fichier de police alourdit le chargement.

La graisse est l'épaisseur des traits. En CSS, elle va de 100 (Thin, très fin) à 900 (Black, très épais) ; 400 correspond au normal (Regular) et 700 au gras (Bold). Trois graisses couvrent l'essentiel d'un site : le normal pour le texte, le gras pour les mots importants, et 600 ou 700 pour les titres. Évitez les graisses très fines (100 à 300) pour le texte courant : elles deviennent pénibles à lire en petite taille.

Les polices variables regroupent toutes les graisses dans un seul fichier. Elles sont intéressantes si vous utilisez beaucoup de graisses ; pour deux ou trois, des fichiers séparés sont souvent plus légers, car une police variable est souvent plus lourde qu'une graisse seule (voir le guide des polices de web.dev, en anglais).

Les navigateurs affichent le texte à 16 pixels par défaut. C'est un minimum pour le texte courant d'un site ; 17 ou 18 pixels donnent plus de confort pour les longs articles.

Exprimez les tailles en rem plutôt qu'en pixels : 1rem vaut la taille de base du navigateur, soit 16 pixels si le visiteur n'a rien changé. Celui qui a agrandi le texte dans les réglages de son navigateur voit alors votre site plus grand ; avec des tailles en pixels, certains navigateurs ignorent ce réglage, ce qui rend le site moins accessible (MDN, font-size).

Les titres guident le lecteur qui survole la page : chaque niveau doit se distinguer nettement du suivant. Une méthode simple consiste à multiplier la taille par un même rapport d'un niveau à l'autre, par exemple 1,25. Avec un texte à 1rem (16 pixels), cela donne :

• H4 : 1,25rem (20 pixels) ;

• H3 : 1,563rem (25 pixels) ;

• H2 : 1,953rem (31 pixels) ;

• H1 : 2,441rem (39 pixels).

Sur téléphone, un rapport plus faible (1,2 par exemple) évite qu'un titre principal occupe tout l'écran. La fonction CSS clamp() fait aussi varier une taille avec la largeur de l'écran, entre un minimum et un maximum ; pour que le zoom à 200% reste possible, MDN conseille un maximum au moins deux fois plus grand que le minimum, dans une unité relative (MDN, clamp()).

La hiérarchie compte aussi pour l'accessibilité et le référencement : un H2 pour chaque grande partie, des H3 à l'intérieur, sans sauter de niveau. Le W3C rappelle que sauter des niveaux de titres peut dérouter le lecteur et doit être évité autant que possible (tutoriel du W3C sur les titres, en anglais). Ne choisissez donc pas un niveau de titre pour sa taille : réglez la taille dans le thème. La hiérarchie visuelle fait partie des principes de l'UI design.

L'interlignage (line-height en CSS) est l'espace vertical entre les lignes. Pour le texte courant, visez au moins 1,5 fois la taille du texte : c'est le minimum que MDN recommande pour aider les personnes malvoyantes ou dyslexiques (MDN, line-height), et le seuil du critère WCAG 1.4.8. Les titres, plus gros et plus courts, se contentent de 1,1 à 1,3. Écrivez l'interlignage sans unité (1.6 plutôt que 1.6em ou 26px) : il suit alors la taille de chaque élément.

Une ligne trop longue fatigue l'œil, qui peine à retrouver le début de la ligne suivante ; une ligne trop courte hache la lecture. Les chiffres à viser sont plus bas, dans la section Peut-on centrer du texte sur le Web ? (puce « Limiter la largeur du texte »), et le guide mettre en page de longs textes détaille les autres réglages d'un article long. En CSS, l'unité ch (la largeur du chiffre « 0 » dans la police utilisée) limite directement la colonne de texte, par exemple max-width: 70ch.

Les règles d'accessibilité WCAG (Web Content Accessibility Guidelines, publiées par le W3C) fixent des seuils précis pour le texte. Le niveau AA est celui que l'on vise en général ; le niveau AAA est plus exigeant.

• Contraste : au moins 4,5:1 entre le texte et son fond, et 3:1 pour les grands textes, à partir de 18 points (environ 24 pixels) ou 14 points en gras (environ 18,5 pixels) : critère 1.4.3, niveau AA. Méfiez-vous du gris clair sur fond blanc et du texte posé sur une photo. Pour choisir les couleurs, voir les couleurs de votre marque et de votre site.

• Agrandissement : le texte doit pouvoir être agrandi jusqu'à 200% sans perte de contenu ni de fonction (critère 1.4.4, niveau AA). Des tailles en rem ou en em et des blocs qui s'agrandissent avec leur texte évitent les mots coupés ou superposés.

• Espacement : la page doit rester lisible si le visiteur impose un interlignage de 1,5, un espace après les paragraphes de 2 fois la taille du texte, un espacement des lettres de 0,12 fois et des mots de 0,16 fois la taille du texte (critère 1.4.12, niveau AA). Évitez donc les hauteurs fixes sur les blocs de texte.

• Présentation : le critère 1.4.8 (niveau AAA) ajoute un texte non justifié, des lignes de 80 caractères au plus et un interlignage d'au moins 1,5.

• Tailles minimales : gardez au moins 16 pixels (1rem) pour le texte courant, et réservez les tailles plus petites aux légendes et aux mentions courtes.

Sur téléphone, ces règles comptent encore plus : voir le responsive design.

Une police qui n'est pas installée sur l'appareil du visiteur doit être téléchargée lors de sa première visite. Ce téléchargement pèse sur la vitesse d'affichage, et l'endroit d'où viennent les fichiers a des conséquences juridiques.

Avec le code d'intégration proposé par Google Fonts, le navigateur du visiteur télécharge les polices depuis les serveurs de Google, qui reçoivent donc son adresse IP. Le 20 janvier 2022, le tribunal régional de Munich (Landgericht München I, affaire 3 O 17493/20) a jugé que cette transmission, faite sans le consentement du visiteur, violait le RGPD : l'exploitant du site a été condamné à lui verser 100 € de dommages et intérêts et à cesser de transmettre son adresse IP à Google. Le tribunal a relevé que les polices peuvent être utilisées sans connexion aux serveurs de Google au chargement de la page (texte de la décision, en allemand). C'est une décision allemande, mais elle s'appuie sur le RGPD, qui s'applique aussi en France.

La solution la plus simple est d'héberger les polices sur votre propre serveur : les polices de Google Fonts sont publiées sous des licences qui autorisent leur redistribution, donc leur hébergement sur votre site (dépôt officiel de Google Fonts, en anglais). Les visiteurs ne contactent plus Google pour afficher le texte. Pour les autres obligations, voir le RGPD pour votre site.

Côté vitesse, l'hébergement sur votre site n'est pas automatiquement plus rapide : selon web.dev, l'écart avec Google Fonts est moins net qu'on le croit, et l'auto-hébergement a surtout un avantage avec un CDN et HTTP/2. Pensez aussi à ne garder que les graisses que vous utilisez vraiment.

WOFF2 est le format de police à utiliser sur le Web : il compresse environ 30% mieux que l'ancien WOFF et il est pris en charge par tous les navigateurs actuels ; les spécialistes cités par web.dev conseillent de ne servir que du WOFF2. Si votre police n'existe qu'en TTF ou OTF, convertissez-la, à condition que sa licence l'autorise.

Autre gain : le sous-ensemble de caractères. Une police contient souvent des centaines de caractères (cyrillique, grec, vietnamien…) inutiles sur un site en français. Google Fonts découpe déjà ses fichiers par alphabet (descripteur unicode-range) ; si vous hébergez vos polices, ne gardez que les caractères latins.

La propriété font-display, dans la règle @font-face, décide de ce qui s'affiche tant que la police n'est pas arrivée (MDN, font-display) :

• swap : le texte s'affiche tout de suite dans la police de secours, puis la police du site la remplace dès qu'elle est chargée. C'est le réglage le plus courant ; le changement de police peut faire bouger la mise en page.

• optional : le navigateur attend la police très peu de temps (100 millisecondes au plus selon web.dev) ; si elle n'est pas arrivée, la page garde la police de secours. C'est le choix le plus rapide, mais la police du site peut ne pas s'afficher lors de la première visite.

• block : le texte reste invisible un court instant en attendant la police, puis s'affiche dans la police de secours si elle tarde.

Sans réglage, le comportement dépend du navigateur : selon web.dev (2022), Chrome et Firefox masquent le texte jusqu'à 3 secondes, et Safari jusqu'à l'arrivée de la police. Avec Google Fonts, ajoutez &display=swap à l'adresse du code d'intégration ; pour une police hébergée sur votre site, écrivez-le dans la règle @font-face :

Depuis WordPress 6.5, la bibliothèque de polices (Font Library) de l'éditeur télécharge les polices Google que vous installez sur votre serveur, dans le dossier wp-content/fonts (annonce de WordPress, en anglais). Les réglages de typographie d'un thème de blocs se font une fois pour tout le site : voir le Full Site Editing. Divi intègre de son côté Google Fonts dans ses options : voir les typographies dans Divi.

Associer deux polices, c'est chercher un contraste net sans désaccord. Quelques règles simples :

• Contrastez franchement : une serif pour les titres et une sans serif pour le texte, ou l'inverse. Deux sans serif trop proches donnent l'impression d'une erreur plutôt que d'un choix.

• Gardez des proportions voisines : deux polices dont les minuscules ont une hauteur comparable (la « hauteur d'x ») vont mieux ensemble dans un même bloc.

• Pensez aux superfamilles : certaines familles existent en version serif et sans serif dessinées pour aller ensemble, comme IBM Plex Sans et IBM Plex Serif, Source Sans 3 et Source Serif 4, ou Merriweather et Merriweather Sans, toutes gratuites sur Google Fonts.

• Testez sur un vrai contenu : un titre et trois paragraphes de votre site, sur ordinateur et sur téléphone, plutôt qu'une phrase d'exemple.

Pour trouver des idées, Font Pair (dans les ressources ci-dessous) propose des paires de polices Google Fonts toutes faites, à essayer avec votre propre texte.

• Lisibilité et alignement à gauche : De nombreuses études UX démontrent que l'alignement à gauche est généralement plus facile à lire, en particulier pour les longs paragraphes. Cela est dû au fait que nos yeux sont habitués à suivre un point de départ fixe à gauche lorsqu'ils lisent.

• Exceptions au centrage : Le centrage peut être efficace dans certains cas pour :

  • Titres et en-têtes : Il crée un point focal et une structure visuelle claire.

  • Citations et éléments courts : Le centrage peut améliorer l'impact visuel et l'esthétique.

  • Appels à l'action : Attirer l'attention sur des éléments importants.

• Limites du centrage : Centrer de longs paragraphes peut rendre la lecture plus difficile, car l'œil doit rechercher le début de chaque ligne.

Recommandations

• Limiter la largeur du texte : Maintenir la largeur des blocs de texte entre 500px et 80-100 caractères pour une meilleure lisibilité. Plus précisément : viser 45 à 75 caractères par ligne pour un texte suivi, sans dépasser 80 caractères (critère WCAG 1.4.8) : voir mettre en page de longs textes.

• Colonnes : Diviser le contenu en plusieurs colonnes peut être une solution pour les longs textes.

• Alignement à gauche par défaut : Privilégier l'alignement à gauche pour le corps du texte et utiliser le centrage avec parcimonie.

La meilleure pratique UX est de ne pas trop centrer le contenu. Comme on lit de gauche à droite (pour de nombreuses langues), avec du texte centré, l’œil ne sait pas où aller.

Plus le texte est long, moins on peut être enclin à le centrer : 2 lignes de texte centré peuvent ne pas être trop difficiles à lire, 3 lignes c'est discutable, 4 lignes ou plus, c'est assez difficile à lire.

• Google Fonts : polices gratuites et open source, utilisables aussi pour un usage commercial

• Fontshare : polices gratuites de la fonderie Indian Type Foundry, pour un usage personnel ou commercial

• Font Squirrel : polices gratuites sélectionnées pour leur licence commerciale (vérifiez la licence de chaque police)

• Font Pair : Typos (polices de caractère) par paires