Typographisme

Un site tenu par des amoureux de la typo, sur le Web comme ailleurs.

Les formats de polices typographiques pour le Web

Comme les images, les vidéos ou le son, les polices typographiques sur un ordinateur ne sont jamais que des fichiers ayant un format spécifique. Seulement voila, des formats de fichiers pour les polices typographiques il y en a une ribambelle. Tous ont des avantages et parfois des inconvénients. Je vous propose de nous pencher plus en détail sur ceux qui sont, aujourd’hui, exploitables dans un contexte Web, c’est à dire au sein des déclarations @font-face.

Commençons par une petite analyse macroscopique

Un fichier de police typographique contient toutes les informations requises pour qu’un ordinateur puisse afficher les caractères correspondant. Cela comprend en général :

  • L’ensemble des tracés vectoriels de chacun des caractères (il existe également des formats de polices typographiques Bitmap, mais leur usage est ultra spécifique et jamais sur le Web)
  • Des meta-données diverses et variées
  • Des informations supplémentaires pour gérer le lissage de la police à l’écran et de manière générale le changement d’échelle des caractères vectoriels (on utilise souvent l’anglicisme « Hinting  »)
  • Des informations supplémentaires pour gérer les approches entre caractères (on utilise souvent l’anglicisme « Kerning »)

Outre le fait que tous les formats de polices typographiques ne sont pas égaux face à ces 4 points, chacun répond à des problématiques parfois différentes et il peut être difficile de s’y retrouver. Passons donc au vif du sujet

Le format de police SVG (.svg)

Ce format date de la fin des années 90 et fait partie de la norme du format d’image vectoriel SVG. À cette époque, les concepteurs de SVG cherchent un moyen pour embarquer les polices typographiques des documents SVG directement au sein de ces documents afin d’assurer la cohérence du rendu graphique quel que soit le terminal utilisé. Ils décident finalement de créer leur propre format qui, grossièrement, consiste à relier n’importe quel tracé SVG à un caractère unicode.

Ce format offre une souplesse de création sans précédent reposant sur toute la puissance de SVG. Il est ainsi possible d’utiliser tout les outils de SVG comme les motifs, les dégradés, les filtres, les animations, etc. Il est même possible d’imaginer des polices typographiques exploitant la vidéo, le son ou des comportements gérés via des scripts Javascript.

Cette souplesse créative est compensée par un défaut que certains qualifient de majeur aujourd’hui mais qui à l’époque ne paraissait pas si important. En effet, le format SVG ne dispose d’aucun mécanisme lui permettant d’embarquer des informations de hinting. Cela peut se faire sentir sur les écrans de faible résolution ou dans les petits corps de texte.

Enfin, le format SVG étant un format XML, les fichiers peuvent vite devenir assez lourds. Pour palier à ce problème, il existe une variante compressée de ce format et qui porte l’extension .svgz. Elle reste cependant peu ou pas supportée par les navigateurs. En outre, si votre serveur sait gérer la compression des requêtes HTTP, cet artifice n’est pas très utile.

Les formats de police TrueType et OpenType (.ttf, .otf)

TrueType est sans doute le format le plus ancien utilisé sur le Web. Il a été créé à la fin des année 80 par Apple en réponse au format PostScript Type 1 de Adobe. Outre un changement dans la façon de définir les points de contrôle de chaque lettre, la principal caractéristique de ce format tiens à l’apparition du hinting. En effet, grâce à TrueType, les polices typographiques deviennent « intelligentes » et donnent directement aux logiciels tout un jeux d’instructions permettant l’optimisation de leur rendu, en particulier pour les petits corps de caractères.

Le format OpenType est une évolution du format TrueType datant de la fin des années 90 et réalisé sous l’égide de Adobe et Microsoft. En fait c’est une sur-couche qui utilise indifféremment la description des glyphes de TrueType ou de PostScript Type 1. Il normalise également l’encodage des caractères en se reposant sur unicode et rajoute la possibilité de gérer des DRM. Ce format offrant plus de souplesse à la chaîne graphique traditionnelle tout en permettant aux fonderies de contrôler leurs créations, son adoption fut massive et c’est à présent le format dominant sur le marché.

En fait, désormais, la plupart des fichiers de polices typographiques ayant l’extension .ttf sont en réalité des fichiers OpenType qui utilisent la description des glyphes TrueType. À l’inverse, les fichiers ayant l’extension .otf sont le plus souvent des fichiers utilisant la description des glyphes du format PostScript Type 1. Les différences entre les deux sont extrêmement subtiles et généralement peu ou pas perceptibles hors de cas particuliers spécifiques à chaque police.

Ces deux formats sont particulièrement riches et contiennent généralement énormément d’informations destinées à optimiser le rendu des polices. De fait, ce sont des formats idéaux pour la chaîne graphique traditionnelle mais qui conviendront assez difficilement aux usages Web. D’une part, 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 (les fichiers font facilement plusieurs centaines de Ko). D’autre part, les fondeurs traditionnels n’autorisent généralement pas la duplication des fichiers de polices ni la créations de jeux de caractères réduits, il est donc légalement difficile d’utiliser des polices typographiques issues des bibliothèques des grandes fonderies (Adobe, ITC, Linotype, etc.).

Le format de police Embedded OpenType (.eot)

Afin de résoudre la plupart des problèmes que peut poser OpenType dans un cadre Web, Microsoft, à la fin des années 90, a proposé un format de fichier allégé pour embarquer les polices typographiques dans Internet Explorer. En particulier, il permet de réduire assez efficacement le poids des fichiers en proposant des sous-ensembles de caractères et en compressant le fichier. L’idée est séduisante mais souffre de deux défauts. Premièrement, seul Internet Explorer supporte ce format de fichier (son concurrent de l’époque, Netscape Navigator, ayant fait le choix d’un autre format, disparu depuis). Deuxièmement, ce format arrive (trop ?) tôt dans l’histoire du Web et à l’époque, les grandes fonderies sont hésitantes sur la marche à suivre et finalement ne participeront guère à l’effort de promotion de ce format.

Du point de vue des designer Web, ce format souffrait aussi d’un autre problème : il est fermé (ce qui contribue au fait, qu’aujourd’hui encore, il n’y a toujours aucun autre navigateur qui le supporte), non interopérable et les outils disponibles pour créer des fichiers à ce format n’existaient que chez Microsoft. Ainsi, entre un manque d’information, des outils fermés et une époque où le haut débit n’était pas encore là, ce format est resté longtemps inconnu et sous-utilisé malgré ses qualités.

Le format de police WOFF (.woff)

Petit nouveau dans l’univers des formats de fichier pour les polices typographiques, le format WOFF date de 2008 et est une proposition de Mozilla pour fournir un format de fichier spécialement pensé pour le Web. Pour faire simple, il reprend toutes les bonnes idées du format EOT (sous-ensemble de caractères et compression du fichier) tout en en supprimant ses défauts. En particulier, ce format est ouvert et fait l’objet d’un processus de normalisation au sein du W3C. Il a donc vocation à devenir le format de référence pour les polices typographiques sur Internet. D’ailleurs, tous les grands fabricants de navigateur sont en train de franchir le pas et commencent à implémenter son support.

De manière un peu surprenante, les fonderies font un bon accueil à ce format de fichier dans lequel elles voient un bon moyen de proposer leur catalogue pour des usages Web (d’une manière bien plus clairement distincte que ce que pouvait proposer le format EOT). Ceci dit, ce format de fichier ne propose pas spécialement de système de DRM et donc rien n’empêche techniquement l’usage de ce format de fichier ailleurs que sur le Web ou dupliqué d’un site à l’autre. Ceci étant, les fonderies ont revu leur position depuis 10 ans et font tout pour négocier au mieux le virage du numérique. Dans cette optique, elles suivent et soutiennent activement les démarches qui visent à proposer une utilisation légaliste des polices typographiques sur le Web, d’où le support de ce format et le soutien donné aux nouvelles formes de distribution (l’exemple de TypeKit est emblématique de cette politique).

Support navigateur

Tous ces formats de fichiers peuvent être utilisés par l’un ou l’autre de nos navigateurs préférés, mais qui supporte exactement quoi ?


Internet Explorer Firefox Chrome Safari Opera
6-8 9 3.5 3.6 4-6 7 3.1 iOS 10
SVG non non non non non non oui oui oui
TTF non non oui oui oui oui oui non oui
OTF non non oui oui oui oui oui non oui
EOT oui oui non non non non non non non
WOFF non oui non oui non oui non non non

dans Design Web Par Jeremie