Tweet
Tweet

Slide 1

Slide 1 text

de Comic Sans aux variables fonts L’ÉPOPÉE DES POLICES WEB Photo : Gerard Dou - Old Woman Reading (domaine public)

Slide 2

Slide 2 text

hello, je suis alsacien raphaël goetter

Slide 3

Slide 3 text

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…

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

444 KO

Slide 7

Slide 7 text

COMIC SANS MS 1995 Hi! I am
 Mr Vincent Connare

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

CSS1 1996 p { color: blue; }

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

@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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

@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

Slide 40

Slide 40 text

@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 :

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

.WOFF 2009 et formats compressés

Slide 43

Slide 43 text

.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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

@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

Slide 47

Slide 47 text

@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

Slide 48

Slide 48 text

.WOFFERINE Tu vas charger plus
 vite, OUAIS ?!!

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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 »

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

QUESTION « quel est le poids du fichier
 opensans-regular.ttf
 téléchargé de Google Fonts ? »

Slide 55

Slide 55 text

RÉPONSE 217KO !

Slide 56

Slide 56 text

CSS3 2011 tous ces beaux effets qu’on attendait…

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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 ?

Slide 65

Slide 65 text

@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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

LIGATURES 2013

Slide 69

Slide 69 text

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 ?

Slide 70

Slide 70 text

LIGATURES concrètement ?

coeur

cœur

Slide 71

Slide 71 text

LIGATURES concrètement ?

:)

Slide 72

Slide 72 text

LIGATURES concrètement ?

poo

Slide 73

Slide 73 text

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;

Slide 74

Slide 74 text

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 »

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

RG

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

INTERLUDE

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

CAS 1 « chargé » ou « pas chargé » ? @font-face { font-family: kiwi;
 src: url(kiwi.woff2); }

hopla !

p { font-family: kiwi; }

Slide 84

Slide 84 text

CAS 1 CHARGÉ @font-face { font-family: kiwi;
 src: url(kiwi.woff2); }

hopla !

p { font-family: kiwi; }

Slide 85

Slide 85 text

CAS 2 « chargé » ou « pas chargé » ? @font-face { font-family: kiwi;
 src: url(kiwi.woff2); } p { font-family: kiwi; }

Slide 86

Slide 86 text

CAS 2 … sauf sur IE <9 @font-face { font-family: kiwi;
 src: url(kiwi.woff2); } p { font-family: kiwi; } PAS CHARGÉ

Slide 87

Slide 87 text

CAS 3 « chargé » ou « pas chargé » ? @font-face { font-family: kiwi;
 src: url(kiwi.woff2); }

p { font-family: kiwi; }

Slide 88

Slide 88 text

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

p { font-family: kiwi; } PAS CHARGÉ

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

CAS 5

hopla !

« chargé » ou « pas chargé » ? p { font-family: kiwi; } @media (min-width: 999999px) { @font-face { font-family: kiwi;
 src: url(kiwi.woff2); } }

Slide 92

Slide 92 text

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É

Slide 93

Slide 93 text

CASSIS « chargé » ou « pas chargé » ?

hopla !

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

Slide 94

Slide 94 text

CASSIS

hopla !

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

Slide 95

Slide 95 text

FONT-DISPLAY 2015

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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 !

Slide 100

Slide 100 text

FOUT FOIT

Slide 101

Slide 101 text

FOIT FOUT

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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 :

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

ICON FONTS ! !

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

2016 VARIABLE FONTS

Slide 112

Slide 112 text

• 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 !

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

VARIABLE FONTS h1 {
 font-family: "Variable Poo Demo";
 font-variation-settings: "crap" 300; } concrètement

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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 ?

Slide 122

Slide 122 text

RESSOURCES

Slide 123

Slide 123 text

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/

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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 !

Slide 126

Slide 126 text

sur formations.alsacreations.fr NOS FORMATIONS

Slide 127

Slide 127 text

« 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)