IOLCE
Variable Fonts and the future of web typography

An Event Apart Orlando | 10 Octobre 2018

Jason Pamental

Expert en typographie, il écrit en 2014 “Responsive Typography”. En 2016, les polices de caractères variables voient le jour et Jason s’y intéresse de très près. Amoureux d’animaux, il ne reste jamais bien loin de ses chiens qu’il utilise comme métaphore lors de ses différentes présentations.

jason pamentalhttps://csscamp.tech/2019/speakers/jason-pamental/

Lors de sa conférence à An Event Apart à Orlando en octobre 2018, Jason Pamental nous expose justement les raisons pour lesquelles il considère les “variables fonts” comme étant le future du web. Pour lui, une police n'est pas qu'un élément visuel, elle est porteuse de sens. Il nous explique, à travers différents points, quels sont les avantages à utiliser une “variable font” et s'attarde un peu sur les aspects techniques de ces dernières. Le contenu qui va suivre est donc un résumé de cette conférence.

La typographie, la voix des mots

Les mots ont de l’importance. C’est eux qui permettent de s’exprimer, de se faire comprendre et de sous-entendre des idées. Alors qu’à l’oral, les intonations aident à la compréhension du contenu, à l’écrit, c’est la typographie qui joue ce rôle. Le choix de la police de caractère est primordiale lorsqu’on écrit. Si l’on prend l’exemple du “Book of Psalms”, rien que l’illustration et le choix de la typographie nous fait comprendre que le contenu du livre est important. La typographie est donc porteuse de sens, elle a été réfléchie dans un but particulier.

The interface of those words, between the source and the recipient, is type.

Dans son essai “Crystal Goblet”, Beatrice Warde nous explique qu’il pourrait exister une seule police de caractères parfaite. En effet, elle pense qu’une police de caractères se doit d'être belle mais surtout neutre, transparente. À l’image d’un cristal, elle ne doit pas influencer le message du texte qu’elle accompagne. Jason n’est pas d’accord avec cette idée car pour lui, le point de vue de Beatrice Warde mènerait inéluctablement vers une uniformité. Une police se doit donc d'être porteuse de sens afin que les mots puissent élever la voix du message. Une même phrase écrite avec 2 polices de caractères différentes, ne voudra jamais dire la même chose.

Type is how we hear what we read.

Il n’est donc pas envisageable de mettre au point un seul design utilisable pour une majorité de projets.

By designing something for an average pilot, it was literally designed to fit nobody.

Dans le but d’améliorer les capacités de leurs pilotes, l’armée de l’air américaine a décidé de prendre les mesures de tous leurs membres. Il en résulte 10 tailles moyennes sur laquelle l’armée se base pour concevoir leurs avions. Elle remarque alors que le nombre d’accident augmente. En fait, aucune de ces 10 tailles ne correspondait réellement à un seul militaire. C’est la même chose pour le web. Un design général est un bon point de départ, mais pas un résultat final.

L’armée a donc financé d’autres recherches qui ont abouti à une nouvelle solution; les sièges et les commandes de contrôle sont ajustables. Résultat : le taux d’accident diminue.

Les “variables fonts” fonctionnent comme les commandes ajustables de son exemple, chaque utilisateur a le droit de faire ses propres modifications et ainsi, d'adapter la police à son contenu.

Avantages d’une variable font

Si Jason aime autant utiliser les polices de caractères variables c’est surtout pour ses avantages.

variable font gifhttps://search.muz.li/NjQ0MThjNzNi

En effet, celles-ci nous en offrent 3 principaux avantages :

  • la variabilité de certains paramètres;
  • le poids des fichiers;
  • l’adaptabilité.

Un peu de technique

Derrière tous ces aspects pratiques, il y a également une partie plus technique qui permet tout cela.

Comment ça fonctionne ?

La “variable font” est créée comme une police normale sauf que son contour, parsemé de deltas — points d'ancrage, sont modifiables tels des SVG au moyen des courbes de Bézier.

Optical Sizing

Avec l’apparition de l’écriture, les Hommes se sont vite rendus compte qu’un texte, selon sa taille, est plus ou moins facile à lire. Ils ont donc décidé que, pour une même police, le dessin des lettres changerait selon la taille de corps utilisé facilitant ainsi sa lecture; c’est l’optimal sizing. Avec les “variables fonts” cette propriété css est activée automatiquement.

optical sizinghttp://uxpamagazine.org/wp-content/uploads/sites/10/2018/10/18-4-Pamental-Fig5.png

Le futur du Web

On peut donc se demander où se trouve le futur de la typographie dans le web? Existera-t-il une seule police parfaite peu importe le contexte et le contenu? Non. Jason s’est renseigné auprès d'un typographe et il s’avère que toute police existante est convertible en police variable. Notre choix de police reste donc ouvert à une infinité de possibilités. Nous cherchons, nous trouvons, nous créons des nouveaux outils et nous agrandissons notre répertoire ainsi que nos capacités à designer.

I don’t care about any other design element. If you give me one variable font, I can create a great piece of design that will be compelling and resilient.

Le groupe

Case study

Qu'est ce que IOLCE ?

IOLCE est un projet consistant à analyser une conférence liée au domaine du web, à la retranscrire en groupe et à se la réapproprier au travers de la confection d’un site web réalisé individuellement.

case study iolce 2019

Travail de groupe

Mon groupe était composé de Joachim Minnella, Julien Ma, Keyssi Wone, Raphaël Mauclet et moi-même (Tristan Deltour)

Nous avons tous regardé la conférence et fait une prise de note chacun de notre coté. Personnellement, j'ai activé les sous titres et regardé 3 fois la conférence pour ma prise de note. Suite à ça nous avons fait un résumé puis une mise en commun pour en faire une synthése globale et groupé. Vient alors le premier jour, rencontre avec l'équipe, et rédaction au propre du travail. Joachim a fait beaucoup dans le travail, il formule et écrit très bien donc nous disions les idées et il le mettait en forme. Après nos 3 regroupements, mise en page, rédaction et hierarchie des éléments, la structure narrative de nos futurs sites est prête.

markdown iolce groupe 6

Nous étions tous d'accord pour dire que la conférence "Variable Fonts and the future of web typography" de Jason Pamental était a la fois interessante mais aussi très pertinente.

Le design du site

Je suis parti sur un design qui fait beaucoup penser à un article web donc très épuré et très carré en faisant des séparations/cassures dans la structure lors des citations

couleur adobe color complémentaire

Pour les couleurs, prédominance du noir et du blanc avec de legeres teintes de bleu et du jaune pour faire les cassures

couleur adobe color complémentaire

La police que j'utilise est "Gupter" et "Domine" qui se rapproche le plus possible des polices vu durant la présentation de la conférence. Tout en mettant en pratique ce qu'y a été vu pendant la conférence, l'optical sizing

optical sizing

Problémes rencontrés

Le design n'est pas mon point fort, j'ai été aidé par Palmigiano Lisa pour recalibrer plusieurs choses dans mon site comme :

L'organisation de mon code, je commence toujours par faire mon site sans structuré le css, je me repète, le mauvais nom des class, ... une fois le site terminé, je refais en entier mon code, utilise la méthode BEM et réduis un maximum le nombre de ligne dans le css.