Une espace fine avant un deux-points. C'est la plus petite décision de distance qu'une page française contienne, elle se prend quatre fois par paragraphe, et personne ne l'apprend avec le reste. À l'autre bout de la même échelle, quarante-huit points séparent deux semaines sur un menu de cantine. Entre les deux il n'y a rien d'autre : l'œil trie une page par distance d'abord et par différence ensuite, et il a répondu aux deux avant que la première phrase arrive.
Sonia Vasseur refait le menu de la cantine de l'école élémentaire de ses enfants, à Roubaix. Vingt jours d'école, quatre lignes par jour, l'entrée, le plat, l'accompagnement et le dessert : quatre-vingts éléments sur une A4 qui part dans les cartables le dernier vendredi du mois. Celle qu'elle remplace emploie le même écart partout, six points, entre un plat et sa ligne d'allergènes comme entre la première semaine et la deuxième. Chaque élément y est à la même distance de tous les autres, et un parent qui cherche le jeudi 12 doit lire les quatre-vingts. Cette feuille n'est pas laide. Elle est non triée, et cela se répare avec des écarts, pas avec du goût.
Six sujets, et deux questions entre eux
Les six sujets d'ici sont deux questions posées à des échelles différentes. À quelle distance : la composition, la grille, et la moitié de la typographie qui est de l'espacement. À quel point différent : la hiérarchie, la couleur, et la moitié de la typographie qui est un choix de caractère. Le sixième, apprendre à voir, n'est pas une troisième question, c'est la façon d'obtenir une réponse juste aux deux premières. Les six ensemble sont ce que les six autres sujets du design supposent acquis sans jamais l'enseigner.
Le découpage sert le jour où quelque chose ne va pas sans que vous sachiez dire quoi, parce qu'il ne laisse que deux gestes. Changer une distance, ou changer une différence. La composition et la grille et la mise en page sont le premier geste à deux échelles, l'une par feuille et l'autre décidée une fois pour toutes les feuilles. La hiérarchie et la couleur sont le second.
L'écart dans un groupe doit perdre contre l'écart autour
Grouper est une opération arithmétique et elle tient en une ligne : l'espace à l'intérieur d'un groupe doit être visiblement plus petit que l'espace autour. Visiblement veut dire au moins le double. La feuille de Sonia emboîte quatre niveaux et chacun vaut au moins deux fois celui qu'il contient. Le nom du plat et sa ligne d'allergènes sont à 4 pt l'un de l'autre, ce qui en fait une ligne de menu ; les quatre plats d'une journée sont à 8 pt, ce qui en fait une journée. Le menu tourne donc sur un écart de 8 pt dans un groupe, de 24 pt entre deux groupes, et de 48 pt là où une semaine s'arrête.
Le pas qui porte le plus est celui de 8 pt à 24 pt. En dessous, l'œil comprend que ces choses vont ensemble ; au-dessus, qu'elles n'y vont pas. Manquez ce rapport et aucune palette ne le rattrape, parce que la couleur ne sait pas dire que deux objets n'en font qu'un.
Une différence tient quand elle en porte deux à la fois
Le second geste est la différence, et un débutant la dépense une propriété à la fois. Pour détacher le nom du jour de la liste des plats, il pousse le corps de 8 pt à 16 pt, et obtient un jour lisible depuis le fond du préau et une colonne qui vient d'en perdre le quart. Changer deux propriétés à la fois plutôt qu'une seule beaucoup ne coûte presque rien : 8 pt à 10 pt, et le romain qui passe en demi-gras. Le jour est net et la colonne est encore une colonne.
Que la différence soit réelle se vérifie en quatre secondes. Passez le fichier en gris et regardez si la hiérarchie tient. Si la feuille s'aplatit, la hiérarchie était faite de couleur, et la couleur est la propriété qui lâche la première : à la photocopieuse, sous un couloir éclairé d'un seul bout, et pour un parent qui ne sépare pas le rouge du vert. Le menu est photocopié huit mois sur douze. Il se construit donc en gris et se colore après, dans cet ordre.
L'alignement est le même geste fait par soustraction. Comptez les bords gauches distincts. L'ancienne feuille en avait sept, un par élément posé approximativement au fil des années, et sept points de départ se lisent comme sept papiers photographiés ensemble. La nouvelle en a deux, et chaque élément commence sur l'un ou sur l'autre.
Le rapport est déjà dans la feuille
Les corps sortent d'un seul nombre multiplié, et ce nombre se décide par la distance de lecture plutôt que par le goût. Un lecteur français n'a pas à le chercher loin, parce que la feuille qu'il tient en contient déjà un : le format A est bâti sur la racine carrée de deux, soit 1,41, et c'est ce qui fait qu'une A4 pliée en deux donne une A5 de mêmes proportions. Une feuille lue en marchant demande ce rapport large ; un document lu à trente centimètres en demande un serré, autour de 1,2. À partir de 8 pt, 1,41 donne 8, 11, 16 et 23.
L'interlignage joue dans l'autre sens que le corps. L'interlignage se resserre quand le corps grandit : le texte de 8 pt est interligné à 12, la moitié en plus, alors que le nom du jour à 23 pt est interligné à 24, parce qu'une ligne d'un seul mot n'a pas besoin d'air en dessous et que le réglage automatique lui en donnerait 28.
Un dernier réglage, et il n'existe pas en anglais. Une capitale accentuée dépasse la hauteur de capitale : le É d'ÉCOLE monte plus haut que le E ordinaire, et un titre serré coupe l'accent avant que vous l'ayez vu, parce que l'aperçu d'un caractère montre un A et un a et jamais un É. C'est une décision de distance et elle se prend sur la ligne, pas sur la lettre.
D'où une vérification qui prend dix secondes et qu'aucune page anglaise n'a de raison de mentionner. Avant de retenir un caractère, tapez-y ces quatre chaînes :
- ÉCOLE, pour voir si l'accent tient dans la hauteur de ligne.
- cœur, parce que la ligature œ manque encore à des caractères d'affiche.
- Œuvre, parce que la capitale de cette ligature manque plus souvent encore.
- Ça ira, parce que la cédille sur une capitale est le glyphe le plus souvent oublié.
On sait décrire, on ne mesure jamais
C'est ici que les gens s'arrêtent dans les bases sans s'apercevoir qu'ils se sont arrêtés, et la forme française du décrochage n'est pas une incapacité, c'est une permission. Le vocabulaire arrive tôt et il arrive bien : équilibre, hiérarchie, contraste, respiration. L'enseignement français des arts appliqués le donne mieux que la plupart et y pratique la critique à voix haute. Trois semaines suffisent donc à tenir dix minutes de commentaire défendable sur une affiche, et à avoir raison sur le fond.
Ce qui ne vient presque jamais ensuite, c'est un nombre. Le test se fait sur vous cet après-midi : vous savez dire qu'une mise en page manque d'équilibre, et vous ne savez pas dire lequel de ses écarts est faux. La cause n'est pas la paresse. C'est qu'un jugement se défend et qu'une mesure se vérifie, et que défendre est le geste qu'on vous a appris. Le remède est le seul contenu de ce sujet qui soit une habitude et non une valeur : écrivez trois écarts en chiffres avant de dire qu'une page est déséquilibrée. C'est Apprendre à voir, le seul des six dont la sortie est une habitude.
L'ordre
La couleur vient en dernier parce que c'est elle qui rattrape le moins
Chaque étape répare moins de la page précédente que celle d'avant, donc la faute la moins chère à traîner est celle qui est le plus loin.
- première, et la moins chèreLa distanceLe groupement, l'alignement, et les écarts qui font qu'un groupe en est un01
- 02deuxièmeLa différenceDeux propriétés à la fois, vérifiées en niveaux de gris
- à partir d'ici, en continuL'habitude de mesurerTrois écarts écrits en chiffres avant tout jugement03
- 04troisièmeLe texteLà où vit la plupart de ce qui ressemble à une faute de mise en page
- dernièreLa couleurAjoutée à une page qui marche déjà sans elle05
Ni dates ni durées, parce que rien de tout cela n'est un calendrier. La seule affirmation est l'ordre : une étape prise trop tôt n'est pas prise en avance, elle est prise contre rien.
La distance, puis la différence, puis la couleur
C'est l'ordre, et la raison est que chaque étape rattrape moins que la précédente. Une page aux bons écarts et sans couleur est finie ; une page avec une palette et de mauvais écarts ne l'est pas, et aucune palette n'en a jamais réparé une. Pris à l'envers, l'ordre échoue à trois endroits prévisibles. La hiérarchie avant l'espacement donne la page où tout grossit : le corps est le seul outil de la boîte, et il ne reste plus de silence contre lequel être fort. La grille avant l'espacement donne une grille sur laquelle rien ne se pose, parce qu'une largeur de colonne choisie avant ses écarts est un nombre choisi contre rien. La couleur en premier est le plus cher des trois : la palette se choisit la première semaine et passe le reste du projet à rattraper des distances, ce qu'aucune saturation ne sait faire.
Ce qu'on ouvre, et aucun des trois n'est un logiciel de dessin
Figma tient l'écran par défaut depuis 2019 et son offre gratuite couvre chaque mesure de cette page. Ce qui sert ici n'est pas un outil de tracé mais une mesure : sélectionnez un objet, maintenez la touche Alt, survolez-en un autre, et la distance s'affiche en pixels. Dix minutes de cela sur un travail que vous admirez installent l'habitude mieux qu'un chapitre.
Le contraste est de l'arithmétique et il existe un calculateur gratuit. Le vérificateur de contraste de WebAIM prend deux couleurs et rend le rapport entre elles ; il remplace le fait de demander à quelqu'un du fond de la pièce s'il arrive à lire. Le troisième est la liste de caractères : Google Fonts est gratuit depuis 2010 et a remplacé la licence achetée projet par projet. Aucun des trois ne tape les quatre chaînes ci-dessus à votre place.
Ce qu'aucun des trois ne tranche, c'est quelle différence dépenser. Les deux questions disent qu'un titre doit différer de son paragraphe ; elles ne disent pas si la différence doit être un corps, une graisse, une couleur ou un espace. L'entrée la plus étroite est la typographie, parce que sur la plupart des feuilles, celle de Sonia comprise, la différence qui manquait était une décision de texte. La question se sépare ensuite selon ce que le travail doit supporter : imprimé une fois et accroché à un mur, ce qui est le design graphique, ou redessiné à chaque ouverture à une largeur que vous n'avez pas choisie, ce qui est le design d'interface. Aucun des deux ne demande si la chose devrait exister, et cette question-là a son propre sujet : l'UX design, par où passer d'abord si personne n'a encore dit pour qui le menu est fait.