Une seule police pour tout le site : les fontes variablesOne font file for the whole site: variable fonts

Une maquette qui utilise sept graisses d’une même police demande sept fichiers. Avec les italiques, quatorze. Chacun est une requête, un téléchargement, et un risque de clignotement au chargement. Les fontes variables règlent le problème à la racine.A design that uses seven weights of the same typeface needs seven files. With italics, fourteen. Each is a request, a download, and a risk of flashing on load. Variable fonts solve the problem at the root.

Ce qu'est une fonte variableWhat a variable font is

Un seul fichier contient, non pas sept dessins figés, mais la description continue de la lettre entre son état le plus fin et son état le plus gras. Le navigateur interpole. On peut donc demander une graisse de 537 si l’on veut, et pas seulement les valeurs rondes habituelles.A single file contains, not seven frozen drawings, but a continuous description of the letterform between its lightest and boldest states. The browser interpolates. You can therefore ask for a weight of 537 if you want, not just the usual round numbers.

Certaines fontes exposent d’autres axes que la graisse : la largeur, l’inclinaison, parfois le contraste. Une seule famille couvre alors ce qui demandait autrefois plusieurs achats de licence.Some fonts expose axes beyond weight: width, slant, sometimes contrast. One family then covers what used to require several licence purchases.

Le calcul de poidsThe weight calculation

• Sept fichiers statiques compressés : environ 140 Ko au total, sept requêtes.Seven compressed static files: about 140 KB in total, seven requests.
• La même famille en variable : environ 90 Ko, une requête.The same family as a variable font: about 90 KB, one request.
• Et toutes les graisses intermédiaires en prime, au lieu des sept.And every intermediate weight thrown in, instead of just seven.

Le gain en octets est net, mais le gain en requêtes compte davantage : sur une connexion mobile, six allers-retours économisés valent souvent plus que cinquante kilo-octets.The byte saving is real, but the request saving matters more: on a mobile connection, six round trips saved is often worth more than fifty kilobytes.

Les deux réglages qui évitent le clignotementThe two settings that stop the flash

Une police web arrive toujours après le texte. Deux mesures suffisent à rendre l’attente invisible : précharger le fichier dans l’en-tête, et demander au navigateur d’afficher immédiatement le texte dans une police de repli, qu’il remplacera quand la vraie arrive.A web font always arrives after the text. Two measures make the wait invisible: preload the file in the head, and tell the browser to show the text immediately in a fallback font, which it will swap when the real one lands.

Sans ces deux réglages, une police web produit une page blanche pendant une demi-seconde. Avec, le texte est lisible dès le premier affichage. Le visiteur ne remarque jamais la substitution ; il remarquerait la page blanche.Without those two settings, a web font produces a blank page for half a second. With them, the text is readable from the first paint. The visitor never notices the swap; they would notice the blank page.

Le choix de la police de repliChoosing the fallback font

Le remplacement se voit d’autant moins que la police de repli a des proportions proches. Choisir une police système dont la hauteur d’œil et la chasse approchent celles de la police définitive réduit le décalage à presque rien — et au passage, le score de stabilité visuelle n’en souffre pas.The swap is less visible the closer the fallback’s proportions are. Choosing a system font whose x-height and width approach the final one reduces the shift to almost nothing — and the layout stability score does not suffer.