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

ç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

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

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

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

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

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

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

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

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

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

FOUT : 
 Flash of Unstyled Text 5 secondes

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

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

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 ?

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

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

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

&

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

Crédit photo : Marcus Lyra

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

PRIORISER Crédit photo : Patrick Denker

!

Crédit photo : Stéphanie Walter DEVENIR 
 ACTIFS

<!>

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

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

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

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

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

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

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

L’ i d é e g é n é r a l e d e c e s s c r i p t s : 
 h1 { font-family: Helvetica, …; } 
 .fonts-loaded h1 { font-family: Lato, …; } Crédit photo : Melinda Seckington

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

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

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

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

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

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

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

9+

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

Méthode en 3 temps : 


  1. fallback websafe 

  2. custom regular
  • faux bold 

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

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

• • •

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

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