Petit guide de performance typographie – WordCamp 2016 Paris

Conférence sur les bases de la performance typographique présentée lors du WordCamp 2016 à Paris

Transcript

1. PETIT GUIDE DE PERFORMANCE
 WEB TYPOGRAPHIQUE Damien Senger · @iamhiwelo · WordCamp 2016 · Paris Crédit photo : Renaud Chodkowski
2. ç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
3. 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
4. La typographie :
 ce n’est pas qu’une histoire de designer Crédit photo : Carlos Martin Falo
5. Au commencement était le plomb… Crédit photo : Marcus Lyra
6. Le poids d’une variante de Source Sans Pro
 (Source Sans Pro Regular • format TTF) 150 Ko Crédit photo : timlewisnm
7. 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
8. 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
9. En desktop, ça passe…
 En mobile, ça casse !
10. Le chargement du texte :
 deux conceptions radicalement différentes Crédit photo : Tambako The Jaguar
11. FOIT :
 Flash of Invisible Text Crédit photo : Dr Azzacow 15 secondes
12. FOUT :
 Flash of Unstyled Text 5 secondes
13. Privilégier un accès rapide à l’information, même si l’affichage est imparfait
14. Gros problème : chaque navigateur a le choix de 
 son comportement Crédit photo : Steven Johnson
15. 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 ?
16. Un espoir vain…
 C’est une proposition non officielle Google Crédit photo : Artus
17. Que pouvons-nous alors faire ? Crédit photo : Jacob Bøtter
18. RÉFLÉCHIR OPTIMISER & Crédit photo : Jacob Bøtter
19. Choisir un font-stack adapté à son projet
 et ne pas avoir peur de l’exploiter Crédit photo : Marcus Lyra
20. Crédit photo : Marcus Lyra
21. Sur mobile : diminuez intelligemment le nombre de polices Crédit photo : Epsos
22. PRIORISER ! Crédit photo : Patrick Denker
23. Crédit photo : Stéphanie Walter DEVENIR
 ACTIFS <!>
25. Connaître les capacités 
 des plateformes de ses clients
26. Je jette un œil sur le tableau de diffusion 
 des polices sur les OS mobiles :
 jordanm.co.uk/tinytype
27. Pour éviter d’être un facteur bloquant : forcer les fallbacks typographiques Crédit photo : Frédéric Bisson
28. Prendre l’exemple du Guardian : le chargement différé des fichiers de police Crédit photo : Phil Gyford
29. 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
30. 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
31. Des bibliothèques JS simples :
 Web Font Loader (Google – Typekit)
 Font Face Observer (Bram Stein) Crédit photo : Paul
32. L’idée générale de ces scripts :
 h1 { font-family: Helvetica, …; }
 .fonts-loaded h1 { font-family: Lato, …; } Crédit photo : Melinda Seckington
33. Crédit photo : Stéphanie Walter PENSER AUX ICÔNES oh ! un accent circonflexe !
34. L’optimisation, c’est aussi pour les icon-fonts
 grâce aux fallbacks et ligatures Crédit photo : Mike Ashton
35. https://hwlo.link/icon-font-svg/
36. Pro tip : les ligatures sont sensibles à la casse Crédit photo : Doran
37. Crédit photo : Stéphanie Walter (DÉ)
 COMPRESSER
38. Transformer le plomb en plume : allégeons nos fichiers de police
39. Fournir et utiliser des fichiers compressés :
 WOFF (ou WOFF2) 9+
40. Jouer avec le FOFT :
 Flash of Faux-Text Crédit photo : Garry Knight
41. Méthode en 3 temps :
 1. fallback websafe
 2. custom regular + faux bold
 3. custom regular + custom bold Crédit photo : Garry Knight
42. Crédit photo : Stéphanie Walter OSER L’INDÉPENDANCE • •
43. 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
44. t MERCI DE VOTRE ATTENTION :) Damien Senger
 @iamhiwelo at’tion, j’aime beaucoup les trolls (et les nouveaux projets) donc n’hésitez pas !