Le retour des ombres

Ce n’est pas le titre d’un roman fan­tas­tique, c’est le fait qu’après quelques excès de mini­ma­lisme, on assiste ici et là à un retour des ombres por­tée. Voici deux exemples notables.

Evolution des popovers

A gauche : les « popo­vers » depuis iOS 7. A droite : leur équi­valent sur iOS 9. Si si, il y a une légère ombre por­tée.

Evolution d'Office 365

A gauche : Skydrive, en 2012. A droite : OneDrive, son suc­ces­seur, en 2015. L’ajout de l’ombre et d’une flèche cla­ri­fie la rela­tion entre le pan­neau et son ori­gine. A noter que Windows 10 n’a pas sui­vi la même évo­lu­tion et pré­sente tou­jours des pan­neaux sans ombre (source), alors qu’à l’origine les inter­faces web et desk­top étaient beau­coup plus homo­gènes gra­phi­que­ment.

Pour une typographie pragmatique

En typo­gra­phie, on aime bien les nombres magiques. Par exemple, il parait qu’il faut 66 carac­tères par ligne (recom­man­da­tion de Bringhust, sou­vent répé­tée), que la hau­teur de texte d’un livre doit être égale à la lar­geur de la page (selon le canon de Tschichold qui m’a tou­jours sem­blé mys­té­rieux) et que mettre le Nombre d’or par­tout ne fait jamais de mal (à part bien sûr tom­ber dans la numé­ro­lo­gie).

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 manus­crit médié­val (recons­truit) 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 à uni­té égale), de l’usage (niveau d’attention, lumi­no­si­té, éloi­gne­ment, etc.), du type de conte­nu (corps de texte ou élé­ment d’interface ?)… bref de plein de choses. C’est d’ailleurs pour ça que les recom­man­da­tions ergo­no­miques sérieuses sont sou­vent déses­pé­ré­ment pru­dentes, du genre « toutes choses égales par ailleurs, la taille angu­laire opti­male serait com­prise dans l’intervalle bla bla ». (Je parle de recom­man­da­tions à valeur géné­rale et pas pour un pro­jet spé­ci­fique.)

Plus géné­ra­le­ment, je dirais que la typo­gra­phie est contex­tuelle à trois niveaux :

  • les inter­ac­tions entre élé­ments. C’est ce qui fait, par exemple, que l’interlignage peut être dimi­nué si la jus­ti­fi­ca­tion (la lon­gueur de la ligne) est réduite 1. Un choix ne doit jamais être fait iso­lé­ment mais tou­jours de manière sys­té­mique.
  • L’usage. Par exemple, un pan­neau de signa­li­sa­tion dans le métro risque d’être lu de loin, de biais et dans une faible lumière.
  • Enfin, le type de conte­nu. Il per­met de choi­sir entre plu­sieurs conven­tions. Par exemple, on peut arguer que sépa­rer les para­graphes par un simple ali­néa convient mieux à des textes fluides (fic­tion, dia­logue), alors qu’une ligne vierge mettre mieux en valeur les étapes d’une argu­men­ta­tion. 2

Deux de ces exemples viennent d’un ouvrage récent, On Web Typography, que je recom­mande jus­te­ment pour son carac­tère prag­ma­tique et non dog­ma­tique.


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

Une confusion courante à propos du kerning

En typo­gra­phie, l’approche (tra­cking ou letter-spacing, en anglais), c’est l’espacement uni­forme entre les carac­tères d’un texte.

Le cré­nage (ker­ning), c’est une varia­tion sur cet espa­ce­ment, effec­tuée au cas par cas, pour cer­taines paires de lettres. Par exemple, à cause de leur forme oblique, un A et un V adja­cents appa­raissent trop éloi­gnés. On peut donc les rap­pro­cher. Ce sera plus clair avec ce sché­ma, tiré de Wikipedia.

Dans l’imprimerie à carac­tère mobile, on fai­sait dépas­ser la lettre de la pièce pour qu’elle che­vauche sa voi­sine.

Les deux peuvent être fac­teurs 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 inter­face, on a cou­tume de des­si­ner un dégra­dé comme si la lumière venait du haut. La rai­son est assez évi­dente : cela nous parait plus natu­rel, puisque le soleil éclaire typi­que­ment le monde par le haut. Là où ça devient fas­ci­nant, c’est à quel point ce phé­no­mène est pro­fon­dé­ment impri­mé dans notre esprit. Le sys­tème visuel se sert énor­mé­ment des ombres pour construire une repré­sen­ta­tion du monde qui l’entoure. Au lieu d’estimer en per­ma­nence l’orientation de toutes les sources lumi­neuses d’une scène, il fait quelques rac­cour­cis. D’abord, il sup­pose qu’il n’y a qu’une seule source de lumière (réfé­rence). Ensuite, il fait comme si elle venait tou­jours du haut.

Une expé­rience très simple per­met de le mon­trer : si on prend des formes avec des fron­tières nettes, on a l’impression que celles qui sont plus claires dans la par­tie supé­rieures sont convexes, alors que les autres sont concaves. Notez à quel point on dis­tingue faci­le­ment les deux types, mêmes lorsqu’ils sont mélan­gés. De plus, le phé­no­mène se pro­duit même on met la tête à l’envers. Le fait que ce soit aus­si saillant visuel­le­ment et que cela ne soit pas cor­ri­gé par l’orientation de la tête (alors que l’équi­libre est lui aus­si un truc assez fon­da­men­tal) sug­gèrent que c’est un prin­cipe assez pri­mi­tif de la per­cep­tion ani­male.

2008-09-17_dots3

Ramachandran est à l’origine des tra­vaux autour de ce phé­no­mène. L’image est tirée de cet article, dont je recom­mande la lec­ture.