Piles de polices système : quand ne pas charger une police

Prenez une capture d’écran du même tableau de bord sur un Mac et sur un ordinateur portable Windows, puis placez-les côte à côte. Le Mac affiche San Francisco ; Windows affiche Segoe UI. Des polices différentes, des largeurs de lettres différentes, des retours à la ligne différents — et les plaintes à ce sujet sont pour ainsi dire inexistantes. Bien des produits à succès fonctionnent ainsi délibérément, et leurs utilisateurs ne le remarquent presque jamais.

Une pile de polices système est une déclaration font-family qui se résout vers la police d’interface native de chaque plateforme plutôt que vers une webfont téléchargée — San Francisco sur les plateformes Apple, Segoe UI sur Windows, Roboto sur la plupart des versions d’Android. Aucun fichier de police n’est requis, donc le texte s’affiche immédiatement : zéro temps de chargement de police, zéro décalage de mise en page dû aux polices, dans la police que le lecteur voit déjà toute la journée. La question n’est pas de savoir si ça fonctionne — c’est manifestement le cas — mais ce que ça coûte, et quand ce coût vaut la peine d’être payé. Cet article fait partie de notre guide de typographie.

À quoi ressemble une pile de polices système en CSS ?

La version moderne est courte :

body {
  font-family: system-ui, sans-serif;
}

system-ui est un mot-clé de famille générique qui demande au navigateur la police d’interface propre à la plateforme ; les navigateurs actuels le prennent largement en charge, et la référence font-family de MDN en documente les détails. Les chaînes plus longues que vous croiserez encore dans les bases de code —

font-family: system-ui, -apple-system, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

— sont pour l’essentiel historiques. -apple-system et les polices de plateforme nommées explicitement précèdent system-ui et servent d’assurance pour les navigateurs plus anciens. Les conserver ne fait pas de mal, mais pour la plupart des produits aujourd’hui, la forme courte suffit.

Que gagnez-vous à ne pas charger de police ?

Quatre choses, et aucune n’est mineure :

• Zéro temps de chargement. Aucune requête, aucune attente, aucune police dans le chemin critique.
• Zéro décalage de mise en page dû aux polices. Rien n’arrive en retard, donc rien ne permute ni ne se recompose. (Les autres causes de décalage de mise en page restent à votre charge.)
• Sensation native. Le texte s’accorde avec le système d’exploitation qui l’entoure — menus, notifications, réglages — ce qui se lit comme « cette appli est à sa place ici ».
• Toutes les langues. Le système de polices de la plateforme offre une couverture qu’aucune webfont unique n’égale, sans fichiers supplémentaires pour de nouvelles écritures.

Il y a une raison intuitive pour laquelle la police native fonctionne si bien : c’est la police la plus familière sur cet appareil. Le lecteur l’a vue dans chaque boîte de dialogue système pendant des années, et la familiarité est un véritable atout pour une lecture rapide et confortable — la nouveauté dans une police est un coût que le lecteur paie, et la police système n’en facture aucun.

À quoi renoncez-vous ?

Trois choses, et ce sont les raisons pour lesquelles les produits axés sur la marque chargent encore des polices :

• Voix de marque. Votre produit ressemble au système d’exploitation. Pour un outil interne, c’est un atout ; pour un produit dont la typographie fait partie de l’identité, c’est une abdication.
• Cohérence multiplateforme. Le même écran s’affiche dans des polices différentes selon la plateforme. Le piège classique retombe sur le marketing : les captures d’écran et les documents produits sur un Mac montrent une police que la plupart des utilisateurs Windows ne verront jamais.
• Contrôle. Les polices de plateforme diffèrent par la largeur des caractères et la hauteur d’x, si bien que les longueurs de ligne et les points de retour à la ligne diffèrent selon la plateforme. Un titre qui tient sur une ligne avec Segoe UI peut passer à la ligne avec San Francisco — soit vous testez chaque plateforme, soit vous concevez avec de la marge.

Prévisualisez les deux côtés du compromis dans un même spécimen — une webfont expressive dans l’emplacement du titre par-dessus Roboto, la police livrée avec Android, dans l’emplacement du corps de texte, aux tailles d’une véritable échelle. Le titre porte la voix ; le corps se lit comme la plateforme. Ce partage, c’est la stratégie hybride en miniature.

Quand une pile système est-elle le bon choix ?

Un cadre de décision utilisable :

• Outils internes, panneaux d’administration, tableaux de bord, MVP — une pile système est souvent le bon choix par défaut. La vitesse de lecture et la maintenance nulle comptent ; la voix de marque, la plupart du temps, non.
• Produits axés sur la marque — chargez la police de marque au moins pour les titres. La typographie y accomplit un travail d’identité, et la police du système d’exploitation ne peut pas le faire.
• L’hybride — pile système pour le corps de texte, une webfont bien choisie pour l’affichage. C’est la voix de marque la moins chère au kilo-octet : les titres portent l’essentiel de l’identité typographique d’une page, tandis que le corps de texte en porte l’essentiel des octets.

À quoi ressemble l’hybride en pratique ?

Deux propriétés personnalisées et quelques règles :

:root {
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: system-ui, sans-serif;
}

body           { font-family: var(--font-body); }
h1, h2, h3     { font-family: var(--font-display); }

C’est le calcul du budget qui la rend séduisante. Les titres ont généralement besoin de deux graisses — disons 500 et 700 — soit deux fichiers WOFF2, couramment quelques dizaines de kilo-octets au total. Le corps de texte, qui représente la majeure partie du texte affiché sur la page, ne coûte rien. Et le repli est intégré : jusqu’à ce que la police d’affichage arrive, les titres s’affichent dans la police système de la même pile, si bien que la page est lisible dès le premier rendu.

Une réserve honnête : l’hybride hérite du compromis de cohérence pour le corps de texte. Si votre conception dépend de paragraphes qui se replient à l’identique partout, une pile système — hybride ou non — est le mauvais outil.

Concevez le système avant de choisir les fichiers

Que vous chargiez deux polices, une seule ou aucune, le système typographique doit tout de même être conçu : les tailles, les graisses et les interlignes qui donnent une hiérarchie à une page sont des décisions qu’aucune pile de polices ne prend à votre place — une pile système avec le dimensionnement par défaut du navigateur reste sans système typographique. Construisez l’échelle sur une police neutre, de classe système — définissez la taille de base, le ratio, les graisses par style et les interlignes alignés sur la grille de ligne de base, puis exportez les design tokens. La ligne de famille dans la sortie vous appartient : pointez-la vers system-ui ; tout le reste survit quelle que soit la police que chaque plateforme affiche.