Apple affiche déjà les polices variables avec WebKit
Pendant longtemps, le web a été limité aux polices installées sur les ordinateurs. Depuis plusieurs années maintenant, les créateurs de site peuvent utiliser n’importe quelle police en la chargeant depuis leurs serveurs ou plus souvent depuis les serveurs d’un service dédié. Le succès de Google Fonts est là pour en témoigner : la majorité des sites utilise désormais une police personnalisée.
Cette option offre aux designers une liberté supplémentaire extrêmement importante et on sait bien que la typographie est un élément essentiel pour créer un design. Malheureusement, elle est aussi très lourde à mettre en place et à charger. Pour qu’un navigateur affiche une police, il faut transférer sur l’appareil qui affiche le site tous les caractères. Ils sont transmis sous la forme de fichiers qui contiennent tout l’alphabet et tous les caractères spéciaux pour chaque style.
Si vous voulez utiliser une police personnalisée pour du texte, vous devrez transférer au moins quatre fichiers à chaque consultation de page. Un pour la police normale, un autre pour l’italique, encore un pour le gras et un dernier pour le gras italique. C’est le strict minimum, mais de plus en plus de polices offrent plusieurs épaisseurs (ultrafin, fin, gras, noir, extranoir…) et il faut à chaque fois un fichier supplémentaire pour les exploiter.
Ces fichiers ne sont pas très lourds, c’est rare qu’ils atteignent les 100 Ko, mais leur nombre augmente vite et les fichiers de police finissent par représenter une part importante de ce qui est chargé sur une page web. Avec des connexions lentes, cela devient un problème et le contenu s’affiche souvent en retard à cause des polices. Pour compliquer encore les choses, les créateurs de site qui choisissent d’héberger eux-même les polices sur leur serveur doivent gérer plusieurs formats pour que tout fonctionne sur chaque navigateur.
Bref, les polices sur le web sont une excellente idée, mais la réalisation souffre encore de quelques défauts importants, mais les créateurs de navigateurs travaillent sur ces questions pour améliorer les choses. Apple, mais aussi Google, Adobe et Microsoft, ont proposé récemment une idée bien trouvée pour régler en partie le problème : les polices variables.
L’idée est d’envoyer un seul fichier avec les formes de base de chaque lettre et c’est le navigateur qui affichera la police plus ou moins finement en fonction de la feuille de style du site. Les polices variables ne règlent pas le problème de l’italique, puisque les lettres ont alors des formes différentes, mais il ne sera plus nécessaire d’avoir un fichier par niveau de graisse. Voici ce que cela pourrait donner concrètement pour San Francisco, la nouvelle police d’Apple :
La dernière version de Safari Technology Preview sous Sierra prend en charge ces polices variables. Si vous avez la bonne version du navigateur et la dernière version de macOS, vous pouvez voir à quoi cela ressemble concrètement avec ces deux exemples : ici et là. Outre des sites allégés, cette nouveauté apporte plus de souplesse encore : jusque-là, l’épaisseur des lettres était définie en amont, par le créateur de la police.
Désormais, n’importe quelle valeur pourra être affichée et l’on pourra avoir un rendu extrêmement précis. Ce qui signifie aussi que l’on pourra changer l’épaisseur des lettres en fonction de l’appareil. Ou alors animer des changements d’épaisseur, comme sur l’animation plus haut, ce qui offre de nouvelles opportunités pour les sites. Et tout ça, à partir d’un unique fichier, ce qui sera aussi nettement plus simple à gérer.
La solution proposée est très ambitieuse, puisqu’elle prévoit de changer non seulement l’épaisseur des lettres, mais aussi l’espacement entre chaque lettre et même la hauteur et la largeur de chaque lettre. De quoi affiner l’affichage et obtenir un rendu aussi propre que si l’on chargeait directement la police créée à l’origine. Et peut-être qu’à terme, on pourra aller plus loin encore et « programmer » une italique pour ne charger vraiment qu’un seul fichier.
Cette nouvelle technologie est encore à ses débuts sur le web et sauf erreur, seule cette version bien spécifique de Safari sous macOS Sierra la prend en charge pour le moment. Il ne fait aucun doute néanmoins qu’à terme, tous les navigateurs pourront afficher les polices variables. Il restera néanmoins à convertir toutes les polices pour les rendre compatibles avec ce nouveau fonctionnement… et c’est probablement sur ce point qu’il y a le plus de travail à mener.
Balbutiante ? Est-ce que ce n'est pas tout simplement une repompe de la technologie Multiple Master d'Adobe… ?
QuickDraw GX avait déjà une techno silimaire fonctionnelle.
Adobe et ses MultiMaster aussi avait déjà une telle techno il y a quoi, 20 ans ?
Ça n'a rien de nouveau ou innovant.
Le vif zéphyr jubile sur les kumquats du clown gracieux.
Oui, c’est une sorte de retour dans le passé, cette approche.
Ouais, si les sites web s'occupaient d'écrire des choses intéressantes on s'intéresserait un peu moins à la forme.
@nicolasf
Nicolas, N'oublions pas de tresser une immense couronne à Donald E. Knuth, sans qui tout cela ne serait pas possible.
Son concept de "Meta-Font", avec des tracés infiniment paramétrisables, a bénéficié de l'appui de typographes et calligraphes tels que Hermann Zapf. (Que tous les typo-luddites se le tiennent pour dit !)
Le logiciel METAFONT est encore aussi visionnaire qu'exemplaire.
Le premier article sur Meta-Font, réalisé en METAFONT, 1982 (très mauvais scan, je n'ai pas de copie numérique...) :
http://www.zigzaganimal.be/elements/the-concept-of-metafont.pdf
Sur la typographie paramétrique de Knuth en général :
https://www.typotheque.com/articles/typeface_as_programme
Et sur le fond :
http://www-cs-faculty.stanford.edu/~uno/index.html
http://www-cs-faculty.stanford.edu/~uno/abcde.html
Ces technos produisent en général des résultats décevants.
Quand on sait le temps que l’on peut passer à fignoler les moindres détails d’une police, c’est toujours un crève-cœur que de les voir ainsi malmenées.
Ha non le MultipleMaster font d'adobe respectait les engraissements et autres italiques. Il contenait toutes les variantes d'une même famille. Le fichier était plutôt léger en comparaison du couple bitmap/postscript. On retrouve la même approche avec l'opentype.
La il s'agit justement de passer outre les dessins originaux. Grosse régression. Étonné même qu'Apple et Adobe s'associent à ça.
Tout fout l'camp. Désolé c'est le typographe amoureux du boulot des typodesigners qui cause. ?
Parce que s'ils font cela c'est sans doute qu'ils ont séché à recréer repenser l'opentype pour qu'il s'allège et permette donc de respecter les dessins originaux sans cette béquille…
Sinon chouette ; on va pouvoir rendre les typos Dafont encore plus vilaines ! ?
@ Neufouad
« La il s'agit justement de passer outre les dessins originaux »
T'es sûr ?
« les formes de base de chaque lettre », c'est quoi à ton avis ?
Oui je suis sûr qu'une gillsans regular et une gillsans ultra ne partagent aucun point commun et font pourtant partie de la même famille… Si je comprends à peu près ta drôle de question. ?
Apres si cette solution permet en effet de se passer de la description des variantes ; j'en veux bien pour mes maquettes. Parce que bon ; quelques milliers de typos sans compter les variantes hein…
Je demande donc un exemple avec une gillsans pour voir… ?
Hérésie !
La graisse typographique doit être décidée et dessinée par le typographe !
@ pn10000
On nous a dit pendant des années qu'il y avait le bon et le mauvais cholestérol.
Et bien il y a polémique à ce sujet, car les deux seraient indispensables !
;-)
@pn10000
Même en admettant que le problème de la graisse typographique ne soit pas décidable algorithmiquement — ce qui reste absolument à prouver — le travail de Knuth et l'exemple de sa collaboration avec Zapf montre que toutes les variantes nécessaires et voulues par le typographe sont paramétrisables et, une fois paramétrisées, peuvent être générées dynamiquement au moment voulu.
La question n'est pas de savoir si on peut le faire, mais d'atteindre ou non un niveau qualitatif acceptable.
Écoutez les œuvres composées par des intelligences artificielles (ex: Google Magenta Music), vous constaterez que cela ne vaut pas un clou même s'il s'agit d'un petit exploit technique.
Donnez moi un exemple de police de qualité qui ne soit pas "dessinée" "à la main".
Dessinée à la main par un(e) artiste. Il faut leur rendre. ?
@Simeon
« Écoutez les œuvres composées par des intelligences artificielles (ex: Google Magenta Music), vous constaterez que cela ne vaut pas un clou même s'il s'agit d'un petit exploit technique. »
Nous auront tout loisir de nous soucier de l'intelligence artificielle quant nous n'aurons plus à désespérer des insuffisances de l'intelligence humaine. Ne serait-ce que au plus simple niveau du terme, celui de la compréhension de ce qui est écrit.
Il suffit de lire les références données, puis de relire soigneusement mes commentaires, pour se rendre compte qu'il ne s'agit nullement de dessiner artificiellement des caractères, mais du rendu paramétrisé des variantes.
En ce qui concerne la genèse des variantes, les livres et articles de et sur Donald Knuth ainsi que sur sa collaboration avec Zapf parlent d'eux-mêmes.
Construire une analogie avec la composition musicale par IA est totalement incongru. (Néanmoins, vous en mésestimez l'importance en la qualifiant de « petit exploit technique ». Ce n'est pas un exploit mais une avancée, dont l'aspect purement technique est le moins intéressant.)
« Donnez moi un exemple de police de qualité qui ne soit pas "dessinée" "à la main". »
Il n'y a absolument pas lieu de le faire dans ce contexte.
Et c'est justement une des grandes richesses de l'approche algorithmique de Knuth.
"Nous auront tout loisir de nous soucier de l'intelligence artificielle quant nous n'aurons plus à désespérer des insuffisances de l'intelligence humaine.Ne serait-ce que au plus simple niveau du terme, celui de la compréhension de ce qui est écrit"
La condescendance est rarement une forme d'intelligence.
Je concède cependant bien volontiers que je vous ai mal lu.
Une précision cependant, qui n'a certes rien à voir avec des questions de rendu.
"Construire une analogie avec la composition musicale par IA est totalement incongru. "
Google Magenta Musique est un programme de génération de musique à partir d'un éventail de compositions réelles d'un même compositeur. Il s'agit d'analyser les différents paramètres de certaines compositions pour en générer des variantes plausibles.
La question de l'intelligence artificielle était ici tout à fait secondaire, mais je l'ai employée puisqu'il s'agit de l'expression mise en avant par Google pour présenter ce programme.
Si seulement cela avait existé alors que j'étais webmaster!
Que de contraintes gommées. Que de textes-images en moins. Que de possibilités créatives en plus!
Je suis surpris par quelques affirmations dans l'article; bien que je peux comprendre que l'on ne peut pas toujours nuancer.
Je ne vois pas pourquoi il faudrait référencer les quatre styles si on ne les utilise pas dans la page.
De plus, je ne crois pas que le navigateur doive télécharger les polices à chaque consultation. Ces polices sont stockées dans le cache. Quand il s'agit de polices à grand succès, le cache peut aussi servir pour d'autres sites qui les utilisent, non ?
On peut aussi charger les polices en fin de téléchargement de la page, mais il est vrai que cela provoque une "saute" dans l'affichage quand la police devient disponible.
Quant aux italiques, beaucoup se contentent sans le savoir des obliques. Style que le navigateur peut construire lui-même, même si c'est regrettable.
Que les simplifications fassent bondir les puristes, je le comprends très bien, je suis du métier, mais je ne suis pas certain que tous ces raffinements (notamment ce que l'on nommait les "hints" dans le jargon) soient visibles sur tous les écrans même s'il est vrai que la haute définition s'est largement répandue et deviendra bientôt la norme.
Pour en venir à Adobe et Apple, je ne sais plus lequel des deux a développé un système d'affichage approximatif des polices non résidentes localement. On peut imaginer que le navigateur s'en serve pour afficher la page au plus vite avant de recevoir le fichier de police complet. Après tout, les images aussi ont cette faculté.
Je termine en remerciant le rédacteur et la team pour tous ces articles qui me divertissent et m'informent depuis tant d'années. :)
Les professionnesl de la chose se déchaînent à juste titre.
La grasse est plus subtile qu'une homothétie.
Quant à l'italique, qui n'est pas une simple inclinaison des lettres, trop de lettres sont dessinées différemment pour les fondre simplement en un seul fichier.
Mais peut être verront nous surgir des polices bien lissées qui sauront tirer profit de cet nouveauté.
Reste que, comme pour les couleurs, Internet tend à la simplification pour sauvegarder la fluidité, mais jusqu'où simplifier?