Gérer ses polices web : la méthode de Julien Jimenez

par

Une police personnalisée est le détail typographique qui distingue un site d’un gabarit générique. C’est aussi l’une des causes les plus fréquentes de texte invisible pendant deux secondes, puis de saut brutal quand le contenu se réagence. Ce comportement se corrige entièrement, sans renoncer à la typographie choisie, à condition de comprendre ce qui se passe entre la demande du navigateur et l’affichage.

Le décalage vient de l’attente, pas de la police

Un navigateur qui rencontre une police non encore téléchargée doit choisir : masquer le texte en attendant, ou l’afficher immédiatement dans une police de secours puis le remplacer. Sans instruction de votre part, il masque parfois jusqu’à trois secondes. Le visiteur regarde une page structurée mais vide de texte, puis tout apparaît d’un coup, souvent avec un décalage de mise en page parce que la police définitive n’occupe pas le même espace que celle de secours. La marche à suivre exposée sur www.julien-jimenez-performance-web.com commence par cette instruction d’affichage, qui est la correction la plus rentable du domaine : une déclaration d’une ligne supprime la période de texte invisible.

Héberger ses polices plutôt que les appeler ailleurs

Charger une police depuis un service extérieur ajoute une résolution de domaine et une connexion à un serveur tiers avant même le premier octet utile. Le gain autrefois avancé un fichier déjà en cache chez le visiteur a disparu : les navigateurs cloisonnent désormais leur cache par site, si bien que le fichier est retéléchargé pour chacun. Déposer les fichiers sur votre propre serveur supprime une connexion, place les polices sous votre politique de cache, et règle au passage la question du transfert de données personnelles vers un service tiers.

Limiter les fichiers et les caractères

Une famille typographique complète représente une dizaine de fichiers. Un site en a besoin de deux, trois au maximum : une graisse normale, une graisse forte, éventuellement une italique. Chaque variante supplémentaire ajoute vingt à quarante kilooctets pour un bénéfice esthétique que personne ne remarquera. Second levier, moins connu : un fichier standard contient des milliers de caractères destinés à des alphabets que vous n’utilisez pas. Le réduire au sous-ensemble nécessaire divise couramment son poids par trois. Les formats compressés modernes font le reste ; les anciens formats n’ont plus lieu d’être servis. Les polices dites variables changent l’arbitrage quand plusieurs graisses sont réellement nécessaires : un fichier unique couvre toute l’échelle, et devient rentable à partir de trois variantes utilisées. En dessous, deux fichiers statiques restent plus légers.

Rendre la substitution invisible

Afficher le texte immédiatement dans une police de secours règle la lisibilité mais laisse le saut de mise en page. Il se corrige en ajustant la police de repli pour qu’elle occupe approximativement le même espace que la définitive : les navigateurs acceptent des réglages de correction d’échelle et d’espacement appliqués à la police de secours. Quelques minutes de calage suffisent, et le remplacement devient imperceptible. Chargez également en priorité les deux fichiers réellement utilisés dès le premier écran, sans étendre ce traitement au reste, sous peine de déplacer le problème.

La police système, option sérieuse

Reste une possibilité écartée trop vite : ne pas charger de police du tout. Les polices déjà présentes sur les appareils s’affichent instantanément, ne pèsent rien, ne provoquent aucun décalage et ont considérablement gagné en qualité. Sur un site où la lisibilité prime sur la signature graphique une fiche de sortie en mer, un tarif, un formulaire de réservation le choix se défend parfaitement. Pour une identité forte, réservez la police personnalisée aux titres et laissez le corps de texte au système : vous conservez l’essentiel de l’effet visuel pour une fraction du coût.

Tu pourrais aussi aimer