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)
   

   View Slide

2. hello, je suis alsacien
   raphaël goetter
   

   View Slide

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…
   

   View Slide

4. source : https://httparchive.org/reports/state-of-the-web?start=2012_07_15&end=latest&view=list
   usage des polices dans le web
   

   View Slide

5. source : http://httparchive.org/
   poids des polices dans la page
   

   View Slide

6. 444 KO
   

   View Slide

7. COMIC SANS MS 1995
   Hi! I am

   Mr Vincent Connare
   

   View Slide

8. JUGÉ « INFANTILE »
   https://twitter.com/LIndeprimeuse
   
   

   View Slide

9. source : http://ville.montreal.qc.ca/portal/page?
   _pageid=2496,3086502&_dad=portal&_schema=PORTAL
   IL EST PARTOUT !
   

   View Slide

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
    

    View Slide

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
    

    View Slide

12. CSS1 1996
    p {
    color: blue;
    }
    

    View Slide

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
    

    View Slide

14. QUIZ
    « font- »
    « text- »
    ou
    « autre »
    ?
    

    View Slide

15. PROPRIÉTÉ 1
    « font- », « text- » ou « autre » ?
    p {
    taille de texte: 2em;
    }
    

    View Slide

16. FONT-
    p {
    font-size: 2em;
    }
    PROPRIÉTÉ 1
    

    View Slide

17. PROPRIÉTÉ 2
    « font- », « text- » ou « autre » ?
    p {
    graisse de texte: grasse;
    }
    

    View Slide

18. FONT-
    p {
    font-weight: bold;
    }
    PROPRIÉTÉ 2
    

    View Slide

19. PROPRIÉTÉ 3
    « font- », « text- » ou « autre » ?
    p {
    couleur de texte: rose;
    }
    

    View Slide

20. AUTRE
    p {
    color: pink;
    }
    PROPRIÉTÉ 3
    

    View Slide

21. PROPRIÉTÉ 4
    « font- », « text- » ou « autre » ?
    p {
    style de texte: italique;
    }
    

    View Slide

22. FONT-
    p {
    font-style: italic;
    }
    PROPRIÉTÉ 4
    

    View Slide

23. PROPRIÉTÉ 5
    « font- », « text- » ou « autre » ?
    p {
    soulignement de texte: au-dessous;
    }
    

    View Slide

24. TEXT-
    PROPRIÉTÉ 5
    p {
    text-decoration: underline;
    }
    

    View Slide

25. PROPRIÉTÉ 6
    « font- », « text- » ou « autre » ?
    p {
    alignement horizontal de texte: centré;
    }
    

    View Slide

26. TEXT-
    PROPRIÉTÉ 6
    p {
    text-align: center;
    }
    

    View Slide

27. PROPRIÉTÉ 7
    « font- », « text- » ou « autre » ?
    p {
    alignement vertical de texte: centré;
    }
    

    View Slide

28. AUTRE
    PROPRIÉTÉ 7
    p {
    vertical-align: middle;
    }
    

    View Slide

29. PROPRIÉTÉ 8
    « font- », « text- » ou « autre » ?
    p {
    hauteur de ligne de texte: 1.5;
    }
    

    View Slide

30. AUTRE
    PROPRIÉTÉ 8
    p {
    line-height: 1.5;
    }
    

    View Slide

31. PROPRIÉTÉ 9
    « font- », « text- » ou « autre » ?
    p {
    casse du texte: majuscules;
    }
    

    View Slide

32. TEXT-
    p {
    text-transform: capitalize;
    }
    PROPRIÉTÉ 9
    

    View Slide

33. PROPRIÉTÉ 10
    « font- », « text- » ou « autre » ?
    p {
    casse du texte: petites majuscules;
    }
    

    View Slide

34. FONT-
    PROPRIÉTÉ 10
    p {
    font-variant: small-caps;
    }
    

    View Slide

35. View Slide

36. @FONT-FACE 1998
    Illustration : « Plevangie » (Deviantart)
    

    View Slide

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
    

    View Slide

38. @font-face {
    font-family: kiwi;
    src: url("/fonts/kiwi.ttf");
    }
    on indique son chemin
    on nomme la fonte
    

    View Slide

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 )
    avec une alternative en cas

    de souci
    

    View Slide

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 :
    

    View Slide

41. @FONT-FACE
    compatibilité
    source : https://caniuse.com/#search=font-face
    

    View Slide

42. .WOFF 2009
    et formats compressés
    

    View Slide

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
    

    View Slide

44. ROCKETFUEL.OTF 104 ko
    ROCKETFUEL.TTF 81 ko
    ROCKETFUEL.WOFF 55 ko
    ROCKETFUEL.WOFF2 43 ko
    

    View Slide

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!
    

    View Slide

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
    

    View Slide

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
    

    View Slide

48. .WOFFERINE
    Tu vas charger plus

    vite, OUAIS ?!!
    

    View Slide

49. GOOGLE FONTS 2010
    source : https://fonts.google.com/
    

    View Slide

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
    

    View Slide

51. GOOGLE FONTS
    
    code HTML proposé

    par Google Font (API)
    div {
    font-family: Roboto, sans-serif;
    }
    CSS pour afficher la police
    version « import via HTML »
    

    View Slide

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 »
    

    View Slide

53. source : https://trends.builtwith.com/widgets/Google-Font-API
    

    View Slide

54. QUESTION
    « quel est le poids du fichier

    opensans-regular.ttf

    téléchargé de Google Fonts ? »
    

    View Slide

55. RÉPONSE
    217KO !
    

    View Slide

56. CSS3 2011
    tous ces beaux effets qu’on attendait…
    

    View Slide

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
    

    View Slide

58. TEXT-SHADOW
    source : https://codepen.io/raphaelgoetter/pen/yGmwEp
    

    View Slide

59. TEXT-STROKE
    source : https://codepen.io/raphaelgoetter/pen/oJJKXP
    

    View Slide

60. source : https://codepen.io/raphaelgoetter/pen/XdLjpB
    BACKGROUND-CLIP
    

    View Slide

61. DU… WORDART !
    mais aussi
    source : en vrai c’est une blague
    

    View Slide

62. EN FAIT ÇA EXISTE !
    OMG!
    source : https://codepen.io/raphaelgoetter/pen/MLogMx
    

    View Slide

63. ICON FONTS 2012
    source : https://icomoon.io/app/
    

    View Slide

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 ?
    

    View Slide

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
    Twitter
    on applique la fonte d’icônes
    

    View Slide

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
    

    View Slide

67. DÉMO
    source : https://codepen.io/raphaelgoetter/pen/JxJXaj
    

    View Slide

68. LIGATURES 2013
    

    View Slide

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 ?
    

    View Slide

70. LIGATURES
    concrètement ?
    coeur
    cœur
    

    View Slide

71. LIGATURES
    concrètement ?
    :)
    
    

    View Slide

72. LIGATURES
    concrètement ?
    poo
    
    

    View Slide

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;
    

    View Slide

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 »
    

    View Slide

75. DÉMO
    https://codepen.io/raphaelgoetter/pen/BvbwaK?editors=1100
    

    View Slide

76. RG
    h1 {
    font-family: calendas;

    font-feature-settings: "swsh";
    }
    source : http://www.goetter.fr/
    

    View Slide

77. source : http://www.sansbullshitsans.com/
    

    View Slide

78. source : http://kudakurage.com/ligature_symbols/
    

    View Slide

79. LIGATURES
    menu
    et icon font
    source : https://icomoon.io/app/
    

    View Slide

80. LIGATURES
    compatibilité
    source : https://caniuse.com/#feat=font-feature
    

    View Slide

81. INTERLUDE
    

    View Slide

82. QUIZ
    « chargé »
    ou
    « pas chargé »
    ?
    

    View Slide

83. CAS 1
    « chargé » ou « pas chargé » ?
    @font-face {
    font-family: kiwi;

    src: url(kiwi.woff2);
    }
    hopla !
    p {
    font-family: kiwi;
    }
    

    View Slide

84. CAS 1
    CHARGÉ
    @font-face {
    font-family: kiwi;

    src: url(kiwi.woff2);
    }
    hopla !
    p {
    font-family: kiwi;
    }
    

    View Slide

85. CAS 2
    « chargé » ou « pas chargé » ?
    @font-face {
    font-family: kiwi;

    src: url(kiwi.woff2);
    }
    p {
    font-family: kiwi;
    }
    

    View Slide

86. CAS 2
    … sauf sur IE <9
    @font-face {
    font-family: kiwi;

    src: url(kiwi.woff2);
    }
    p {
    font-family: kiwi;
    }
    PAS CHARGÉ
    

    View Slide

87. CAS 3
    « chargé » ou « pas chargé » ?
    @font-face {
    font-family: kiwi;

    src: url(kiwi.woff2);
    }
    
    p {
    font-family: kiwi;
    }
    

    View Slide

88. CAS 3
    @font-face {
    font-family: kiwi;

    src: url(kiwi.woff2);
    }
    … sauf sur IE
    
    p {
    font-family: kiwi;
    }
    PAS CHARGÉ
    

    View Slide

89. CAS 4
    « chargé » ou « pas chargé » ?
    @font-face {
    font-family: kiwi;

    src: url(kiwi.woff2);
    }
    hopla !
    p {
    font-family: arial, kiwi;
    }
    Note : Arial est installé chez l’utilisateur
    

    View Slide

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)
    hopla !
    p {
    font-family: arial, kiwi;
    }
    ÇA DÉPEND
    @font-face {
    font-family: kiwi;

    src: url(kiwi.woff2);
    }
    

    View Slide

91. CAS 5
    hopla !
    « chargé » ou « pas chargé » ?
    p {
    font-family: kiwi;
    }
    @media (min-width: 999999px) {
    @font-face {
    font-family: kiwi;

    src: url(kiwi.woff2);
    }
    }
    

    View Slide

92. CAS 5
    hopla !
    @media (min-width: 999999px) {
    @font-face {
    font-family: kiwi;

    src: url(kiwi.woff2);
    }
    }
    p {
    font-family: kiwi;
    }
    … sauf sur IE <11
    PAS CHARGÉ
    

    View Slide

93. CASSIS
    « chargé » ou « pas chargé » ?
    hopla !
    @font-face {
    font-family: kiwi;

    src: url(kiwi.woff2);
    }
    @media (min-width: 99999px) {
    p {
    font-family: kiwi;
    }
    }
    

    View Slide

94. CASSIS
    hopla !
    @media (min-width: 99999px) {
    p {
    font-family: kiwi;
    }
    }
    PAS CHARGÉ
    @font-face {
    font-family: kiwi;

    src: url(kiwi.woff2);
    }
    

    View Slide

95. FONT-DISPLAY 2015
    

    View Slide

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
    

    View Slide

97. HTML
    CSS
    fonte 1
    fonte 2
    400ms
    300ms
    200ms
    100ms
    0ms 500ms 600ms 700ms 800ms
    page blanche
    ?
    

    View Slide

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
    

    View Slide

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 !
    

    View Slide

100. FOUT
     FOIT
     

     View Slide

101. FOIT FOUT
     

     View Slide

102. h1 {
     font-family: 'open sans', sans-serif;
     }
     MOI :
     …
     LE NAVIGATEUR :
     

     View Slide

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
     

     View Slide

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 :
     

     View Slide

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é »
     

     View Slide

106. @font-face {
     font-family: kiwi;
     src: url("/fonts/kiwi.woff2");
     font-display: auto;
     }
     FONT-DISPLAY
     concrètement
     

     View Slide

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
     

     View Slide

108. ICON FONTS !
     !
     

     View Slide

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
     

     View Slide

110. FONT-DISPLAY
     source : https://caniuse.com/#feat=css-font-rendering-controls
     compatibilité
     

     View Slide

111. 2016
     VARIABLE FONTS
     

     View Slide

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 !
     

     View Slide

113. LEAGUE SPARTAN
     source : https://v-fonts.com/fonts/league-spartan-variable
     démo
     (22ko)
     

     View Slide

114. VARIABLE POO
     source : https://pixelambacht.nl/demo/mrpoo/
     démo
     

     View Slide

115. source : https://www.axis-praxis.org
     FIT REGULAR & ZYCON
     démo
     

     View Slide

116. GRASS TEXT
     source : https://codepen.io/mandymichael/pen/YYaWop
     démo (oui encore)
     

     View Slide

117. VARIABLE FONTS
     h1 {

     font-family: "Variable Poo Demo";

     font-variation-settings: "crap" 300;
     }
     concrètement
     

     View Slide

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
     

     View Slide

119. EN VRAI ?
     source : https://2018.ampersandconf.com/
     

     View Slide

120. VARIABLE FONTS
     source : https://caniuse.com/#feat=variable-fonts
     compatibilité
     

     View Slide

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 ?
     

     View Slide

122. RESSOURCES
     

     View Slide

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/
     

     View Slide

124. COLLECTION « TYPO »
     source : http://kiwi.gg/typo
     

     View Slide

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 !
     

     View Slide

126. sur formations.alsacreations.fr
     NOS FORMATIONS
     

     View Slide

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)
     

     View Slide