La typographie pour le Web — PerfectPixels

Qu’est-ce que la typographie?

La typographie est l’art de choisir et d’agencer les caractères (polices, tailles, longueur de ligne, interlignage et hiérarchie) pour que le texte soit lisible et exprime la personnalité d’une marque. Sur le Web, elle englobe aussi la façon dont les polices sont transmises au navigateur et dont le texte s’adapte à chaque taille d’écran et aux réglages de chaque utilisateur.

La typographie Web se distingue de l’imprimé sur un point important : vous ne maîtrisez pas le rendu final. Les lecteurs zooment, changent la taille de police par défaut, passent en mode sombre, utilisent un lecteur d’écran ou traduisent la page. Une bonne typographie Web est donc un système de règles souple plutôt qu’une mise en page figée, bâti en CSS avec des unités relatives pour tenir le coup dans toutes ces situations.

Pourquoi la typographie est importante

Lisibilité : un site Web, c’est surtout du texte. La taille, l’espacement et la longueur de ligne déterminent si les gens le lisent ou s’ils le survolent avant de partir.
Hiérarchie : une échelle claire de titres, de texte courant et d’étiquettes montre ce qui est important et facilite le survol de la page.
Personnalité de la marque : les polices véhiculent un ton, technique, chaleureux ou formel, souvent avec plus de constance que les images.
Performance : les polices Web sont des fichiers à télécharger. Trop de fichiers ou un chargement mal géré peuvent retarder l’affichage du texte et provoquer des décalages de mise en page qui nuisent aux Core Web Vitals.
Accessibilité : le contraste, le texte redimensionnable et l’espacement ajustable sont des exigences des WCAG, et les organisations ontariennes assujetties à la LAPHO (Loi sur l’accessibilité pour les personnes handicapées de l’Ontario) doivent les respecter.

Composantes clés de la typographie Web

Échelle typographique : un ensemble de tailles liées entre elles, générées à partir d’une taille de base et d’un ratio, par exemple une base de 16 px avec un ratio de 1,25. Les unités rem respectent le réglage du navigateur de l’utilisateur, et la fonction CSS clamp() permet aux titres de grandir en douceur entre les petits et les grands écrans.
Longueur de ligne : la règle généralement admise pour le texte courant est d’environ 45 à 75 caractères par ligne. En CSS, un max-width d’environ 65ch sur les conteneurs de texte est un bon point de départ.
Hauteur de ligne : le texte courant se lit habituellement bien entre 1,4 et 1,6; les grands titres demandent un interlignage plus serré, souvent de 1,1 à 1,25. Définissez-la sans unité pour qu’elle suive la taille de la police.
Chargement des polices : servez des fichiers WOFF2, réduisez-les aux caractères dont vous avez besoin (en conservant les caractères accentués pour le français), préchargez le ou les deux fichiers les plus importants et utilisez font-display: swap pour que le texte s’affiche immédiatement dans une police de remplacement.
Polices variables : un seul fichier peut contenir toute une gamme de graisses, de chasses ou de tailles optiques le long d’axes comme wght et opsz. Il peut ainsi remplacer plusieurs fichiers statiques et permettre des graisses précises, mais comparez la taille du fichier au nombre de styles que vous utilisez réellement.
Agencement : la plupart des sites ont besoin d’une ou deux familles : une police de titrage pour les titres et une police de texte très lisible pour le contenu, plus une police à chasse fixe pour le code ou les étiquettes si le design le demande.

Erreurs fréquentes en typographie

Des tailles fixes en pixels partout : figer le texte en px peut faire fi des préférences de taille de police des utilisateurs; utilisez plutôt le rem pour le texte.
Des paragraphes pleine largeur : un texte qui occupe toute la largeur d’un grand écran est fatigant à lire, et on y perd facilement le fil.
Trop de polices chargées : plusieurs familles, chacune avec de nombreuses graisses et italiques, multiplient les téléchargements et ralentissent le premier affichage.
Un texte peu contrasté : un texte courant gris pâle sur fond blanc échoue souvent au seuil minimal de 4,5:1 exigé par les WCAG pour le texte normal.
Des polices de titrage pour le texte courant : les polices conçues pour les grands titres deviennent difficiles à lire à la taille d’un paragraphe et sur de longs passages.

Bonnes pratiques en typographie

Définissez le système sous forme de jetons : réglez les tailles, les graisses et les hauteurs de ligne au moyen de propriétés personnalisées CSS pour que chaque page puise dans la même échelle, et consignez-les dans vos normes graphiques.
Prévoyez les réglages d’espacement du texte : le critère 1.4.12 des WCAG exige que le contenu demeure fonctionnel lorsque l’utilisateur règle la hauteur de ligne à 1,5 fois la taille de la police, l’espacement des paragraphes à 2 fois, l’espacement des lettres à 0,12 em et l’espacement des mots à 0,16 em. Évitez les zones de texte à hauteur fixe.
Testez un zoom à 200 % : le texte doit rester lisible et utilisable une fois agrandi, sans que du contenu soit coupé.
Ajustez les polices de remplacement pour limiter les décalages : réglez-les avec size-adjust et ascent-override pour que le passage à la police Web fasse à peine bouger la page.
Agencez par contraste, pas par ressemblance : choisissez une police de titrage et une police de texte aux rôles clairement distincts, et vérifiez que les deux couvrent les langues et les caractères dont vous avez besoin.
Vérifiez les licences : assurez-vous que la licence de votre police couvre l’usage Web, l’hébergement sur vos propres serveurs et le trafic prévu, ainsi que vos applications, le cas échéant.

La typographie chez PerfectPixels

Notre propre site associe Orbitron, une police de titrage géométrique, pour les titres, à Instrument Sans pour le texte courant, avec une police à chasse fixe pour les petites étiquettes. Pour nos clients, nous créons des systèmes typographiques dans le cadre de l’identité de marque et de la conception d’interfaces, puis nous les mettons en œuvre en CSS fluide et accessible, avec des polices hébergées sur nos serveurs, réduites aux caractères utiles et optimisées pour la performance.

Questions fréquentes

Quelle taille de police utiliser pour le texte courant d’un site Web?

Une base de 16 px (1 rem, la valeur par défaut des navigateurs) est un minimum raisonnable pour le texte courant, et bien des polices se lisent mieux un peu plus grandes. La bonne taille dépend de la hauteur d’x de la police et du contexte de lecture : faites des tests avec du vrai contenu sur de vrais appareils.

Vaut-il mieux héberger ses polices Web soi-même ou utiliser un service de polices?

Héberger vos polices vous donne la maîtrise de la mise en cache, de la réduction des caractères et du préchargement, et évite d’envoyer les requêtes de vos visiteurs à un tiers, ce qui peut compter sur le plan de la confidentialité. Les services de polices sont pratiques, mais vérifiez leurs conditions de confidentialité et la licence des polices que vous choisissez.

Les polices variables sont-elles toujours plus rapides?

Pas toujours. Une police variable remplace plusieurs fichiers statiques par un seul, ce qui est avantageux si vous utilisez de nombreuses graisses ou de nombreux styles. Si vous n’avez besoin que d’une ou deux graisses, deux petits fichiers statiques peuvent être plus légers qu’une police variable complète.

Ressources connexes

Pour en savoir plus : Web fonts — MDN Web Docs.

Typographie