Le petit guide web typographique : édition 2018

A presentation at VOXXED Days Luxembourg in June 2018 in Luxembourg City, Luxembourg by Damien Senger

Slide 1

Slide 1

LE PETIT GUIDE DE PERFORMANCE TYPOGRAPHIQUE: ÉDITION 2018 Voxxed • Luxembourg • June 22, 2018

Slide 2

Slide 2

Damien Senger User-centered designer Twitter: @iamhiwelo Raccoon Studio raccoon.studio

Slide 3

Slide 3

LE PETIT GUIDE DE PERFORMANCE TYPOGRAPHIQUE: ÉDITION 2018

Slide 4

Slide 4

CSS est un langage formidable .

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 5

Slide 5

Slide 6

Slide 6

Au commencement 
 était le plomb …

Slide 7

Slide 7

150 Ko

Le poids d’une variante de Source Sans Pro

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 8

Slide 8

~ 550 Ko Le poids d’une famille “courante” 
 de Source Sans Pro

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 9

Slide 9

~ 1   600 Ko Le poids d’une famille complète de Source Sans Pro

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 10

Slide 10

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

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 11

Slide 11

Gestion de 
 du chargement des polices .

Slide 12

Slide 12

Ces fichiers peuvent être lourd 
 mais surtout ils bloquent l’affichage .

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 13

Slide 13

Pour cette raison : 
 privilégiez le .svg aux polices d’icônes.

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 14

Slide 14

Pensez aussi à utiliser un fallback 
 et un chargement asynchrone de vos polices

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 15

Slide 15

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 16

Slide 16

Affichage instantané grâce à SVG

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 17

Slide 17

Affichage instantané grâce à un fallback “web safe”

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 18

Slide 18

Affichage différé une fois la police custom chargée, 
 contenu invisible en attendant

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 19

Slide 19

Changement de la police de caractère affichée 
 une fois chargée.

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 20

Slide 20

C’est un Flash of Faux-Text . 
 On peut aussi l’utiliser pour le gras et l’italique.

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 21

Slide 21

Une fois le contenu accessible, l’image de fond se charge.

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 22

Slide 22

Et grâce à une gestion efficiente du cache , 
 tout est affiché instantanément


 aux chargements suivants.

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 23

Slide 23

En résumé, une méthode en 3 ½ temps

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 24

Slide 24

Afficher le contenu rapidement 
 avec un fallback web-safe 1.

Slide 25

Slide 25

Charger en asynchrone la police personnalisée 
 et la stocker en cache (local-storage p.e.) 2.

Slide 26

Slide 26

Remplacer la police web-safe

par la police personnalisée 3.

Slide 27

Slide 27

Charger la police personnalisée sur les pages suivantes dès le début grâce au cache 3 ½ .

Slide 28

Slide 28

Gestion de 
 l’alignement des caractères .

Slide 29

Slide 29

Gestion du multi-directionnel avec text-align .

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 30

Slide 30

[dir="rtl"] p {

text

align : right;

"# used as a fallback "$

} p {

text

align : start; } < 

Slide 31

Slide 31

Utiliser start et end permet de se baser automatiquement sur la direction de l’élément .

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 32

Slide 32

yes yes no yes yes

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 33

Slide 33

Gestion de la justification avec text-align .

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 34

Slide 34

La justification n’est conseillé que 
 pour des colonnes de moins de 5 mots par ligne .

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 35

Slide 35

Au-delà, la justification 
 pose des problèmes de lisibilité .

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 36

Slide 36

CSS offre un contrôle fin 
 des options de justification .

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 37

Slide 37

p {

text

justify : none;

text

justify : auto;

"# default value "$

text

justify : inter

word;

text

justify : inter

character; } < 

Slide 38

Slide 38

La valeur inter-word permet d’appliquer 
 la justification par des espaces entre les mots . 
 
 (parfait pour les langues basées sur des alphabets 
 comme les langues européennes et le coréen)

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 39

Slide 39

La valeur inter-character permet d’appliquer 
 la justification par des espaces au sein des mots . 
 
 (parfait pour les langues logographiques comme le japonais)

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 40

Slide 40

yes 55+ 11+ yes no

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 41

Slide 41

Gestion de la dernière ligne


 avec text-align-last .

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 42

Slide 42

Cette option peut être utile 
 pour certains textes justifiés .

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 43

Slide 43

Ut enim ad minim v e n i a m , q u i s n o s t r u d e t a t e x e r c i t a t i o n u l l a m c o l a b o r i s nisi ut aliquip ex ea commodo ea commodo

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 44

Slide 44

Ut enim ad minim v e n i a m , q u i s n o s t r u d e t a t e x e r c i t a t i o n u l l a m c o l a b o r i s nisi ut aliquip ex

ea commodo ea commodo

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 45

Slide 45

Ut enim ad minim v e n i a m , q u i s n o s t r u d e t a t e x e r c i t a t i o n u l l a m c o l a b o r i s nisi ut aliquip ex

ea commodo ea commodo

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 46

Slide 46

p {

text

align : justify;

text

justify : inter

word;

text

align

last : center; } < 

Slide 47

Slide 47

L’attribut text-align-last peut accepter n’importe quelle valeur de text-align

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 48

Slide 48

yes 47+ edge+ yes no

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 49

Slide 49

Gestion de l’alignement vertical


 avec writing-mode .

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 50

Slide 50

L’attribut writing-mode permet de gérer 
 l’affichage de caractères sur différents axes .

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 51

Slide 51

Cela permet, par exemple, de mélanger 
 les directions dans un même layout.

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 52

Slide 52

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 53

Slide 53

p {

writing

mode : horizontal

tb;

writing

mode : vertical

rl;

writing

mode : vertical

lr; } < 

Slide 54

Slide 54

Mais à quoi ça sert, au final ?

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 55

Slide 55

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 56

Slide 56

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 57

Slide 57

.event "% type {

writing

mode : vertical

lr;

transform : rotate(180deg); } < 

Slide 58

Slide 58

yes 41+ 12 
 prefix 15+ 
 prefix 5.1+ 
 prefix

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 59

Slide 59

Gestion dynamique


 des caractères .

Slide 60

Slide 60

Gestion des fonctions spécifiques


 des polices de caractères avec font-variant . 
 (qui remplace en partie font-feature-settings)

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 61

Slide 61

p {

font

variant : normal;

"#

!

3.14

"$ 


font

variant : no

common

ligature;

"#

f

i "$ 


font

variant : tabular

nums;

"# 3.140 "$ 


font

variant : slashed

zero;

"# 3.14 0 ̷

"$

} < 

Slide 62

Slide 62

Utiliser font-variant permet de pouvoir 
 facilement améliorer la lisibilité des caractères 
 dans certains contextes (tableaux de données)

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 63

Slide 63

yes yes yes yes yes

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

Slide 64

Slide 64

Merci beaucoup !
! 
 Bedankt!
"

@iamhiwelo