Typographisme

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

Pourquoi les fontes SVG sont-elles différentes des autres ?

Je suis un peu triste de constater que le format de police SVG est très mal compris. J’ai lu beaucoup d’articles et de récriminations à propos de ce format de police, le dernier d’entre eux étant l’article d’Alexander Limi où il explique pourquoi il n’est pas prévu que Firefox passe le test Acid3, essentiellement à cause d’une absence de support des fontes SVG.

De bien des façons, toutes ces critiques sont déplacées tout simplement parce que ce format de police est incompris. Vraiment ? Mais dans ce cas, à quoi sert-il ? Voyons ça.

Oubliez le texte courant

L’idée fausse, la plus répandue, à propos des fontes SVG, c’est de penser qu’elles sont adaptées au texte courant. Désolé, mais ce n’est pas le cas. À mon sens, cette idée fausse est essentiellement due à Apple. Jusqu’à iOS 4.2, SVG était le seul format disponible pour définir des fontes personnalisées sur iPhone et iPad. Malheureusement, ce support était (est ?) quelque peu approximatif, ce qui a desservi la réputation de ce format de police.

Quoi qu’il en soit, au delà de ce qui existait sur iOS, il est notoire que les fontes SVG ne supportent pas le hinting [1]. Pour bien comprendre ce soit disant « manque », il est important de revenir sur les spécificités du format d’image SVG. Les formes vectorielles d’un document SVG sont placées de manière absolue par rapport à un point de référence unique et le texte dans ces documents ne bénéficie pas d’un système de flux automatique comparable à HTML. En outre, les documents SVG n’ont pas nécessairement une taille ajustée au pixel près et l’ensemble des formes vectorielles peut être sujet à des transformations mathématiques (rotation, changement d’échelle, déformation, etc.). Tout cela fait que les glyphes typographiques peuvent être placés n’importe où, n’importe comment et la plupart du temps ne vont pas se retrouver placés sur une grille calée au pixel près. Dans de tels cas, le hinting, qui ne donne le meilleur de lui-même que lorsque la fonte se retrouve alignée sur une jolie grille, n’a que peu ou pas d’influence sur la qualité du rendu.

Si, par exemple, vous essayez d’appliquer une transformation CSS à un texte rendu avec une police WOFF, vous vous rendrez compte que le hinting ne change visuellement pas grand-chose à la qualité du rendu. Au contraire, si vous appliquez une police SVG sur du texte courant HTML (qui est aligné au cordeau, lui), le texte ne sera pas aussi joli, en particulier avec un petit corps de texte. Donc oui, utiliser les fontes SVG sur du texte courant ce n’est pas terrible. Mais ça tombe bien car ce n’est pas du tout ce pourquoi elles sont faites.

Le pouvoir du dessin

Un des plus gros avantages des fontes SVG par rapport aux autres formats, c’est la façon dont il est possible de dessiner la forme des glyphes. Techniquement parlant, les courbes des fontes SVG peuvent être de n’importe quel type (courbe de Bézier quadratique ou cubique et même définition d’arc de cercle) là où les fontes TrueType n’utilisent que les courbes de Bézier quadratiques. Les fontes OpenType sont un tout petit peu mieux pourvues dans la mesure où elles utilisent les courbes de Bézier cubiques, mais à ma connaissance, seules les fontes SVG supportent la définition d’arc de cercle. Ainsi, en théorie, les formes produites pour les fontes SVG peuvent être bien plus optimisées que dans les autres formats. Ok soyons honnêtes, ce n’est quasiment jamais le cas dès qu’on parle de dessin de fontes classiques. Mais il y a mieux. Puisque les fontes SVG bénéficient de toute la puissance de dessin de SVG, il est possible de dessiner des formes particulièrement complexes en superposant des formes arbitraires et des formes de base (cercle, rectangle, etc.) tout en vous laissant un contrôle très fin sur votre design. Grâce à cela, si vous voulez dessiner une police ornementale, SVG vous offrira des outils bien plus efficaces pour le faire.

D’un point de vue pratique, il est possible d’utiliser n’importe quel logiciel capable de produire du SVG pour dessiner vos polices. Cela inclut les logiciels de création de fontes classiques comme FontForge par exemple, mais également les logiciels de dessin vectoriel comme Adobe Illustrator ou Inkscape (ce dernier ayant des outils intéressants pour le dessin de fontes). Bien sûr, il est possible d’utiliser ces logiciels pour dessiner des formes utilisables dans d’autres formats de police. Néanmoins, vous aurez toujours besoin de les passer à la moulinette d’un logiciel de fontes pour s’assurer que les formes seront définies avec les bons types de courbes (ce qui peut avoir une incidence sur la qualité de votre dessin). Avec SVG, non. Vous pouvez utiliser directement ce qui sort de votre logiciel favori.

Animations, filtres, vidéo… \o/

Allons un peu plus loin. SVG, au-delà de ses capacités de dessin, dispose d’extensions assez impressionnantes telles que les dégradés, les motifs, les découpes, les masques, les animations, les filtres et même la possibilité d’inclure des éléments d’autres langages (HTML, MathML, etc.). Bien sûr, tout est utilisable dans vos polices SVG. Oui, grâce à SVG on peut produire de vraies fontes animées. Grâce aux filtres, il est possible d’imaginer des fontes floutées ou texturées. Et grâce à l’inclusion d’autres langages… Wow ! Il n’y a plus de limite. En effet, pourquoi ne pas imaginer une police ayant un fond sonore ? Oui, c’est possible, il vous suffit juste d’inclure une balise HTML audio et voila.

Bien évidement, ce n’est pas nécessairement une très bonne idée de faire un truc pareil. En particulier si vous prévoyez de l’utiliser sur du texte courant (même si, comme on l’a vu avant ce n’est pas spécialement fait pour ça). Mais réfléchissez-y. Le format de fonte SVG vous permet de vous lâcher d’un point de vue créatif. Dîtes au revoir à la vieille typographie au plomb et allez hardiment là où nul ne s’est aventuré en créant des polices POUR le web (et pas simplement adaptées au web).

Inclusion et arbre DOM

Vous trouvez ça incroyable ? Faisons un pas supplémentaire et entrons dans la 4e dimension.

Il y a 10 ans de ça, le format de fonte SVG était le seul format qui pouvait être embarqué directement au sein d’un document SVG. Cette fonctionnalité était nécessaire pour s’assurer que les polices d’un document seraient affichées de manière cohérente quel que soit le système de rendu, navigateur ou autre. Aujourd’hui, grâce au module @font-face de CSS associé avec les Data URI, il est possible d’embarquer n’importe quel type de format de police. Néanmoins, SVG garde encore un petit avantage ici.

Comme vous le savez, SVG est un format XML et donc, les fontes SVG le sont également. Cela signifie que vous pouvez inclure directement votre police dans n’importe quel document XML (par exemple, une image SVG, bien sûr, mais également dans un document XHTML ou, dans un futur proche, grâce à HTML5, dans n’importe quel document HTML) et continuer d’avoir accès aux glyphes via l’arbre DOM du document XML. Et ça, c’est énorme car vous pouvez alors faire deux choses :

  • Vous pouvez accéder au contenu des polices via Javascript et le changer comme vous voulez. Le format de fonte SVG vous donne un contrôle total sur chacun des glyphes à tous moment.
  • Vous pouvez utiliser CSS pour changer le style de chaque glyphe individuellement ce qui vous donne un contrôle incroyable sur la manière dont vos polices vont être affichées.

Aucun autre format de fonte ne permet un accès aussi facile et complet aux glyphes et à leur dessin.

Sécurité, accessibilité, bla, bla, bla…

Avec un tel pouvoir, vous héritez des responsabilités qui vont avec. La sécurité est un sujet important dès que l’on parle des fontes SVG. Comme le fait remarquer Borris Zbarsky : À l’instant où vous mettez une <iframe> dans un glyphe, tout un tas de problèmes se présentent et il a sacrément raison. Ce sujet doit effectivement être discuté, mais est-ce une raison pour jeter bébé avec l’eau du bain ? Personnellement, je ne crois pas.

L’accessibilité est un autre point chaud. Avec des fontes aussi malléables, bon nombre de questions se posent. Par exemple, « Comment un utilisateur peut-il contrôler les animations au sein d’une police de caractère ? ». Mais toutes ces questions sont fondamentalement les mêmes que celles que posent le format SVG en général. De fait, il est possible de s’appuyer sur les solutions existant aujourd’hui pour SVG.

Bien évidement, il est nécessaire que les fabriquants de navigateurs et les web designers fassent attention à ces contraintes. Oui, c’est vrai, des créateurs malveillants feront n’importe quoi avec les fontes SVG. Oui, c’est vrai, tous les fabriquants de navigateurs (oui, tous) ne mettent pas beaucoup de bonne volonté à supporter ce format. Ainsi soit-il ! Ceci étant, je pense que les fontes SVG sont un vrai tournant dans l’histoire de la typographie et qu’elles devraient être prises pour ce qu’elles sont : un outil incroyable pour apporter un nouveau souffle graphique à la typographie et une opportunité pour donner des polices vraiment adaptées au design pour le web. Et surtout, il faut se souvenir que les fontes SVG n’ont pas le même usage que les fontes WOFF sur le Web. Chacun de ces formats a ses avantages et ses inconvénients mais ils ne sont finalement pas mutuellement exclusifs.

  1. Si vous avez une bonne traduction de « hinting », je suis preneur. [retour]

dans Design Web Par Jeremie