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. 1.

    de Comic Sans aux variables fonts L’ÉPOPÉE DES POLICES WEB

    Photo : Gerard Dou - Old Woman Reading (domaine public)
  2. 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…
  3. 6.
  4. 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
  5. 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
  6. 15.

    PROPRIÉTÉ 1 « font- », « text- » ou «

    autre » ? p { taille de texte: 2em; }
  7. 17.

    PROPRIÉTÉ 2 « font- », « text- » ou «

    autre » ? p { graisse de texte: grasse; }
  8. 19.

    PROPRIÉTÉ 3 « font- », « text- » ou «

    autre » ? p { couleur de texte: rose; }
  9. 21.

    PROPRIÉTÉ 4 « font- », « text- » ou «

    autre » ? p { style de texte: italique; }
  10. 23.

    PROPRIÉTÉ 5 « font- », « text- » ou «

    autre » ? p { soulignement de texte: au-dessous; }
  11. 25.

    PROPRIÉTÉ 6 « font- », « text- » ou «

    autre » ? p { alignement horizontal de texte: centré; }
  12. 27.

    PROPRIÉTÉ 7 « font- », « text- » ou «

    autre » ? p { alignement vertical de texte: centré; }
  13. 29.

    PROPRIÉTÉ 8 « font- », « text- » ou «

    autre » ? p { hauteur de ligne de texte: 1.5; }
  14. 31.

    PROPRIÉTÉ 9 « font- », « text- » ou «

    autre » ? p { casse du texte: majuscules; }
  15. 33.

    PROPRIÉTÉ 10 « font- », « text- » ou «

    autre » ? p { casse du texte: petites majuscules; }
  16. 35.
  17. 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
  18. 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
  19. 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 :
  20. 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
  21. 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!
  22. 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
  23. 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
  24. 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 »
  25. 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 »
  26. 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
  27. 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 ?
  28. 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
  29. 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
  30. 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 ?
  31. 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;
  32. 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 »
  33. 81.
  34. 83.

    CAS 1 « chargé » ou « pas chargé »

    ? @font-face { font-family: kiwi;
 src: url(kiwi.woff2); } <p>hopla !</p> p { font-family: kiwi; }
  35. 85.

    CAS 2 « chargé » ou « pas chargé »

    ? @font-face { font-family: kiwi;
 src: url(kiwi.woff2); } p { font-family: kiwi; }
  36. 86.

    CAS 2 … sauf sur IE <9 @font-face { font-family:

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

    CAS 3 « chargé » ou « pas chargé »

    ? @font-face { font-family: kiwi;
 src: url(kiwi.woff2); } <p></p> p { font-family: kiwi; }
  38. 88.

    CAS 3 @font-face { font-family: kiwi;
 src: url(kiwi.woff2); } …

    sauf sur IE <p></p> p { font-family: kiwi; } PAS CHARGÉ
  39. 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
  40. 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); }
  41. 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); } }
  42. 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É
  43. 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; } }
  44. 94.

    CASSIS <p>hopla !</p> @media (min-width: 99999px) { p { font-family:

    kiwi; } } PAS CHARGÉ @font-face { font-family: kiwi;
 src: url(kiwi.woff2); }
  45. 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
  46. 97.

    HTML CSS fonte 1 fonte 2 400ms 300ms 200ms 100ms

    0ms 500ms 600ms 700ms 800ms page blanche ?
  47. 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
  48. 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 !
  49. 100.
  50. 101.
  51. 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
  52. 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 :
  53. 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é »
  54. 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
  55. 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
  56. 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 !
  57. 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
  58. 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 ?
  59. 122.
  60. 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/
  61. 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 !
  62. 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)