Graisses sur une échelle : associer taille et graisse

La hiérarchie typographique a deux leviers — la taille et la graisse — et les associer délibérément vaut mieux que de pousser l’un ou l’autre à fond. Le schéma courant : le corps de texte à 400, les titres à 600–700, les petites étiquettes à 500, et le texte d’affichage à 700 ou au-delà avec un interlettrage resserré. Une échelle typographique répond à la question de la taille ; cet article répond à celle qui vient juste après — quelle graisse va avec quelle taille, et quand la graisse peut faire le travail d’une taille.

La logique en bref : la taille hiérarchise le texte à distance, la graisse le hiérarchise de près, et le petit texte a besoin de plus de graisse, pas de moins. L’exemple travaillé ci-dessous montre la même carte construite des deux manières. Cet article fait partie de notre guide des échelles typographiques.

Pourquoi ne pas simplement agrandir le texte important ?

Parce que la taille est un levier coûteux. Chaque niveau d’importance que vous exprimez par la taille seule consomme un palier de l’échelle — et les paliers croissent de façon multiplicative, si bien qu’une hiérarchie fondée uniquement sur la taille finit soit par épuiser ses paliers utilisables, soit par aboutir à un palier supérieur bien plus grand que ce dont le design a besoin. Pendant ce temps, les cas intermédiaires s’accumulent : une étiquette qui devrait primer sur le corps de texte voisin mais qui se trouve à l’intérieur d’un petit composant n’a nulle part où aller. Agrandissez-la et elle casse le composant ; laissez-la telle quelle et elle disparaît.

La graisse est le second levier qui résout cela. Deux passages de texte peuvent partager une taille et se hiérarchiser clairement — une ligne en graisse 600 se lit comme le titre d’une ligne en graisse 400 à la même taille, sans nouveau palier requis. La raison intuitive pour laquelle la graisse fonctionne : l’œil lit la noirceur comme une emphase avant de lire la mesure. Une graisse plus lourde met plus d’encre dans la même surface, et cette densité s’enregistre de façon préattentive, comme un mot en gras dans un paragraphe qui saute aux yeux avant même que vous ayez rien lu. La taille indique à quel niveau de l’arborescence du document vous êtes ; la graisse dit regardez ici d’abord à portée de main.

Quelle graisse de police va avec quelle taille ?

Les graisses en CSS sont numériques, 100–900 — la correspondance entre des noms comme « regular » et « bold » et les nombres est définie dans la référence font-weight. Voici une association travaillée sur une échelle modulaire de base 16px (ratio 1,333, deux notes par intervalle) :

Remarquez ce qui ne figure pas dans le tableau : 900. Les graisses très lourdes referment les contrepoinçons — les espaces blancs enfermés à l’intérieur de lettres comme e et a — et dans la plupart des polices de texte, ils ne respirent que lorsque la taille est assez grande pour garder ces contrepoinçons ouverts. Une graisse 800–900 à 51px peut être spectaculaire ; la même graisse à 21px n’est qu’une bavure. Les graisses lourdes ont besoin de taille ; elles ne la remplacent pas.

Voyez les associations en direct : ouvrez cette échelle dans Scale Composer — chaque niveau porte sa propre graisse aux côtés de sa taille, de 500 du côté des étiquettes jusqu’à 700 à l’affichage. Changez la graisse de n’importe quel niveau et observez à quel point il se déplace dans la hiérarchie sans que sa taille change du tout.

Pourquoi le petit texte a-t-il besoin de plus de graisse, pas de moins ?

Cela semble contre-intuitif — le petit texte est subordonné, ne devrait-il donc pas être plus léger ? Optiquement, non. À 12px, un trait peut faire à peine un pixel de large ; affichez une police en graisse 300 à cette taille et l’anticrénelage grise ces traits, et le texte passe sous un contraste confortable, surtout sur les écrans à faible densité. Faire passer une petite étiquette de 400 à 500 garde ses traits pleins à une taille où les pixels sont comptés.

C’est l’image miroir de la règle de l’affichage. Le grand texte a des pixels à revendre, il peut donc se permettre des extrêmes dans les deux sens — très lourd ou très léger. Le petit texte ne peut pas se permettre le léger. Si vous voulez qu’une petite étiquette paraisse aussi subordonnée, atténuez sa couleur plutôt que sa graisse : une étiquette en graisse 500 dans un gris secondaire se lit discrète et reste lisible ; une étiquette en graisse 300 en noir plein se lit cassée.

La graisse peut-elle remplacer un palier de taille ?

De près, oui — et c’est le geste le plus pratique de toute l’association. Une étiquette de 16px en graisse 600 placée au-dessus d’un corps de 16px à 400 se lit comme deux niveaux indéniables, sans dépenser de palier d’échelle. À l’intérieur des cartes, des lignes de liste, des groupes de formulaire et des en-têtes de tableau, la hiérarchie par la seule graisse est généralement le meilleur outil : les éléments sont à quelques centimètres les uns des autres, l’œil compare donc directement la noirceur, et la mise en page conserve une seule taille de texte pour l’alignement.

Voici la même carte produit construite des deux manières :

/* Version A — la taille fait tout le travail : quatre tailles, une graisse */
.card-title { font-size: 24px; font-weight: 400; }
.card-label { font-size: 13px; font-weight: 400; }
.card-body  { font-size: 16px; font-weight: 400; }
.card-price { font-size: 21px; font-weight: 400; }

/* Version B — la taille et la graisse se partagent le travail : deux tailles */
.card-title { font-size: 21px; font-weight: 600; }
.card-label { font-size: 12px; font-weight: 500;
              letter-spacing: 0.05em; text-transform: uppercase; }
.card-body  { font-size: 16px; font-weight: 400; }
.card-price { font-size: 16px; font-weight: 700; }

La version A a besoin de quatre tailles (dont deux — 13px et 24px — hors échelle) et se lit tout de même plate, parce que tout partage une seule voix. La version B a besoin de deux tailles d’échelle plus le palier d’étiquette à 12px : le titre passe de 24 à 21px parce que la graisse 600 porte une partie de la charge, et le prix prime sur le corps à la même taille de 16px parce que 700 prime sur 400 de près. Moins de tailles, des rangs plus nets — et chaque taille vit toujours sur l’échelle.

Une règle empirique praticable : au sein d’un composant, tournez-vous d’abord vers la graisse ; d’une section à l’autre d’une page, tournez-vous vers la taille. Parcourir des régions éloignées exige la différence mesurable que seule la taille fournit ; hiérarchiser des voisins exige l’immédiateté de la graisse.

Essayez la graisse avant la taille

Le moyen le plus rapide de calibrer vos propres associations est d’isoler le levier de la graisse : ouvrez deux styles à la même taille de 16px — l’un à 400, l’autre à 600 — et faites progresser le plus lourd par 500, 600 et 700. Observez où la paire commence à se lire comme deux niveaux plutôt qu’un seul style avec un défaut : ce seuil est votre hiérarchie à taille égale, et chaque palier qu’il économise est un palier que votre échelle n’a pas à porter.