Typographie Police

Mais que fait la police?

Depuis l’apparition et la généralisation en CSS de @font-face, on utilise de plus en plus de polices custom. Nous ne parlerons pas ici de comment bien utiliser la syntaxe pour être compatible avec tous les navigateurs, Paul Irish l’a très bien fait et des outils de génération comme Font squirrel génèrent la CSS pour nous. Aujourd’hui, nous allons pousser ça plus loin et comprendre ce qu’il se passe pour que le navigateur rende la police. Mais tout d’abord, qu’est-ce qu’une police ?

Qu’est ce qu’une police typographique ?

Un fichier de police contient les informations requises pour qu’un ordinateur puisse afficher les caractères correspondant. Il se compose de :

  • L’ensemble des tracés vectoriels de chaque caractère (informations de contour et de métrique)
  • Des meta-données

Et en option:

  • Des informations pour le lissage de la police à l’écran et le changement d’échelle des caractères vectoriels (en anglais le hinting)
  • Des informations pour les approches entre caractères (en anglais le kerning)

Les formats de polices différents sur ces 4 points. Chacun répondant à des problématiques différentes il peut être difficile de s’y retrouver. Passons donc au vif du sujet.

Un peu d’histoire : l’origine de @font-face

Si on utilise @font-face depuis peu, il faut savoir que cela a été implémenté en CSS 2.0, et que c’était supporté par IE6 et Nescape 4, dès la fin des années 90. Mais comme les 2 navigateurs de l’époque n’arrivaient pas à se mettre d’accord sur le format à utiliser et le faible débit limitant l’appel de polices externes, la fonctionnalité a été purement et simplement supprimée en CSS 2.1… pour faire un grand retour en CSS 3.

Les différents formats de police

TrueType

Le TTF est le format le plus ancien du web. Créé par Apple à la fin des années 80  pour concurrencer le PostScript Type 1 de Adobe. La principale évolution de ce format, outre un changement dans la façon de définir les points de contrôle de chaque lettre, et l’apparition du hinting. Les polices donnent aux logiciels tout un jeu d’instructions permettant l’optimisation de leur rendu, en particulier pour les petits corps de caractères, améliorant le rendu.

Depuis une douzaine d’années les glyphes sont généralement créés en PostScript. Ils sont lisses, détaillées et d’une qualité élevée, ce qui favorise un bon rendu sur les navigateurs. Ce n’est pas évident de savoir si une police utilise des caractères TrueType ou PostScript. Généralement les grosses fonderies l’indiquent, avec une mention « OT TTF » pour OpenType TrueType, ou OT CFF garantie sans glyphes TruType, et donc généralement plus optimisée pour le rendu.

font-post

la mention CFF – Postscript-Outlines dans les détails techniques pour la police Futura sur linotype

OpenType

Créé en 1996, OpenType est une évolution du format TrueType réalisée sous l’égide de Adobe et Microsoft. La structure a été conservée, à laquelle des fonctions typographiques inédites ont été ajoutées. OTF permet ainsi de gérer les exceptions et les particularités de tous les systèmes d’écriture du monde, mais reste plutôt un conteneur pour TTF, pas vraiment un nouveau format. Le format OTF a rencontré un grand succès auprès des graphistes et des web designers, qui considèrent que TTF est has been car moins complet.

TTF et OTF contiennent généralement énormément d’informations destinées à optimiser le rendu des polices, ce qui conviendra assez difficilement aux usages Web : dans la mesure où ces formats de fichier ne sont pas (ou peu) compressés et contiennent généralement des jeux de caractères complets, leur poids est prohibitif (plusieurs centaines de Ko).

Embedded OpenType

À la fin des années 90, Microsoft propose un format de fichier allégé pour embarquer les polices typographiques dans Internet Explorer: le EOT est né. Ce format permet de réduire le poids des fichiers en proposant des sous-ensembles de caractères et en compressant le fichier. L’idée est bonne mais a un gros défaut: il est fermé, non interopérable, et les outils pour créer les .eot n’étaient disponible que chez Microsoft. Aujourd’hui seul IE le supporte à cause de ça, et à l’époque de sa sortie ce défaut l’a empêché de se développer malgré ses qualités.

Web Open Font Format

Le format WOFF a été implémenté par Mozilla sur Firefox en 2009. Il reprend les bonnes idées du format EOT: sous-ensemble de caractères et compression du fichier; tout en supprimant ses défauts, à savoir un format fermé. Ce qui permet à Mozilla d’être rejoint par Microsoft et Opéra pour être validé par le W3C en 2010. A l’heure actuelle la majorité des navigateurs supportent ce format. Les fonderies ont également fait un bon accueil au nouveau format et se sont mises à jour afin de démocratiser leur usage sur le web.

Depuis 2012 le WOFF 2 est proposé par Google. Il optimise davantage la police, mais permet également de réunir en une seule police les différentes graisses et l’italique. Il est à l’heure actuelle support épar Chrome, Opéra et depuis peu Firefox.

SVG

Ce format date de la fin des années 90. Je sais, ce n’est pas chronologique par rapport au reste, mais ce format reste assez peu utilisé. À la base, les concepteurs de SVG voulaient un format de police qui puisse s’inclure dans les documents SVG. Ils ont alors créé leur propre format, qui relie en gros un tracé SVG à un caractère unicode. L’inconvénient de ce format étant qu’il ne propose pas d’option de hinting, et le rendu peut être dégradé sur les faibles résolutions ou les petits caractères.

En résumé

Nous avons donc:

  • le SVG, bien mais pas top pour les petites tailles, et finalement rarement utilisé (il est mis en dernier dans la déclaration de @font-face, et je ne l’ai jamais vu être appelé par un navigateur jusque là). Chrome en a d’ailleurs retiré le support depuis la version 38, sauf sur Windows XP et 7. Je pense que ce format est voué à disparaître des font web.
  • le TTF, format original, supporté à peu près partout, mais assez lourd.
  • le OTF, qui est une simple amélioration de la version TTF et apporte des options supplémentaires.
  • le EOT, supporté uniquement par IE
  • le WOFF, plus optimisé et dont l’usage s’est généralisé sur presque tous les navigateurs
  • le WOFF 2, qui arrive doucement, depuis peu sur FireFox, et qui permet d’inclure les déclinaisons de graisse et d’emphase dans un seul fichier.

Le rendu dans le navigateur

Aujourd’hui encore le rendu d’une police ne sera pas optimal suivant les navigateurs. Récemment sur une police mal convertie pour le web le résultat était catastrophique sur Firefox à certaines tailles (à gauche). Après correction le rendu est bien meilleur.

font-optim

Comment fonctionne le rendu d’une police sur un navigateur? Ca se passe en 3 étapes:

  • D’abord, suivant la déclaration qui a été faite en css pour le @font-face, le navigateur récupère le format qui lui est le plus adapté suivant l’ordre mis dans la déclaration de @font-face (généralement .eot pour IE, .otf pour Firefox, .woff ou .woff2 pour Chrome);
  • Ensuite le navigateur passe la main au moteur de rendu de l’OS;
  • L’OS renvoie le résultat au navigateur qui affiche le résultat.

Chaque navigateur n’envoie pas forcément les mêmes informations au moteur de rendu de chaque OS, et ne récupère pas forcément les mêmes informations non plus. La qualité de la font intervient également, nous allons voir ce point juste après.

Donc, pour le rendu de notre police 3 facteurs interviennent: le fichier utilisé, le navigateur et son moteur de rendu, et l’OS. Ce qui explique des différences de rendu d’une même police entre Chrome sur Windows XP, 7 ou MacOS, ou IE 9 et Chrome sur le même OS.

J’en étais venu à m’intéresser au rendu des polices à cause d’un problème sur une font qu’on nous avait envoyé sur un site, déjà « optimisée » pour le web. Sur Chrome Mac, un texte dans un bouton avec une bordure n’était pas centré verticalement, alors que sur Chrome Windows, aucun soucis. Ce qu’il s’était passé? Pour faire simple, la police contenait en interne cette légère marge, et sur Mac le moteur de rendu se disait « ok, c’est ce qu’à voulu le fondeur, je laisse tel quel« . Sur Windows, le moteur se disait: « Ho, c’est nul cette marge, le texte va être décalé, je la retire avant d’envoyer le résultat au navigateur« . Le seul moyen que j’ai eu a été de récupérer la police originale et de refaire la compression via font squirrel.

Comment avoir le meilleur rendu ?

Nous avons vu les formats existants, la façon dont ils sont rendus sur le navigateur, mais tout va dépendre de la police originale. Si la police est assez récente avec des glyphes en PostScript, il ne devrait pas y avoir trop de soucis. Dans le cas contraire, il faudra tester et tester encore sur tous les navigateurs ET systèmes d’exploitation. Si on convertit un fichier TTF en OTF, le rendu sera le même, puisqu’il ne s’agit que d’un format avec des options supplémentaires. Et la conversion en WOFF sera aussi de mauvaise qualité, d’autant plus qu’il s’agit d’un format compressé. Dans l’exemple du bouton « Discover » au dessus, Firefox utilisait le WOFF mal compressé, d’où le rendu catastrophique.

Sur font squirrel, il vaut mieux laisser les paramètres par défaut et faire le mode « optimal » pour ne pas trop compresser les polices. J’ai vu plusieurs fois des qualités dégradées avec les polices de GoogleFont, qui compresse trop les données et doit perdre des informations de hinting.

Dans votre navigateur,  regardez dans la partie « réseau » quelle police est chargée. Déjà pour s’assurer qu’il n’y a pas 2 fichiers de la même font chargée et que la déclaration est correcte. Ensuite, pour être sûr que c’est bien le format le mieux géré par le navigateur qui est chargé.

Dans tous les cas, le seul moyen de s’assurer du résultat de la police, c’est de tester partout.

 

TAGS: , BY: Jonathan VALLET 0 COMMENT
LIRE LA SUITE

Jonathan VALLET

Passionné de jeux vidéos, j'ai d'abord suivi un cursus de développeur avant de me spécialiser avec une année de Game Design. Après 2 ans et demi chez Ubisoft sur le développement de leur premier MMO par navigateur, puis quelques autres expériences, j'ai rejoint AdFab en 2013. Je m'occupe désormais du développement d'applis mobile et de sites généralement très graphiques.