FTS Talk #5 : Maïté illumine (et anime) les typographies variables !

Dans l’équipe de Fantassin, tout le monde ne fait pas de développement web. Alors quelques bonnes âmes se dévouent, de temps à autre, pour sensibiliser à certaines questions techniques pour améliorer le fonctionnement du collectif. Cette fois, c’est au tour de Maïté de nous initier aux typographies variables, et finir avec un peu de mise en pratique.

Partout sur le web, il y a de la typographie. Des caractères qui s’enchaînent dans les titres et paragraphes de vos contenus en ligne. Du gras, de l’italique, des majuscules, pour mettre en valeur des mots et des propos qui vont nourrir le web. Des chiffres et des lettres à concevoir pour les graphistes, puis à intégrer pour les développeurs.

Pour faire plus clair, c’est un aspect fondamental du travail de graphisme, et donc du quotidien d’une agence web. C’est un chantier qui va bien au-delà des préférences esthétiques, et se penche sur les questions d’accessibilité, de lisibilité et de signifiant pour proposer à tous les lecteurs une expérience confortable.

Alors quand une avancée technique vient faciliter ce travail, c’est important d’en parler pour en saisir toutes les possibilités. C’est donc notre développeuse Maïté qui s’est emparée du sujet pour présenter à l’équipe les typographies variables.

Une typographie variable, c’est quoi ?

Une typographie variable, c’est un seul fichier contenant l’ensemble des variations possibles de la typographie. Tous les degrés de gras, tous les alignements d’italique, les largeurs et espacements, et toutes les possibilités de mise en forme que le concepteur de la police de caractère aura pensé.

Là où chacune de ces variations représentait auparavant un fichier distinct (et donc parfois des dizaines de fichiers à installer pour une même typographie), une typographie variable concentre tout au même endroit, bien optimisé, bien compressé, idéal pour travailler dans l’efficacité. Particulièrement pour les usages web.

Cette technologie a en effet été inventée pour faciliter l’usage des CSS, pour paramétrer finement l’affichage à l’écran, via les paramètres d’une seule police, et non d’appels individuels de polices différentes. 

Cette nouveauté a été annoncée par des représentants d’Adobe, Apple, Google et Microsoft le 14 septembre 2016, à la conférence ATypI. La fonctionnalité des fonts variables a donc été introduite dans la norme OpenType avec la version 1.8, ouvrant de nouvelles possibilités pour les sites web du monde entier.

Pourquoi les fonts variables ?

Avant les typographies variables, il fallait intégrer à son site autant de fichiers que de variations typographiques. Et ça peut aller vite : regular, italique et gras, ça fait déjà plusieurs fichiers pour le corps de texte. Si on ajoute une ou deux graisses supplémentaires pour les titres, on commence à avoir une augmentation significative du nombre de requêtes HTTP et du nombre de données téléchargées.

Donc une perte de temps et de performances. Or, pour un site web, les performances, c’est important. Et ça fait partie des atouts remarquables des typographies variables.

Taille de fichier réduite

Une police variable est une police unique qui agit comme une combinaison de plusieurs : toutes les variations de largeur et de graisse, d’inclinaison et autres caractéristiques peuvent être contenues dans un fichier de police unique, hautement efficace et compressé. Avec moins de demandes HTTP, les polices variables offrent une économie globale de données à télécharger. Pour des gains de performance visibles.

Gestion de l’accessibilité

Les polices variables peuvent améliorer l’expérience de lecture et d’accessibilité : elles peuvent être programmées pour s’adapter au contexte, à l’appareil, aux préférences de l’utilisateur, à la distance du lecteur…

Elles permettent d’envisager des sites Web reposant sur une hiérarchie typographique raffinée et créative pour fournir un contenu clair et accessible.Et repenser l’expérience de lecture avec de nouvelles possibilités.

Un éventail de conception flexible

En général, pendant la phase de design on se limite à 3 ou 4 polices différentes maximum, afin de représenter chaque aspect du langage et de l’identité visuelle d’un site, y compris chaque permutation pour le corps du texte et les titres. 

Les polices variables offrent la liberté d’utiliser des graisses et des styles supplémentaires pour chaque niveau de texte. Un nouveau monde de possibilités s’ouvre aux designers et aux créatifs, désormais en mesure de concevoir de nouvelles expériences visuelles pour les internautes !

Les polices variables en pratique

Et comme nous aussi on a envie d’expérimenter en mettant les mains dans le CSS, Maïté nous a donné les clés pour faire notre propre création basée sur des typographies variables, pour que chacun puisse exprimer sa créativité. On vous présente donc les résultats les plus aboutis !

On commence par l’animatrice du jour Maïté, qui utilise les variations pour créer une animation dynamique et colorée :

Ensuite il ya notre directeur artistique Joffrey, qui a utilisé les paramètres de variation pour proposer une animation pédagogique sur les spécificités graphiques de 5 familles de typographies :

Notre directeur technique Florian s’est lancé dans une opération purement esthétique mettant en scène le nom de l’agence :

Enfin, notre développeur Jonathan a voulu faire le malin en faisant varier sa police de caractère en fonction de l’environnement sonore !

En tout cas, ça nous a donné envie d’explorer encore plus le potentiel de cet outil… et on espère que vous aussi ! Si c’est le cas, comment allez-vous utiliser les typographies variables ?