Guide pratique pour sélectionner la typographie idéale de votre site web

Le choix d'une police se joue rarement sur le goût. Il se joue sur trois chiffres qu'on ne regarde presque jamais : la hauteur d'x, le poids du fichier téléchargé, et le décalage de mise en page quand la police arrive après le texte. Le reste, la personnalité de la marque, l'élégance des courbes, arrive après. Une belle typographie illisible à 16 pixels sur un écran de téléphone reste une typographie ratée.

Je vais donc prendre le sujet par le côté technique, parce que c'est celui où on peut être précis et où les erreurs coûtent quelque chose de mesurable. Le côté sensible, lui, se règle en regardant des maquettes.

La hauteur d'x décide de la lisibilité avant la taille

Deux polices réglées à la même taille en pixels n'ont pas la même taille apparente. Ce qui compte, c'est la hauteur des minuscules sans jambage, la hauteur d'x. Une police à hauteur d'x généreuse reste confortable à 16 pixels. Une police à hauteur d'x basse, avec de longues hampes élégantes, demandera 18 ou 19 pixels pour le même confort de lecture, et vos paragraphes prendront plus de place.

Le test se fait en deux minutes : écrivez un paragraphe réel du site, pas un faux latin, réglez la taille, éloignez-vous d'un mètre de l'écran. Si vous plissez les yeux, la police perd. Regardez aussi les paires qui posent problème dans les formulaires : le 1, le I majuscule et le l minuscule, le 0 et le O. Une police où ces trois signes se confondent est mauvaise pour un site qui affiche des références, des codes postaux ou des identifiants.

Autre détail que les designers oublient : le français utilise des accents sur les capitales, des É, des À, des Ç, et des guillemets chevrons. Beaucoup de polices anglo-saxonnes gèrent mal ces signes, avec des accents collés au sommet des lettres quand la ligne est serrée. Écrivez « ÉTÉ » en gros dans la police candidate avant de valider.

Combien de graisses vous utilisez vraiment

Une famille de caractères propose souvent six ou huit graisses, plus les italiques correspondantes. La tentation est d'en charger beaucoup. La réalité d'un site courant : le corps de texte en régulier, une graisse forte pour les titres et les mises en avant, l'italique du régulier pour les citations. Trois fichiers. Parfois quatre si les titres et le gras du texte diffèrent.

Chaque graisse supplémentaire ajoute un fichier à télécharger. Et surtout, ne comptez pas sur le navigateur pour fabriquer un gras que vous n'avez pas chargé : il produira une version épaissie artificiellement, avec des contours empâtés, visible surtout sur les petits corps.

Les polices variables changent la donne sur ce point. Un seul fichier contient toute la plage de graisses, souvent pour un poids proche de deux ou trois fichiers statiques. Si vous avez besoin de quatre graisses ou plus, la variable devient plus légère que la somme des fichiers séparés. Si vous n'en utilisez que deux, restez sur des fichiers statiques.

Le poids des fichiers et le sous-ensemble latin

Une police servie en WOFF2 avec le jeu de caractères complet, cyrillique, grec, vietnamien compris, pèse plusieurs fois ce dont un site français a besoin. Le sous-ensemble latin de base plus le latin étendu couvre le français, ses accents, ses ligatures et l'euro. Découper la police à ce périmètre divise le poids par trois ou quatre selon les familles.

Les services de polices en ligne le font déjà pour vous via l'attribut de plage Unicode : le navigateur ne télécharge que le morceau dont il a besoin. Si vous hébergez les fichiers vous-même, ce qui est souvent préférable, faites le découpage à la main avec un outil de sous-ensemble et vérifiez ensuite que les caractères spéciaux de vos pages survivent. J'ai déjà vu un site perdre ses guillemets français et ses apostrophes courbes dans l'opération.

Servez la police depuis votre propre domaine plutôt que depuis un service tiers. Le cache partagé entre sites n'existe plus dans les navigateurs modernes, l'appel externe ajoute une résolution DNS et une négociation, et vous évitez au passage une question désagréable sur le transfert d'adresses IP vers un service étranger.

Le décalage au chargement, ce clignotement qui agace

Entre le moment où le navigateur affiche le texte et celui où la police arrive, il se passe quelque chose. Deux comportements existent : la page reste blanche à cet endroit, ou elle affiche une police de secours puis bascule. Le second cas provoque un saut visible si les deux polices n'ont pas les mêmes proportions, et ce saut est compté comme un défaut par les mesures de stabilité visuelle.

La propriété font-display arbitre. La valeur swap affiche tout de suite la police de secours puis remplace : rien n'est invisible, mais le saut est là. La valeur optional laisse le navigateur renoncer à la police si elle tarde, ce qui donne une page stable au prix d'un premier affichage parfois dans la police système. Pour un site de contenu, optional est un choix plus défendable qu'il n'y paraît.

Le saut se réduit en réglant la police de secours pour qu'elle occupe la même place : les propriétés size-adjust, ascent-override et descent-override sur une déclaration de police locale servent exactement à ça. Deux heures de travail pour un résultat visible, c'est rare en optimisation d'affichage.

Les licences, le sujet qu'on découvre trop tard

Une police téléchargée sur un site d'échange gratuit n'est pas forcément libre d'usage web. Beaucoup sont distribuées pour un usage personnel, ce qui exclut le site d'une entreprise. Les licences commerciales facturent souvent la police d'impression et la police web séparément, la seconde selon le nombre de pages vues mensuelles ou par paliers de trafic.

Une licence de bureau n'autorise pas le dépôt du fichier sur un serveur web. C'est le contresens le plus fréquent : le graphiste livre sa maquette avec la police achetée pour son poste, l'intégrateur met le fichier en ligne, et personne ne s'aperçoit du problème avant un courrier du fondeur.

Les familles sous licence libre ouverte évitent ce genre d'histoire, s'installent sur vos serveurs sans compter les visites, et couvrent largement les besoins d'un site courant. Gardez simplement le fichier de licence à côté des fichiers de police dans le dépôt, avec la date de téléchargement et la version. Dans trois ans, personne ne se souviendra d'où venait cette police.

Combien de polices sur un site

Deux familles suffisent presque toujours : une pour les titres, une pour le texte. Une seule famille bien dotée en graisses fait aussi très bien l'affaire, et c'est un choix que je recommande souvent pour les sites de moins de cinquante pages. Trois familles, c'est déjà un site qui a du mal à décider ce qu'il est.

La police décorative se réserve au logo et à rien d'autre. Dès qu'elle apparaît dans un titre de section, elle sera un jour reprise dans un intertitre, puis dans une accroche, et le site perdra sa tenue en six mois de publications.

Ce qu'on me demande souvent

Sans empattements ou avec ? Sur les écrans actuels, la question ne se tranche plus par la technique. Les deux se lisent bien. Choisissez selon le ton, vérifiez la hauteur d'x.

Faut-il éviter les polices système ? Non. Une pile de polices système ne coûte aucun téléchargement, n'a aucun décalage au chargement, et rend un site correct. Sur un projet où la performance prime, c'est un choix sérieux.

Comment tester avant de s'engager ? Sur du contenu réel, sur au moins un téléphone d'entrée de gamme, avec un texte long et un tableau de chiffres. Les surprises viennent des chiffres alignés et des mots longs en majuscules.