$30 off During Our Annual Pro Sale. View Details »

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

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 !

Raphael Goetter

February 07, 2019
Tweet

More Decks by Raphael Goetter

Other Decks in Design

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