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

Adf4ff2212aea06456ca3c3bca95c0db?s=47 Raphael Goetter
February 07, 2019

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 !

Adf4ff2212aea06456ca3c3bca95c0db?s=128

Raphael Goetter

February 07, 2019
Tweet

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; }

  35. None
  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)