Le petit guide web typographique : édition 2018

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

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 {

text

align : right;

"# used as a fallback "$

} p {

text

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 {

text

justify : none;

text

justify : auto;

"# default value "$

text

justify : inter

word;

text

justify : inter

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 {

text

align : justify;

text

justify : inter

word;

text

align

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

p {

writing

mode : horizontal

tb;

writing

mode : vertical

rl;

writing

mode : vertical

lr; } <

Mais à quoi ça sert, au final ?

Voxxed Luxembourg • June 22, 2018 • @iamhiwelo

.event "% type {

writing

mode : vertical

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 {

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 ̷

"$

} <

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