Fontes variables, gadget ou révolution ?

Retour sur la plus renversante des curiosités typographiques, 5 ans après son entrée dans l’OpenType

Une bouffée d’air frais dans le petit monde de la typographie, au croisement entre créativité et technologie : ce sont les fontes variables, entendez légères et modulables à souhait ! Avec ce format, on personnalise sa fonte dans les moindres détails en naviguant le long d’axes contenant un éventail de nuances de graisses, de chasses et encore bien d’autres données qui vont plus loin que les styles prédéfinis d’une famille de polices standard. Un vent de liberté qui a fait naître de beaux élans créatifs chez les dessinateurs de caractères et qui ouvre de nouvelles perspectives aux créatifs qui les utilisent. Si vous êtes passé à côté, rien de plus parlant pour présenter les fontes variables que cette démo de la fonte variable Orelo, conçue par Adrien Midzic, typographe (et fier concepteur de notre police Senso).

Orelo, par Adrien Midzic

Où se cachent les fontes variables ?

Des débuts timides mais prometteurs

Annoncées en 2016 par Adobe, Apple, Microsoft et Google qui ont œuvré de concert (vous avez bien lu) pour les implémenter dans l’Open Type, elles se frayent un chemin plutôt discret depuis. À ce jour, les fontes variables sont prises en charge par InDesign, Illustrator, Photoshop et Sketch, ainsi que par les principaux systèmes d’exploitation et navigateurs web (hormis Internet Explorer, bien-sûr). Mais elles font malheureusement encore défaut à Figma, XD et surtout à AfterEffects (dont la communauté attend l’intégration de pied ferme, au point de créer des scripts comme TypeMorph qui répliquent les caractéristiques de fontes variables pour animer des typos avec des axes de morphing). Loin d’être encore bien répandues, les fontes variables n’en sont pas non plus à leur coup essai. On a des raisons de penser que les fontes variables OpenType ne pâtiront pas des obstacles de compatibilité des tentatives précédentes, et que leur prise en charge par un nombre grandissant d’applications logicielles conduira à davantage de confiance et d’expérimentation.  

https://v-fonts.com/support répertorie une liste évolutive des applications, systèmes d’exploitation, navigateurs et logiciels supportant les fontes variables. 

Pour la beauté du geste

C’est surtout le côté amusant des fontes variables qui ressort des applications qu’on leur connaît jusqu’à présent. À l’image de la Darkroom mise au point par la fonderie Dinamo, sorte de labo virtuel de la fonte variable, avec lequel les créateurs de caractères modernes peuvent visualiser à quoi ressemblerait leur projet en testant les qualités techniques de leurs fontes. En effet, même si la plupart des fontes variables répondent à une exigence artistique, nombre d’entre elles sont le fruit d’un défi technologique relevé par leur créateurs.

Il faut dire que la typo variable offre des possibilités réjouissantes de micro-interactivité et d’animation, comme sur le portfolio de Jameen Tarlier, Directeur de Création représenté par Creasenso, où le mouvement de la souris déclenche un changement de graisse. On retrouve le même effet sur le site vitrine de Cann, boissons toniques infusées au THC, conçu par Martin Silvestre, Directeur Artistique Web également représenté par Creasenso. 

Fontes variables et branding

C’est à la condition de leur offrir une place centrale dans un territoire de marque que l’on peut pleinement exploiter les potentialités des fontes variables. Adidas l’a bien compris en devenant l’une des premières marques à mettre une police variable au cœur de son système graphique avec Adineue Chop, déployée à l’international, principalement en boutique et dans quelques opérations digitales, mais également en print (Et ça c’est bien !). Conçue en 2018 par Jeremy Mickel et Leon Imas, elle allie lignes droites et angles nets qui rappellent le lettrage des maillots de sport. Comme son nom l’indique, Adineue Chop a des angles assez doux pour une police de style Varsity. Son principe : Refléter le pragmatisme allemand, mais avec une pointe de chaleur pour rappeler la douceur du logotype Adidas Originals. 

 

Adineue Chop, par Jeremy Mickel et Leon Imas

 

À ce jour, le recours aux fontes variables en branding le plus marquant reste la brillante refonte de marque de l’orchestre symphonique de San Francisco, qui a travaillé avec Dinamo (Johannes Breyer, Elias Hanzer et Robert Janes) et l’agence Collins pour repositionner cette institution de la musique classique. Au cœur du rebranding, la fonte variable ABC Symphony, qui est une version retravaillée d’Arizona. Au repos, cette typo reste en apparence traditionnelle, en écho à l’héritage classique de la musique symphonique, mais quand ses glyphes s’étirent, s’inclinent ou se plient en réaction à la musique, ils forment un tumulte surprenant qui rappelle l’élévation d’une voix qui chante ou l’effervescence d’une symphonie, dévoilant ainsi toute sa modernité. On retrouve ABC Symphony en action sur le Symphosizer, plateforme sur laquelle on peut s’amuser avec du texte qui réagit au son.

 

ABC Symphony, par Johannes Breyer, Elias Hanzer et Robert Janes

 

Comment ça marche ?

Les fontes variables fonctionnent selon un système d’axe de variation afin d’agir sur un aspect donné de la police, comme par exemple la graisse ou la chasse. Les 5 axes les plus courants sont la graisse, la chasse, la taille optique, l’italique et l’inclinaison. Ces axes sont standardisés dans la spécification OpenType et possèdent donc un attribut CSS correspondant. Les concepteurs peuvent néanmoins définir, pour leur fonte variable, des axes personnalisés supplémentaires. Ils peuvent par exemple choisir de faire varier la hauteur des ascendantes ou descendantes, l’épaisseur des empattements ou encore le contraste entre pleins et déliés… 

Le projet de fonte variable Fraunces, dont le style s’inspire des polices du début du XXème siècle comme Windsor ou Souvenir, est un exemple parlant d’axes personnalisés. Au-delà des axes enregistrés de graisse et de taille optique, cette fonte variable comporte deux axes personnalisés supplémentaires dénommés ‘Softness’ (douceur) et ‘Wonky’ (irrégularité). 

 

Fraunces

 

La fonte variable ABC Arizona, développée par la fonderie Dinamo (Elias Hanzer), est un bel exemple de “superfamille” variable à cinq styles : Sans, Flare, Mix, Text et Serif, tous contenus dans le même fichier. En plus de deux axes enregistrés de graisse et d’italique, ABC Arizona a un axe personnalisé ‘Serif’, avec lequel on peut expérimenter toutes les nuances entre sans et serif. En naviguant entre ses styles et en modulant ses axes, on obtient des résultats très différents. 

ABC Arizona, par Elias Hanzer

Une police à plusieurs axes n’est pas forcément complexe pour autant : un axe n’affecte pas nécessairement tous les glyphes d’une police, ni ne représente un large éventail de variations. Le comportement des transitions peut être défini le long d’un axe pour qu’elles soient graduelles ou soudaines. L’axe fonctionne ainsi comme une bascule entre les variations, ou bien une série de changements discrets sans variations intermédiaires. Par exemple, pour la longueur de la queue d’un Q majuscule il est possible de gérer suivant 2 plages différentes sur un même axe pour corriger son dessin selon l’épaisseur de la graisse.

 

ModelStandard, par Adrien Midzic

 

Des fontes variables, pour quoi faire ?

D’après Microsoft, « OpenType Font Variations permet aux designers web et développeurs d’applications mobile de créer des expériences typographiques fortes avec très peu de débit et des dossiers typographiques légers ».

Au-delà de la créativité, les gains de performances sont souvent avancés comme argument faveur des fontes variables. Effectivement, contrairement aux familles de fontes classiques, dont les différentes graisses, chasses et italiques peuvent représenter jusqu’à une centaine de fichiers, les déclinaisons d’une police variable sont toutes réunies dans un seul et même fichier, plus lourd que celui d’une fonte classique mais bien inférieur au poids d’une famille de fontes. C’est une économie de données à charger appréciable, qui réduit le temps d’affichage à l’écran.

Par exemple, sur le texte de cette page, on utilise Orelo Variable qui pèse 246 ko, au lieu de la famille complète Orelo (100 fichiers qui représentent un poids total de 4500 ko !).

Ce système est aussi l’occasion de faire un ménage de printemps dans son environnement de travail. Se référer à un fichier unique évite de stocker plusieurs sous-fichiers de polices et de faire le tri entre les différentes déclinaisons. Dans la famille OpenSans, je voudrais l’ExtraBold 800 Italic… Avec ce nouveau système, plus de Helvetica Rounded Bold Condensed Oblique. La nomenclature à rallonge est reléguée au rang de coordonnées obtenues en jouant avec les axes de variation. 

Mais tout cela n’est intéressant que si on utilise un grand nombre de fontes, or il est d’usage de limiter les mises en page à 3, voire 5 polices différentes pour éviter la fracture de l’œil. Quel intérêt dès lors ? Au-delà d’un éventuel gain de performances, l’intérêt des fontes variables est avant tout conceptuel. Avec ce nouveau système, les créateurs de caractères sont libres d’être plus inventifs dans l’élaboration de fontes. Les utilisateurs de ces fontes peuvent, quant à eux, en manier les styles avec beaucoup plus de précision. Les polices statiques présentent certes de nombreux styles parmi lesquels piocher, mais les fontes variables permettent, à portée de curseur, d’ajuster très précisément les caractéristiques pour obtenir une version plus audacieuse ou légèrement modifiée d’un caractère. 

 

Pour la petite histoire…

L’idée des fontes variables ne date pas d’hier. En 1957, Frutiger créait déjà Univers, famille typographique aux multiples variantes. Quelques initiatives avaient été mises en place pour affiner l’utilisation numérique des fontes dans les années 90, notamment la création de formats de polices adaptables au changement de taille comme les fontes Multiple Master d’Adobe, qui introduisaient l’interpolation de styles, rapidement concurrencées par le format TrueType GX d’Apple. Mais développées individuellement par des acteurs concurrents, différentes technologies d’interpolation de polices s’affrontaient dans une véritable guerre des formats. Aujourd’hui, les fontes variables sont le fruit d’un effort collectif visant à définir, non seulement une norme commune, mais aussi des implémentations interopérables : Adobe, Apple, Google et Microsoft annoncent conjointement l’introduction des fontes variables (sous le nom d’Open Type Font Variations) dans la version 1.8 de la spécification OpenType. La standardisation d’une telle fonctionnalité dans OpenType a ouvert la voie à sa prise en charge par de plus nombreuses applications, notamment avec l’apparition des premiers logiciels supportant la création de fontes variables dès 2018  (Glyphsapp pour Mac et Fontlab pour Microsoft/Mac). 

 

Univers, 21 Variantes. Adrian Frutiger, 1957.

 

Alors, gadget passager ou prémices d’une révolution ?

Nous constatons, avec un certain plaisir, que la typographie prend une place grandissante dans le design graphique depuis quelques années. Dès lors, on peut s’attendre à ce que les fontes variables confirment cette tendance en ouvrant des perspectives créatives nouvelles.

Les fontes variables commencent doucement à faire quelques apparitions en dehors des portfolios des accros à la typo, mais leur utilisation par les marques reste malheureusement très anecdotique et se limite généralement à de trop rares logos ou à quelques créations interactives.

En réalité, c’est surtout en animation et en interactivité que les fontes variables ont des perspectives démentielles. On attend avec impatience qu’elles soient intégrées nativement dans Figma et After Effects pour voir les créatifs s’en emparer pleinement, et qu’elles deviennent un vrai vecteur d’interactions immersives. Liées à des données réelles, une fonte variable pourrait s’adapter à l’éclairage d’une pièce, au bruit, à la température, à la météo, aux statistiques et bien plus encore. L’avenir reste à écrire !