L'épopée des polices web, de Comic Sans aux variable fonts

On retrace le parcours des polices dans le web, côté CSS. Avec Comic Sans, CSS1, @font-face, les formats de compression, Google Fonts, les fontes d'icônes, les ligatures, font-display et enfin la révolution des variable fonts.
Et il y a de quoi dire !

Transcript

1. de Comic Sans aux variables fonts L’ÉPOPÉE DES POLICES WEB Photo : Gerard Dou - Old Woman Reading (domaine public)
2. hello, je suis alsacien raphaël goetter
3. 1995 Comic Sans 1996 CSS1 1998 @font-face trou noir 2009 woff 2010 Google Fonts 2011 CSS3 2012 Icon Fonts 2013 ligatures 2015 font-display 2016 variable fonts notre parcours…
4. source : https://httparchive.org/reports/state-of-the-web?start=2012_07_15&end=latest&view=list usage des polices dans le web
5. source : http://httparchive.org/ poids des polices dans la page
6. 444 KO
7. COMIC SANS MS 1995 Hi! I am
 Mr Vincent Connare
8. JUGÉ « INFANTILE » https://twitter.com/LIndeprimeuse
9. source : http://ville.montreal.qc.ca/portal/page? _pageid=2496,3086502&_dad=portal&_schema=PORTAL IL EST PARTOUT !
10. DYSLEXIE FRIENDLY source : http://www.adsr.ch/index.php/fr/faq/faq-dys/les-faq-de-dyslexia-international-reponses- longues/464-quelle-est-la-meilleure-police-d-ecriture-pour-les-dyslexiques.html
11. COMIC SANS • Suscite la haine de tous les typographes • Classée dans les 50 pires inventions du monde
 (Times Magazine 2010) • Google lui dédie son 1er Avril 2011 le paradoxe • Favorise la mémorisation des contenus
 (étude réalisée à Chesterfield en 2011) • Recommandée en cas de dislexie
12. CSS1 1996 p { color: blue; }
13. CSS1 • Né en 1996 grâce à Bert Bos et Håkon Wium Lie • 53 propriétés (plus de 400 en CSS3) • Beaucoup de propriétés concernant les polices • … Pas toujours intuitives
14. QUIZ « font- » « text- » ou « autre » ?
15. PROPRIÉTÉ 1 « font- », « text- » ou « autre » ? p { taille de texte: 2em; }
16. FONT- p { font-size: 2em; } PROPRIÉTÉ 1
17. PROPRIÉTÉ 2 « font- », « text- » ou « autre » ? p { graisse de texte: grasse; }
18. FONT- p { font-weight: bold; } PROPRIÉTÉ 2
19. PROPRIÉTÉ 3 « font- », « text- » ou « autre » ? p { couleur de texte: rose; }
20. AUTRE p { color: pink; } PROPRIÉTÉ 3
21. PROPRIÉTÉ 4 « font- », « text- » ou « autre » ? p { style de texte: italique; }
22. FONT- p { font-style: italic; } PROPRIÉTÉ 4
23. PROPRIÉTÉ 5 « font- », « text- » ou « autre » ? p { soulignement de texte: au-dessous; }
24. TEXT- PROPRIÉTÉ 5 p { text-decoration: underline; }
25. PROPRIÉTÉ 6 « font- », « text- » ou « autre » ? p { alignement horizontal de texte: centré; }
26. TEXT- PROPRIÉTÉ 6 p { text-align: center; }
27. PROPRIÉTÉ 7 « font- », « text- » ou « autre » ? p { alignement vertical de texte: centré; }
28. AUTRE PROPRIÉTÉ 7 p { vertical-align: middle; }
29. PROPRIÉTÉ 8 « font- », « text- » ou « autre » ? p { hauteur de ligne de texte: 1.5; }
30. AUTRE PROPRIÉTÉ 8 p { line-height: 1.5; }
31. PROPRIÉTÉ 9 « font- », « text- » ou « autre » ? p { casse du texte: majuscules; }
32. TEXT- p { text-transform: capitalize; } PROPRIÉTÉ 9
33. PROPRIÉTÉ 10 « font- », « text- » ou « autre » ? p { casse du texte: petites majuscules; }
34. FONT- PROPRIÉTÉ 10 p { font-variant: small-caps; }
36. @FONT-FACE 1998 Illustration : « Plevangie » (Deviantart)
37. @FONT-FACE • Permet d’afficher une police de caractères non présente 
 chez l’utilisateur(trice) • Existe depuis CSS 2.0 • Pendant longtemps reconnu uniquement par… IE4
 via un format propriétaire .eot complexe • Il disparaît donc de CSS 2.0 et réapparaît dans CSS3 
 10 ans plus tard
38. @font-face { font-family: kiwi; src: url("/fonts/kiwi.ttf"); } on indique son chemin on nomme la fonte
39. @font-face { font-family: kiwi; src: url("/fonts/kiwi.ttf"); } on indique son chemin on nomme la fonte h1 { font-family: kiwi, sans-serif; } on applique la fonte (ici sur <h1>) avec une alternative en cas
 de souci
40. @FONT-FACE • sIFR (Scalable Inman Flash Replacement) 3 (JS + Flash); • typeface.js (JS + SVG/VML); • Cufón (JS + SVG/VML). Une première mini-révolution dans les polices web car 
 elle rend standard un besoin qui nécessitait auparavant 
 des bidouilles diverses :
41. @FONT-FACE compatibilité source : https://caniuse.com/#search=font-face
42. .WOFF 2009 et formats compressés
43. .WOFF • En 2009 Web Open Font Format (WOFF 1.0) 
 proposé par Microsoft, Mozilla et Opera • En 2013, WOFF 2.0 
 proposé par Google avec une meilleure
 compression (brotli vs gzip) et formats compressés
44. ROCKETFUEL.OTF 104 ko ROCKETFUEL.TTF 81 ko ROCKETFUEL.WOFF 55 ko ROCKETFUEL.WOFF2 43 ko
45. .eot embedded open type .ttf
 .otf truetype
 opentype .svg scalable vector graphics .woff web open font format .woff2 web open font format 2 9 4 9 4.4 ed WOFF!
46. @font-face { font-family: kiwi;
 src:
 url("/fonts/kiwi.eot") format("embedded opentype"); url("/fonts/kiwi.eot?#iefix") format("embedded opentype"), url("/fonts/kiwi.woff2") format("woff2"), url("/fonts/kiwi.woff") format("woff"), url("/fonts/kiwi.ttf") format("truetype"), url("/fonts/kiwi.svg#svgFontName") format("svg"); } « BULLETPROOF (OLD) » syntaxe
47. @font-face { font-family: kiwi;
 src: url("/fonts/kiwi.woff2") format("woff2"), url("/fonts/kiwi.woff") format("woff"); } « DES VRAIS BONHOMMES syntaxe " ou bonnes-femmes, d’ailleurs
48. .WOFFERINE Tu vas charger plus
 vite, OUAIS ?!!
49. GOOGLE FONTS 2010 source : https://fonts.google.com/
50. GOOGLE FONTS • Appelé Google Webfonts avant juin 2013, 
 puis Google Fonts • 915 familles de polices à ce jour • Toutes les polices sont libres (licence Apache et SIL OFL) • Selon builtwith.com, 
 42,380,635 sites utilisent Google Font API (2019) • Les 5 polices les plus utilisées : Roboto, Open Sans, Lato,
 Montserrat, Roboto condensed
51. GOOGLE FONTS <link href="https:// fonts.googleapis.com/css? family=Roboto" rel="stylesheet"> code HTML proposé
 par Google Font (API) div { font-family: Roboto, sans-serif; } CSS pour afficher la police version « import via HTML »
52. GOOGLE FONTS @import url('https:// fonts.googleapis.com/css? family=Roboto'); code CSS proposé
 par Google Font (API) div { font-family: Roboto, sans-serif; } CSS pour afficher la police version « import via CSS »
53. source : https://trends.builtwith.com/widgets/Google-Font-API
54. QUESTION « quel est le poids du fichier
 opensans-regular.ttf
 téléchargé de Google Fonts ? »
55. RÉPONSE 217KO !
56. CSS3 2011 tous ces beaux effets qu’on attendait…
57. CSS3 • font-variant-numeric
 meilleur affichage des nombres • font-smoothing 
 adoucissement des polices • hyphens
 gestion des césures selon la langue • font-kerning
 gestion du crénage inter-lettres • etc. mais aussi des trucs bien plus utiles
58. TEXT-SHADOW source : https://codepen.io/raphaelgoetter/pen/yGmwEp
59. TEXT-STROKE source : https://codepen.io/raphaelgoetter/pen/oJJKXP
60. source : https://codepen.io/raphaelgoetter/pen/XdLjpB BACKGROUND-CLIP
61. DU… WORDART ! mais aussi source : en vrai c’est une blague
62. EN FAIT ÇA EXISTE ! OMG! source : https://codepen.io/raphaelgoetter/pen/MLogMx
63. ICON FONTS 2012 source : https://icomoon.io/app/
64. ICON FONTS • Polices de caractères constituées d’icônes • Démocratisées avec FontAwesome dans Bootstrap • Permet de rassembler des 10aines de pictos en 
 un seul fichier (« sprite ») • Libres et gratuites : FontAwesome, Iconic, Octicons • Outils de génération : Icomoon, Fontello, Fontastic.
 c’est quoi ?
65. @font-face { font-family: MyIconFont; src: url("/fonts/icomoon.ttf"); } on charge la fonte d’icônes Twitter .icon-twitter::before { font-family: MyIconFont; content: "t"; } on prévoit une classe
 pour chaque lettre <i class="icon-twitter"></i> Twitter on applique la fonte d’icônes
66. avantages inconvénients vectoriel 1 seule requête alignements parfois hasardeux nombreux styles possibles sémantique détournée multicolore impossible accessibilité perfectible ICON FONTS
67. DÉMO source : https://codepen.io/raphaelgoetter/pen/JxJXaj
68. LIGATURES 2013
69. LIGATURES 2013 • Fusion de 2 ou plusieurs graphème…
 pour former un caractère à part entière. • Différentes types de ligatures : ordinaires, esthétiques, historiques, spécifiques. • Doivent être prévues par la police employée. • Quelques polices libres et gratuites : Calendas Plus, Fira Code, Fifita, Raleway, Lobster, Lora, PT Serif, Libre Baskerville,… c’est quoi ?
70. LIGATURES concrètement ? <p>coeur</p> cœur
71. LIGATURES concrètement ? <p> :) </p>
72. LIGATURES concrètement ? <p> poo </p>
73. FONT-VARIANT-LIGATURES ligatures courantes font-variant-ligatures: common-ligatures; ligatures historiques font-variant-ligatures: historical-ligatures; adaptation au contexte et lettres alentour font-variant-ligatures: contextual; ligatures spécifiques proposées par la fonte font-variant-ligatures: discretionary-ligatures;
74. FONT-FEATURE-SETTINGS ligatures courantes (idem que la propriété font-variant-ligature) font-feature-settings: "liga", "clig ", "dlig", "hlig", "calt"; petites capitales (idem que font-variant: small-caps;) font-feature-settings: "smcp"; propriété opentype « bas niveau » pour cas particuliers ornements calligraphiques (swash) font-feature-settings: "swsh"; ⚠ « swash »≠ « swag »
75. DÉMO https://codepen.io/raphaelgoetter/pen/BvbwaK?editors=1100
76. <h1>RG</h1> h1 { font-family: calendas;
 font-feature-settings: "swsh"; } source : http://www.goetter.fr/
77. source : http://www.sansbullshitsans.com/
78. source : http://kudakurage.com/ligature_symbols/
79. LIGATURES menu et icon font source : https://icomoon.io/app/
80. LIGATURES compatibilité source : https://caniuse.com/#feat=font-feature
81. INTERLUDE
82. QUIZ « chargé » ou « pas chargé » ?
83. CAS 1 « chargé » ou « pas chargé » ? @font-face { font-family: kiwi;
 src: url(kiwi.woff2); } <p>hopla !</p> p { font-family: kiwi; }
84. CAS 1 CHARGÉ @font-face { font-family: kiwi;
 src: url(kiwi.woff2); } <p>hopla !</p> p { font-family: kiwi; }
85. CAS 2 « chargé » ou « pas chargé » ? @font-face { font-family: kiwi;
 src: url(kiwi.woff2); } p { font-family: kiwi; }
86. CAS 2 … sauf sur IE <9 @font-face { font-family: kiwi;
 src: url(kiwi.woff2); } p { font-family: kiwi; } PAS CHARGÉ
87. CAS 3 « chargé » ou « pas chargé » ? @font-face { font-family: kiwi;
 src: url(kiwi.woff2); } <p></p> p { font-family: kiwi; }
88. CAS 3 @font-face { font-family: kiwi;
 src: url(kiwi.woff2); } … sauf sur IE <p></p> p { font-family: kiwi; } PAS CHARGÉ
89. CAS 4 « chargé » ou « pas chargé » ? @font-face { font-family: kiwi;
 src: url(kiwi.woff2); } <p>hopla !</p> p { font-family: arial, kiwi; } Note : Arial est installé chez l’utilisateur
90. CAS 4 Les specs disent que les navigateurs peuvent charger le fichier s’ils en ont envie. (pour l’instant, ils ne le font pas) <p>hopla !</p> p { font-family: arial, kiwi; } ÇA DÉPEND @font-face { font-family: kiwi;
 src: url(kiwi.woff2); }
91. CAS 5 <p>hopla !</p> « chargé » ou « pas chargé » ? p { font-family: kiwi; } @media (min-width: 999999px) { @font-face { font-family: kiwi;
 src: url(kiwi.woff2); } }
92. CAS 5 <p>hopla !</p> @media (min-width: 999999px) { @font-face { font-family: kiwi;
 src: url(kiwi.woff2); } } p { font-family: kiwi; } … sauf sur IE <11 PAS CHARGÉ
93. CASSIS « chargé » ou « pas chargé » ? <p>hopla !</p> @font-face { font-family: kiwi;
 src: url(kiwi.woff2); } @media (min-width: 99999px) { p { font-family: kiwi; } }
94. CASSIS <p>hopla !</p> @media (min-width: 99999px) { p { font-family: kiwi; } } PAS CHARGÉ @font-face { font-family: kiwi;
 src: url(kiwi.woff2); }
95. FONT-DISPLAY 2015
96. FONT-DISPLAY • Propriété CSS liée au chargement des fichiers de police • Permet d’adopter différentes stratégies de chargement • Un atout considérable pour la performance perçue des
 contenus pour la performance
97. HTML CSS fonte 1 fonte 2 400ms 300ms 200ms 100ms 0ms 500ms 600ms 700ms 800ms page blanche ?
98. blocage 1 le rendu du texte est invisible durant cette phase échange 2 la fonte alternative est affichée durant cette phase échec 3 chargement abandonné, la fonte alternative est affichée ÉTAPES DE RENDU D’UNE FONTE
99. FOIT Flash Of Invisible Text FOUT Flash Of Unstyled Text FOOT Activité sportive collective autour d’une balle (et où les allemands français gagnent à la fin) (= blocage) (= échange immédiat) COMPORTEMENTS NAVIGATEURS what the FOUT !
100. FOUT FOIT
101. FOIT FOUT
102. h1 { font-family: 'open sans', sans-serif; } MOI : … LE NAVIGATEUR :
103. j’affiche le contenu en open sans " oui open sans est-il chargé ? blocage 
 (texte invisible) non échange
 (j’affiche sans-serif en attendant) open sans est-il chargé ? non échec 
 (ça me saoûle, j’affiche sans-serif) open sans est-il chargé ? non oui oui
104. blocage 
 (texte invisible) échange
 (j’affiche sans-serif en attendant) échec 
 (ça me saoûle, j’affiche sans-serif) • IE = 0s • Chrome, FF, Safari = 3s • Safari (old) = infini blocage selon les navigateurs : • IE = FOUT • Chrome, FF, Safari = FOIT+FOUT • Safari (old) = FOIT traduction :
105. — les spécifications « Les agents utilisateurs décident de leur stratégie de chargement de fontes (FOUT ou FOIT) tant que le fichier n’est pas chargé »
106. @font-face { font-family: kiwi; src: url("/fonts/kiwi.woff2"); font-display: auto; } FONT-DISPLAY concrètement
107. phase de blocage volontaire (= FOIT) font-display: block phase d’échange immédiate (= FOUT) font-display: swap compromis selon la vitesse de connexion (= le browser peut choisir de ne pas charger la fonte du tout) font-display: optional FONT-DISPLAY valeurs utiles
108. ICON FONTS ! !
109. phase de blocage volontaire (= FOIT) font-display: block phase d’échange immédiate (= FOUT) font-display: swap compromis selon la vitesse de connexion (= le browser peut choisir de ne pas charger la fonte du tout) font-display: optional FONT-DISPLAY icon fonts texte courant valeurs utiles
110. FONT-DISPLAY source : https://caniuse.com/#feat=css-font-rendering-controls compatibilité
111. 2016 VARIABLE FONTS
112. • extension du format de police Open Type, • proposé par Adobe, Apple, Google et Microsoft (!), • une seule fonte peut contenir de multiples variantes
 d’affichage définis par le designer. mais c’est magique !
113. LEAGUE SPARTAN source : https://v-fonts.com/fonts/league-spartan-variable démo (22ko)
114. VARIABLE POO source : https://pixelambacht.nl/demo/mrpoo/ démo
115. source : https://www.axis-praxis.org FIT REGULAR & ZYCON démo
116. GRASS TEXT source : https://codepen.io/mandymichael/pen/YYaWop démo (oui encore)
117. VARIABLE FONTS h1 {
 font-family: "Variable Poo Demo";
 font-variation-settings: "crap" 300; } concrètement
118. PERSPECTIVES ? • poids et temps de chargement grandement diminués, • adaptivité à toutes les surfaces et devices, • logos animés ou responsive, • TEXTES MULTICOLORES ! du bon et du moins bon
119. EN VRAI ? source : https://2018.ampersandconf.com/
120. VARIABLE FONTS source : https://caniuse.com/#feat=variable-fonts compatibilité
121. 1995 Comic Sans 1996 CSS1 1998 @font-face trou noir 2009 woff 2010 Google Fonts 2011 CSS3 2012 Icon Fonts 2013 ligatures 2015 font-display 2016 variable fonts L’ÉPOPÉE DES POLICES WEB alors t’as vu, ça a bien bougé, hein ?
122. RESSOURCES
123. RÉFÉRENCES • MDN @font-face :
 https://developer.mozilla.org/fr/docs/Web/CSS/@font-face • Wikipedia « format WOFF » :
 https://fr.wikipedia.org/wiki/Web_Open_Font_Format • CSS-Tricks « HTML for Icon Font Usage » (2012) :
 https://css-tricks.com/html-for-icon-font-usage/ • A List Apart « The Era of Symbol Fonts » (2013) :
 https://alistapart.com/article/the-era-of-symbol-fonts • Font-display playground :
 https://font-display.glitch.me/ • CSS-Tricks « Weird things variable fonts can do » (2018) :
 https://css-tricks.com/weird-things-variable-fonts-can-do/
124. COLLECTION « TYPO » source : http://kiwi.gg/typo
125. merci ! raphaël goetter slides sur
 www.speakerdeck.com/goetter agence web organisme de formation www.alsacreations.fr forum communauté www.alsacreations.com Ah oui, penser à dire aux gens qu’il faut mettre des smileys !
126. sur formations.alsacreations.fr NOS FORMATIONS
127. « Un grand merci à grâce à qui je dois de me surpasser un peu plus chaque jour » CRÉDITS polices Helvetica Neue illustrations GratisoGraphy.com Passion One (fontstage) SignPainter (houseind) unsplash.com (Forrest Cavale)