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 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 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 Slide

  4. La typographie :

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

    View Slide

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

    View Slide

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

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

    View 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 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 Slide

  9. En desktop, ça passe…

    En mobile, ça casse !

    View Slide

  10. Le chargement du texte :

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

    View Slide

  11. FOIT :

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

    View Slide

  12. FOUT :

    Flash of Unstyled Text
    5 secondes

    View Slide

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

    View Slide

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

    son comportement
    Crédit photo : Steven Johnson

    View 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 Slide

  16. Un espoir vain…

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

  20. Crédit photo : Marcus Lyra

    View Slide

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

    View Slide

  22. PRIORISER
    !
    Crédit photo : Patrick Denker

    View Slide

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

    ACTIFS

    View Slide

  24. View Slide

  25. Connaître les capacités 

    des plateformes de ses clients

    View Slide

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

    des polices sur les OS mobiles :

    jordanm.co.uk/tinytype

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  31. Des bibliothèques JS simples :

    Web Font Loader (Google – Typekit)

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

    View Slide

  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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide

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

    COMPRESSER

    View Slide

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

    View Slide

  39. Fournir et utiliser des fichiers compressés :

    WOFF (ou WOFF2)
    9+

    View Slide

  40. Jouer avec le FOFT :

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

    View Slide

  41. Méthode en 3 temps :

    1. fallback websafe

    2. custom regular + faux bold

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

    View Slide

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

    View Slide

  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

    View Slide

  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 !

    View Slide