Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Petit guide de performance typographie – WordCa...

Damien Senger
February 06, 2016

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

Damien Senger

February 06, 2016
Tweet

More Decks by Damien Senger

Other Decks in Programming

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. Le poids d’une variante de Source Sans Pro
 (Source Sans

    Pro Regular • format TTF) 150 Ko Crédit photo : timlewisnm
  5. 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
  6. 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
  7. Gros problème : chaque navigateur a le choix de 


    son comportement Crédit photo : Steven Johnson
  8. 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 ?
  9. Choisir un font-stack adapté à son projet
 et ne pas

    avoir peur de l’exploiter Crédit photo : Marcus Lyra
  10. Je jette un œil sur le tableau de diffusion 


    des polices sur les OS mobiles :
 jordanm.co.uk/tinytype
  11. Pour éviter d’être un facteur bloquant : forcer les fallbacks

    typographiques Crédit photo : Frédéric Bisson
  12. 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
  13. 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
  14. Des bibliothèques JS simples :
 Web Font Loader (Google –

    Typekit)
 Font Face Observer (Bram Stein) Crédit photo : Paul
  15. L’idée générale de ces scripts :
 h1 { font-family: Helvetica,

    …; }
 .fonts-loaded h1 { font-family: Lato, …; } Crédit photo : Melinda Seckington
  16. Méthode en 3 temps :
 1. fallback websafe
 2. custom

    regular + faux bold
 3. custom regular + custom bold Crédit photo : Garry Knight
  17. 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
  18. t MERCI DE VOTRE ATTENTION :) Damien Senger
 @iamhiwelo at’tion,

    j’aime beaucoup les trolls (et les nouveaux projets) donc n’hésitez pas !