Tag Archive for: CSS

Open Type Font Variation

Aujourd’hui, Safari en version 11 dans macOS High Sierra 10.13 devient le premier navigateur de bureau à prendre en charge et manipuler en CSS les Variable Fonts ou OpenType 1.8 Font Variation, nouveau format dévoilé il y un an à l’ATypI 2016 (Post et Vidéo). Il rejoint Safari pour iOs disponible depuis la semaine dernière dans iOS 11. A noter que ces versions rattrapent leur retard et prennent enfin en charge la propriété CSS font-feature-settings, c’est à dire le support des fonctionnalités OpenType traditionnelles, disponible chez les concurrents depuis un moment.

Font  Variations !

Si vous visitez cette page avec un navigateur compatible, ces mots doivent s’animer. Safari devrait être suivi le mois prochain par Chrome 62 et il est possible d’activer le support dans Firefox. Pour le moment, ces deux navigateurs semblent avoir des problèmes de mémoire saturé par cette démo, soit en raison de la fonte variable, soit des animations CSS non accélérés matériellement.

Les Variables fonts sont une initiative des géants du secteur (Adobe, Apple, Google, Microsoft) qui y voient comme premier bénéfice de compresser les fichiers de polices et de faciliter le support des autres systèmes d’écritures. Dans le cas de la famille Source Sans d’Adobe: inclure toutes les graisses en romain et italique implique de charger 12 fichiers pour un poids de 2,4mo, qui se trouvent réduit à 2 fichiers pour 600ko dans sa version Variable. L’économie en coût de stockage et en bande passante est évidente. Et encore il s’agit ici de fichier .ttf, le format .woff2 sera encore plus économe.

Cette technologie, héritière de QuickDraw GX et d’AAT Apple Advanced Typography (et des fontes Multiple Masters dans une moindre mesure) promet néanmoins de nombreuses possibilités. Cette démonstration ne montre qu’un seul cas (qui devrait être un des plus courant dans un premier temps) avec l’emploi d’un axe permettant de choisir très précisément la graisse ou comme ici de l’animer. Une fonte variable peut disposer de plusieurs axes, chacun permettant la variation d’une caractéristique telle que la graisse, mais aussi la chasse, les corps optiques et les grades pour ne citer que les plus évidentes. De nombreux autres cas et axes sont inventés; des plus utiles au plus loufoques. Axis-Praxis présente diverses expérimentations imaginés ces derniers mois.

hamburgefonstiv

Ce n’est que le début du support CSS mais le web avance très vite et en retirera un grand bénéfice. D’autres propriétés viendront compléter plus tard font-variation-settings et le support initial qu’il permet. On attend maintenant ces possibilités dans les logiciels de design graphique. Une démo vient d’être présenté dans Photoshop et cela n’est pas sans poser de nombreuses question quant à l’UI à adopter pour faciliter l’utilisation de ces possibilités là où les fonctions OpenType ne sont déjà pas toujours bien implémenté ou ne serait-ce que connu des utilisateurs.

Espérons que cela sera moins long et chaotique que pour les divers formats de ‘Color Fonts’, ou qui sait, que ce nouveau cap soit l’ocassion pour les développeurs de repenser l’ensemble et d’avancer sur ces deux terrains. J’imagine bien une Color Font dont un axe ou plusieurs contrôlerai la palette CPAL à employer. Safari doit dans ce champ prendre exemple sur Microsoft Edge, seul navigateur actuel à supporter les quatre formats de Color Fonts et notamment le format ‘COLR’ de Microsoft, selon moi plus intéressant que le OpenType SVG, aujourd’hui plus en avance pour une utilisation effective.

Il serait surtout temps qu’InDesign arrête d’être pour Adobe le dernier de la classe, tant il profiterai de tout cela bien plus logiquement que Photoshop, toujours servi en premier. A moins que la concurrence ne s’accèlere si Affinity Publisher vient à sortir avec ces éléments implémentés. Ne rêvons pas, cela vas prendre du temps. Mais fêtons cette première implémentation publique et espérons que les opportunités qu’elle laisse entrevoir soient réclamés tant par les professionnels que par les clients pour que le chemin ne se referme pas cette fois ci encore (a l’instar de Type 3, des MM, d’AAT…).

PS: Des artefacts sont visibles dans cette démo librement basé sur le caractère Source Sans d’Adobe. Une version du Source Sans bien plus rigoureuse au format Variation font vient d’être publié par son éditeur ici.