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

Petit guide de performance typographie – WordCamp 2016 Paris

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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  4. La typographie :

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

    View full-size slide

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

    View full-size slide

  6. Le poids d’une variante de Source Sans Pro

    (Source Sans Pro Regular • format TTF)
    150 Ko
    Crédit photo : timlewisnm

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  9. En desktop, ça passe…

    En mobile, ça casse !

    View full-size slide

  10. Le chargement du texte :

    deux conceptions radicalement différentes
    Crédit photo : Tambako The Jaguar

    View full-size slide

  11. FOIT :

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

    View full-size slide

  12. FOUT :

    Flash of Unstyled Text
    5 secondes

    View full-size slide

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

    View full-size slide

  14. Gros problème :
    chaque navigateur a le choix de 

    son comportement
    Crédit photo : Steven Johnson

    View full-size slide

  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 ?

    View full-size slide

  16. Un espoir vain…

    C’est une proposition non officielle Google
    Crédit photo : Artus

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Choisir un font-stack adapté à son projet

    et ne pas avoir peur de l’exploiter
    Crédit photo : Marcus Lyra

    View full-size slide

  20. Crédit photo : Marcus Lyra

    View full-size slide

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

    View full-size slide

  22. PRIORISER
    !
    Crédit photo : Patrick Denker

    View full-size slide

  23. Crédit photo : Stéphanie Walter
    DEVENIR

    ACTIFS

    View full-size slide

  24. Connaître les capacités 

    des plateformes de ses clients

    View full-size slide

  25. Je jette un œil sur le tableau de diffusion 

    des polices sur les OS mobiles :

    jordanm.co.uk/tinytype

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. Des bibliothèques JS simples :

    Web Font Loader (Google – Typekit)

    Font Face Observer (Bram Stein)
    Crédit photo : Paul

    View full-size slide

  31. L’idée générale de ces scripts :

    h1 { font-family: Helvetica, …; }

    .fonts-loaded h1 { font-family: Lato, …; }
    Crédit photo : Melinda Seckington

    View full-size slide

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

    View full-size slide

  33. L’optimisation, c’est aussi pour les icon-fonts

    grâce aux fallbacks et ligatures
    Crédit photo : Mike Ashton

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    COMPRESSER

    View full-size slide

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

    View full-size slide

  38. Fournir et utiliser des fichiers compressés :

    WOFF (ou WOFF2)
    9+

    View full-size slide

  39. Jouer avec le FOFT :

    Flash of Faux-Text
    Crédit photo : Garry Knight

    View full-size slide

  40. Méthode en 3 temps :

    1. fallback websafe

    2. custom regular + faux bold

    3. custom regular + custom bold
    Crédit photo : Garry Knight

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. t
    MERCI DE VOTRE ATTENTION :)
    Damien Senger

    @iamhiwelo
    at’tion, j’aime beaucoup les trolls (et les nouveaux projets) donc n’hésitez pas !

    View full-size slide