Le retour des ombres

Ce n’est pas le titre d’un roman fantastique, c’est le fait qu’après quelques excès de minimalisme, on assiste ici et là à un retour des ombres portée. Voici deux exemples notables.

Evolution des popovers

A gauche : les « popovers » depuis iOS 7. A droite : leur équivalent sur iOS 9. Si si, il y a une légère ombre portée.

Evolution d'Office 365

A gauche : Skydrive, en 2012. A droite : OneDrive, son successeur, en 2015. L’ajout de l’ombre et d’une flèche clarifie la relation entre le panneau et son origine. A noter que Windows 10 n’a pas suivi la même évolution et présente toujours des panneaux sans ombre (source), alors qu’à l’origine les interfaces web et desktop étaient beaucoup plus homogènes graphiquement.

Pour une typographie pragmatique

En typographie, on aime bien les nombres magiques. Par exemple, il parait qu’il faut 66 caractères par ligne (recommandation de Bringhust, souvent répétée), que la hauteur de texte d’un livre doit être égale à la largeur de la page (selon le canon de Tschichold qui m’a toujours semblé mystérieux) et que mettre le Nombre d’or partout ne fait jamais de mal (à part bien sûr tomber dans la numérologie).

Différents canons de mise en page : ceux de Tschichold, d'un manuscrit médiéval (reconstruit) et de Van de Graaf. Source : Wikipedia
Différents canons de mise en page : ceux de Tschichold, d’un manuscrit médiéval (reconstruit) et de Van de Graaf. Source : Wikipedia

Pourtant, si on vous demande quelle est la taille idéale pour lire du texte, la réponse est « ça dépend ». De quoi ? Du choix de la police (plus ou moins lisible et plus ou moins grande à unité égale), de l’usage (niveau d’attention, luminosité, éloignement, etc.), du type de contenu (corps de texte ou élément d’interface ?)… bref de plein de choses. C’est d’ailleurs pour ça que les recommandations ergonomiques sérieuses sont souvent désespérément prudentes, du genre « toutes choses égales par ailleurs, la taille angulaire optimale serait comprise dans l’intervalle bla bla ». (Je parle de recommandations à valeur générale et pas pour un projet spécifique.)

Plus généralement, je dirais que la typographie est contextuelle à trois niveaux :

  • les interactions entre éléments. C’est ce qui fait, par exemple, que l’interlignage peut être diminué si la justification (la longueur de la ligne) est réduite 1. Un choix ne doit jamais être fait isolément mais toujours de manière systémique.
  • L’usage. Par exemple, un panneau de signalisation dans le métro risque d’être lu de loin, de biais et dans une faible lumière.
  • Enfin, le type de contenu. Il permet de choisir entre plusieurs conventions. Par exemple, on peut arguer que séparer les paragraphes par un simple alinéa convient mieux à des textes fluides (fiction, dialogue), alors qu’une ligne vierge mettre mieux en valeur les étapes d’une argumentation. 2

Deux de ces exemples viennent d’un ouvrage récent, On Web Typography, que je recommande justement pour son caractère pragmatique et non dogmatique.


  1. Jason Santa-Maria, On Web Typography, p. 131. 
  2. Idem, p. 134. 

Une confusion courante à propos du kerning

En typographie, l’approche (tracking ou letter-spacing, en anglais), c’est l’espacement uniforme entre les caractères d’un texte.

Le crénage (kerning), c’est une variation sur cet espacement, effectuée au cas par cas, pour certaines paires de lettres. Par exemple, à cause de leur forme oblique, un A et un V adjacents apparaissent trop éloignés. On peut donc les rapprocher. Ce sera plus clair avec ce schéma, tiré de Wikipedia.

Dans l’imprimerie à caractère mobile, on faisait dépasser la lettre de la pièce pour qu’elle chevauche sa voisine.

Les deux peuvent être facteurs de blagues et de gêne, mais ce n’est pas la même chose.

Pourquoi dessine-t-on les dégradés dans ce sens ?

Lorsqu’on fait le visuel d’une interface, on a coutume de dessiner un dégradé comme si la lumière venait du haut. La raison est assez évidente : cela nous parait plus naturel, puisque le soleil éclaire typiquement le monde par le haut. Là où ça devient fascinant, c’est à quel point ce phénomène est profondément imprimé dans notre esprit. Le système visuel se sert énormément des ombres pour construire une représentation du monde qui l’entoure. Au lieu d’estimer en permanence l’orientation de toutes les sources lumineuses d’une scène, il fait quelques raccourcis. D’abord, il suppose qu’il n’y a qu’une seule source de lumière (référence). Ensuite, il fait comme si elle venait toujours du haut.

Une expérience très simple permet de le montrer : si on prend des formes avec des frontières nettes, on a l’impression que celles qui sont plus claires dans la partie supérieures sont convexes, alors que les autres sont concaves. Notez à quel point on distingue facilement les deux types, mêmes lorsqu’ils sont mélangés. De plus, le phénomène se produit même on met la tête à l’envers. Le fait que ce soit aussi saillant visuellement et que cela ne soit pas corrigé par l’orientation de la tête (alors que l’équilibre est lui aussi un truc assez fondamental) suggèrent que c’est un principe assez primitif de la perception animale.

2008-09-17_dots3

Ramachandran est à l’origine des travaux autour de ce phénomène. L’image est tirée de cet article, dont je recommande la lecture.