Tweet
Tweet

Slide 1

Slide 1 text

PETIT GUIDE DE PERFORMANCE
 WEB TYPOGRAPHIQUE Damien Senger · @iamhiwelo · WordCamp 2016 · Paris Crédit photo : Renaud Chodkowski

Slide 2

Slide 2 text

ça c’est moi :) Damien Senger je suis designer & développeur web je suis passionné par la typographie & j’ai monté mon petit studio : hiwelo. en une phrase : je n’aime pas les gens, mais j’aime leurs caractères ! et sinon j’aime débattre sur twitter : @iamhiwelo

Slide 3

Slide 3 text

Je suis passionné · taré · obsédé · obnubilé 
 par la typographie
 et WordPress, et le Web, et Amsterdam, etc.
 (rayez la ou les mentions inutiles) Crédit photo : Sergio San Martín

Slide 4

Slide 4 text

La typographie :
 ce n’est pas qu’une histoire de designer Crédit photo : Carlos Martin Falo

Slide 5

Slide 5 text

Au commencement était le plomb… Crédit photo : Marcus Lyra

Slide 6

Slide 6 text

Le poids d’une variante de Source Sans Pro
 (Source Sans Pro Regular • format TTF) 150 Ko Crédit photo : timlewisnm

Slide 7

Slide 7 text

Le poids d’une famille « courante » de Source Sans Pro
 (Source Sans Pro Regular, Italic, Bold & Bold Italic • format TTF) Crédit photo : timlewisnm 532 Ko

Slide 8

Slide 8 text

Le poids d’une famille complète de Source Sans Pro
 (Source Sans pro complète issue de Google Fonts • format TTF) Crédit photo : timlewisnm 1 597 Ko

Slide 9

Slide 9 text

En desktop, ça passe…
 En mobile, ça casse !

Slide 10

Slide 10 text

Le chargement du texte :
 deux conceptions radicalement différentes Crédit photo : Tambako The Jaguar

Slide 11

Slide 11 text

FOIT :
 Flash of Invisible Text Crédit photo : Dr Azzacow 15 secondes

Slide 12

Slide 12 text

FOUT :
 Flash of Unstyled Text 5 secondes

Slide 13

Slide 13 text

Privilégier un accès rapide à l’information, même si l’affichage est imparfait

Slide 14

Slide 14 text

Gros problème : chaque navigateur a le choix de 
 son comportement Crédit photo : Steven Johnson

Slide 15

Slide 15 text

Choisir une stratégie de chargement en CSS :
 l’espoir « font-display » ? Crédit photo : Matthijs vous le sentez, là, l’espoir dans ses yeux ?

Slide 16

Slide 16 text

Un espoir vain…
 C’est une proposition non officielle Google Crédit photo : Artus

Slide 17

Slide 17 text

Que pouvons-nous alors faire ? Crédit photo : Jacob Bøtter

Slide 18

Slide 18 text

RÉFLÉCHIR OPTIMISER & Crédit photo : Jacob Bøtter

Slide 19

Slide 19 text

Choisir un font-stack adapté à son projet
 et ne pas avoir peur de l’exploiter Crédit photo : Marcus Lyra

Slide 20

Slide 20 text

Crédit photo : Marcus Lyra

Slide 21

Slide 21 text

Sur mobile : diminuez intelligemment le nombre de polices Crédit photo : Epsos

Slide 22

Slide 22 text

PRIORISER ! Crédit photo : Patrick Denker

Slide 23

Slide 23 text

Crédit photo : Stéphanie Walter DEVENIR
 ACTIFS

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Connaître les capacités 
 des plateformes de ses clients

Slide 26

Slide 26 text

Je jette un œil sur le tableau de diffusion 
 des polices sur les OS mobiles :
 jordanm.co.uk/tinytype

Slide 27

Slide 27 text

Pour éviter d’être un facteur bloquant : forcer les fallbacks typographiques Crédit photo : Frédéric Bisson

Slide 28

Slide 28 text

Prendre l’exemple du Guardian : le chargement différé des fichiers de police Crédit photo : Phil Gyford

Slide 29

Slide 29 text

Navigateur 
 moderne ? Suppo du
 format WOFF ? La police est
 déjà stockée ? On affiche
 la police On affiche
 le fallback On affiche
 le fallback On affiche
 le fallback Pendant le chargement : Crédit photo : Marcys Lyra

Slide 30

Slide 30 text

Le stockage
 est-il possible ? On récupère
 les fichiers en
 base64 via
 JSON Le JSON
 n’est pas déjà
 stocké On stocke
 et on affiche 
 la police On ne modifie
 pas la page On ne modifie
 pas la page Une fois le chargement terminé : Crédit photo : Marcus Lyra

Slide 31

Slide 31 text

Des bibliothèques JS simples :
 Web Font Loader (Google – Typekit)
 Font Face Observer (Bram Stein) Crédit photo : Paul

Slide 32

Slide 32 text

L’idée générale de ces scripts :
 h1 { font-family: Helvetica, …; }
 .fonts-loaded h1 { font-family: Lato, …; } Crédit photo : Melinda Seckington

Slide 33

Slide 33 text

Crédit photo : Stéphanie Walter PENSER AUX ICÔNES oh ! un accent circonflexe !

Slide 34

Slide 34 text

L’optimisation, c’est aussi pour les icon-fonts
 grâce aux fallbacks et ligatures Crédit photo : Mike Ashton

Slide 35

Slide 35 text

https://hwlo.link/icon-font-svg/

Slide 36

Slide 36 text

Pro tip : les ligatures sont sensibles à la casse Crédit photo : Doran

Slide 37

Slide 37 text

Crédit photo : Stéphanie Walter (DÉ)
 COMPRESSER

Slide 38

Slide 38 text

Transformer le plomb en plume : allégeons nos fichiers de police

Slide 39

Slide 39 text

Fournir et utiliser des fichiers compressés :
 WOFF (ou WOFF2) 9+

Slide 40

Slide 40 text

Jouer avec le FOFT :
 Flash of Faux-Text Crédit photo : Garry Knight

Slide 41

Slide 41 text

Méthode en 3 temps :
 1. fallback websafe
 2. custom regular + faux bold
 3. custom regular + custom bold Crédit photo : Garry Knight

Slide 42

Slide 42 text

Crédit photo : Stéphanie Walter OSER L’INDÉPENDANCE • •

Slide 43

Slide 43 text

Google Fonts, Typekit, etc. … Mwé…
 
 Tout ça ne fonctionne qu’à une condition : avoir le plein contrôle sur vos fichiers Crédit photo : Robert Couse-Baker

Slide 44

Slide 44 text

t MERCI DE VOTRE ATTENTION :) Damien Senger
 @iamhiwelo at’tion, j’aime beaucoup les trolls (et les nouveaux projets) donc n’hésitez pas !