A presentation at VOXXED Days Luxembourg in in Luxembourg City, Luxembourg by Damien Senger
LE PETIT GUIDE DE PERFORMANCE TYPOGRAPHIQUE: ÉDITION 2018 Voxxed • Luxembourg • June 22, 2018
Damien Senger User-centered designer Twitter: @iamhiwelo Raccoon Studio raccoon.studio
LE PETIT GUIDE DE PERFORMANCE TYPOGRAPHIQUE: ÉDITION 2018
CSS est un langage formidable .
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Au commencement était le plomb …
150 Ko
Le poids d’une variante de Source Sans Pro
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
~ 550 Ko Le poids d’une famille “courante” de Source Sans Pro
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
~ 1 600 Ko Le poids d’une famille complète de Source Sans Pro
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
En desktop, ça passe… En mobile, ça casse !
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Gestion de du chargement des polices .
Ces fichiers peuvent être lourd mais surtout ils bloquent l’affichage .
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Pour cette raison : privilégiez le .svg aux polices d’icônes.
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Pensez aussi à utiliser un fallback et un chargement asynchrone de vos polices
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Affichage instantané grâce à SVG
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Affichage instantané grâce à un fallback “web safe”
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Affichage différé une fois la police custom chargée, contenu invisible en attendant
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Changement de la police de caractère affichée une fois chargée.
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
C’est un Flash of Faux-Text . On peut aussi l’utiliser pour le gras et l’italique.
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Une fois le contenu accessible, l’image de fond se charge.
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Et grâce à une gestion efficiente du cache , tout est affiché instantanément
aux chargements suivants.
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
En résumé, une méthode en 3 ½ temps
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Afficher le contenu rapidement avec un fallback web-safe 1.
Charger en asynchrone la police personnalisée et la stocker en cache (local-storage p.e.) 2.
Remplacer la police web-safe
par la police personnalisée 3.
Charger la police personnalisée sur les pages suivantes dès le début grâce au cache 3 ½ .
Gestion de l’alignement des caractères .
Gestion du multi-directionnel avec text-align .
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
[dir="rtl"] p {
align : right;
"# used as a fallback "$
} p {
align : start; } <
Utiliser start et end permet de se baser automatiquement sur la direction de l’élément .
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
yes yes no yes yes
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Gestion de la justification avec text-align .
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
La justification n’est conseillé que pour des colonnes de moins de 5 mots par ligne .
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Au-delà, la justification pose des problèmes de lisibilité .
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
CSS offre un contrôle fin des options de justification .
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
p {
justify : none;
justify : auto;
"# default value "$
word;
character; } <
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
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
yes 55+ 11+ yes no
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Gestion de la dernière ligne
avec text-align-last .
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Cette option peut être utile pour certains textes justifiés .
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
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
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
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
p {
align : justify;
word;
last : center; } <
L’attribut text-align-last peut accepter n’importe quelle valeur de text-align
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
yes 47+ edge+ yes no
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Gestion de l’alignement vertical
avec writing-mode .
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
L’attribut writing-mode permet de gérer l’affichage de caractères sur différents axes .
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Cela permet, par exemple, de mélanger les directions dans un même layout.
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
p {
tb;
rl;
lr; } <
Mais à quoi ça sert, au final ?
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
.event "% type {
lr;
transform : rotate(180deg); } <
yes 41+ 12 prefix 15+ prefix 5.1+ prefix
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Gestion dynamique
des caractères .
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
p {
variant : normal;
"#
!
3.14
"$
ligature;
"#
f
i "$
nums;
"# 3.140 "$
zero;
"# 3.14 0 ̷
"$
} <
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
yes yes yes yes yes
Voxxed Luxembourg • June 22, 2018 • @iamhiwelo
Merci beaucoup !
!
Bedankt!
"
@iamhiwelo
La typographie, ce n'est pas que du design. Bien que souvent délaissée dans nos projets au profit d'une typographie Google Fonts, la typographie est un élément important pour nos interfaces. Souvent choisie uniquement pour des raisons esthétiques, la typographie impacte en profondeur nos projets. Accessibilité, lisibilité, inclusivité et performance, découvrez le petit guide web typographique à l'usage des développeurs, édition 2018.
for free. You
can too.