LE WEB ET SES SALES CARACTÈRES
Damien Senger · @iamhiwelo · Blend Web Mix 2015 · Lyon
Crédit photo : Marcus Lyra
Slide 2
Slide 2 text
ça c’est moi :)
Damien Senger
je suis designer & développeur web
je suis passionné par la typographie web
autodidacte, j’ai créé mon studio hiwelo. et je travaille chez Alsacréations
@iamhiwelo
Slide 3
Slide 3 text
Je suis passionné · taré · obsédé · obnubilé par la typographie
(rayez la ou les mentions inutiles)
Crédit photo : Kevin Hackert
Slide 4
Slide 4 text
La typographie :
une histoire de plombs
Crédit photo : Marcus Lyra
Slide 5
Slide 5 text
Et le plomb, ça pèse…
Crédit photo : Marcus Lyra
Slide 6
Slide 6 text
Le poids d’une variante de Source Sans Pro
(Source Sans Pro Regular • format TTF)
150 Ko
Crédit photo : timlewisnm
Slide 7
Slide 7 text
Crédit photo : timlewisnm
Le poids d’une famille « courante » de Source Sans Pro pour un blog
(Source Sans Pro Regular, Italic, Bold & Bold Italic • format TTF)
532 Ko
Slide 8
Slide 8 text
Crédit photo : timlewisnm
Le poids d’une famille complète de Source Sans Pro
(Source Sans pro complète issue de Google Fonts • format TTF)
1 597 Ko
Slide 9
Slide 9 text
En desktop, ça passe…
En mobile, ça casse !
Slide 10
Slide 10 text
Le temps nécessaire avant de pouvoir lire le titre principal sur CNN
(CNN • WebPageTest • Dulles, VA • Motorola G • Chrome • 3G)
15s
Slide 11
Slide 11 text
Un accès à l’information 3x plus rapide sur un site avec lazyloading des polices
(Site en développement • WebPageTest • Dulles, VA • Motorola G • Chrome • 3G)
5s
Slide 12
Slide 12 text
Le chargement du texte :
deux conceptions radicalement différentes
Crédit photo : Tony & Wayne
Slide 13
Slide 13 text
Crédit photo : Dr. Azzacov
FOIT :
Flash of Invisible Text
Le logo apparaît tardivement Plus de 15 secondes pour
avoir accès à l’information recherchée
Slide 14
Slide 14 text
FOUT :
Flash of Unstyled Text
Information rapidement accessible et lisible
même si non optimisée
Identité définie
rapidement
Slide 15
Slide 15 text
Privilégier un accès rapide à l’information,
même si l’affichage est imparfait
Slide 16
Slide 16 text
Ce n’est pas qu’une histoire de développeur :
le designer a aussi une responsabilité.
Slide 17
Slide 17 text
Designers, l’heure est venue d’en finir
avec le choix unique en typographie
Crédit photo : Marcus Lyra
Slide 18
Slide 18 text
Choisir un font-stack adapté à son projet
et ne pas avoir peur de l’exploiter
Crédit photo : Marcus Lyra
Slide 19
Slide 19 text
Crédit photo : Marcus Lyra
Slide 20
Slide 20 text
Soyez acteurs de vos fichiers de police
en utilisant des outils simples
Crédit photo : Stéphanie Walter
Slide 21
Slide 21 text
FontSquirrel Webfont Generator
Slide 22
Slide 22 text
Connaître les capacités
des plateformes de ses clients
Slide 23
Slide 23 text
Je jette un œil sur le tableau de diffusion
des polices sur les OS mobiles :
jordanm.co.uk/tinytype
Slide 24
Slide 24 text
Pour éviter d’être un facteur bloquant :
forçons les fallbacks typographiques
Slide 25
Slide 25 text
Prendre l’exemple du Guardian :
le chargement différé des fichiers de police
Crédit photo : Phil Gyford
Slide 26
Slide 26 text
Crédit photo : Marcus Lyra
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 :
Slide 27
Slide 27 text
Crédit photo : Marcus 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é :
Slide 28
Slide 28 text
Transformer le plomb en plume :
allégeons nos fichiers de police
Slide 29
Slide 29 text
Fournir et utiliser des fichiers compressés :
WOFF (ou WOFF2)
Crédit photo : marcovdz
9+
Slide 30
Slide 30 text
Pour le corps de labeur :
essayer le faux-gras et le faux italique
Crédit photo : Garry Knight
Slide 31
Slide 31 text
Mais tout ça ne fonctionne qu’à une condition :
avoir le plein contrôle sur vos fichiers
Crédit photo : Robert Couse-Baker
Slide 32
Slide 32 text
MERCI DE VOTRE ATTENTION :)
À VOUS LA PAROLE !
parce que oui, pour une fois, j’ai oublié Yoshi à Strasbourg…
Damien Senger
@iamhiwelo