Les intervalles musicaux en typographie : ce que font les notes dans une échelle

Les notes subdivisent chaque intervalle d’une échelle typographique en pas proportionnels égaux : la formule devient size = base × ratio^(i/notes), et chaque note multiplie la taille précédente par la racine n-ième (n = notes) du ratio. Sur une échelle en quarte juste (base 16px, ratio 1,333), deux notes par intervalle ajoutent un pas de 18px entre 16 et 21 — et comme la nouvelle taille est une puissance de la même constante, elle se place sur l’échelle plutôt qu’à côté.

Le mécanisme comme le nom sont empruntés à la musique, et l’emprunt est étonnamment honnête : les mathématiques sont réellement les mêmes. Cet article est l’analyse approfondie de ce mécanisme — d’où vient le parallèle, ce que fait la formule, et quand ajouter des notes à une échelle qui fonctionne se révèle utile. S’il vous faut d’abord les fondations, commencez par notre guide de l’échelle typographique.

D’où vient le parallèle musical ?

Une octave en musique est un rapport de fréquence de 2:1 — le la au-dessus du la de référence vibre deux fois plus vite. Le tempérament égal, le système d’accord qu’utilisent aujourd’hui la plupart des instruments occidentaux, divise cet écart de 2:1 en douze pas égaux. Égaux dans un sens précis : non pas égaux en hertz, mais égaux en ratio. Chaque demi-ton multiplie la fréquence par la racine douzième de 2 (environ 1,0595), si bien que douze demi-tons se composent pour donner exactement 2, et chaque intervalle du système — une quinte, une quarte, une tierce majeure — est un nombre entier de demi-tons : 2^(k/12).

Une échelle typographique avec des notes effectue la même opération sur une autre grandeur. Le ratio de l’échelle joue le rôle de l’octave ; les notes jouent celui des demi-tons. Avec un ratio de 1,333 et deux notes par intervalle, chaque pas multiplie la taille par 1.333^(1/2) ≈ 1,155, et deux pas se composent pour donner exactement 1,333. C’est ce que signifie une échelle typographique musicale au sens littéral : des tailles espacées comme le tempérament égal espace les hauteurs.

Il vaut la peine d’être précis sur cette relation. C’est un vrai parallèle mathématique — les deux systèmes subdivisent un ratio géométriquement, et l’arithmétique est identique — mais la typographie a emprunté l’idée ; elle n’a pas hérité d’une loi. Le vocabulaire est venu avec la structure (la « quarte juste » de ratio 1,333 tire son nom de l’intervalle 4:3 de la musique), et pourtant rien dans le fonctionnement du son n’oblige une page web. La structure gagne sa place sur la page pour ses propres raisons, que le reste de cet article parcourt.

Que fait réellement size = base × ratio^(i/notes) ?

Posez notes = 1 et la formule se réduit à l’échelle modulaire classique, size = base × ratio^i : chaque pas multiplie par le ratio complet. Augmenter notes divise chacun des intervalles de l’échelle modulaire en autant de sous-pas égaux. La constante entre deux tailles adjacentes — le multiplicateur de pas — est ratio^(1/notes) :

L’indice i compte les notes, pas les intervalles. À deux notes, les indices pairs reproduisent exactement l’échelle à une note, et les indices impairs sont les ajouts — des demi-pas entre les tailles que vous aviez déjà.

À quoi ressemble une quarte juste à une note contre deux notes ?

Base 16px, ratio 1,333, tailles telles que Scale Composer les arrondit pour l’affichage :

À une note, le problème saute aux yeux immédiatement : il n’y a rien sur l’échelle entre 16px et 21px — précisément la plage où les interfaces ont besoin de la plus grande précision, car les paragraphes d’accroche, les grandes étiquettes de boutons et le texte d’interface proéminent réclament tous quelque chose autour de 18px. Les écarts se creusent aussi en haut (de 38 à 51, c’est un saut de 13px), mais ceux-là comptent moins : les tailles display apparaissent quelques fois par page, les tailles proches du corps des centaines de fois.

À deux notes, l’échelle gagne 18, 25, 33 et 44 — les tailles intermédiaires que les interfaces réelles ne cessent de réclamer — sans une seule valeur arbitraire.

Ouvrez cette comparaison dans Scale Composer pour voir la même quarte juste à une note et à deux notes côte à côte. Faites glisser le ratio et chaque taille des deux colonnes se recalcule à partir des deux mêmes décisions.

Pourquoi les demi-pas restent-ils proportionnés ?

Comme chaque taille — d’origine ou ajoutée — est une puissance de la même constante, deux tailles quelconques de l’échelle sont reliées par ratio^(k/notes) pour un certain nombre entier de notes k. Le demi-pas de 18px se situe à un demi-pas du corps de texte et à trois de 28px ; promouvez une étiquette d’un pas et sa relation avec tout le reste reste un intervalle de l’échelle. (Les tailles sont arrondies pour l’affichage ; les relations tiennent dans les valeurs non arrondies que calcule l’échelle.) La musique possède la même propriété sous un autre nom : la transposition. Décalez une mélodie d’un nombre quelconque de demi-tons et ses relations internes survivent, car chaque intervalle du tempérament égal est un nombre entier de la même unité.

Il y a aussi une raison perceptuelle pour laquelle la subdivision est géométrique plutôt qu’arithmétique. La perception des hauteurs est proche du logarithmique — nous entendons des rapports de fréquence égaux comme des distances musicales égales, et c’est pourquoi le tempérament égal divise l’octave par ratio et non par hertz. Juger la taille relative semble fonctionner de la même façon : passer de 16px à 18px et passer de 33px à 38px se lisent comme des pas comparables, car les deux sont un même demi-pas — le même saut proportionnel. Subdiviser par ratio donne donc une impression d’uniformité sur toute l’échelle, là où ajouter un nombre fixe de pixels (16, 18, 20, 22 …) paraît de plus en plus serré à mesure que les tailles grandissent.

Quand plus de notes aident-elles — et à quel prix ?

La valeur des notes supplémentaires se concentre dans les produits denses : tableaux de bord, tables de données, écrans de réglages — partout où une grande quantité de texte doit être différenciée dans une plage de tailles étroite. Entre 12px et 24px, une quarte juste à une note offre trois tailles ; deux notes en offrent cinq ; quatre notes en offrent environ dix. Les pages marketing et éditoriales riches en texte ont rarement besoin de cette densité — leur hiérarchie vit dans les grands intervalles, pas entre eux.

Le coût est plus subtil que le bénéfice : chaque pas ajouté est une taille que quelqu’un peut désormais choisir, et plus de choix invitent à plus d’usage. L’échelle définit ce qui est disponible ; vos rôles typographiques décident de ce qui est utilisé. Une échelle à quatre notes dont on assigne six rôles est un instrument de précision ; la même échelle utilisée intégralement, c’est de la sélection à la main avec de l’arithmétique en plus. Et comme Scale Composer dérive les pas d’espacement de la même échelle, les notes supplémentaires densifient aussi les options d’espacement — la même discipline s’applique là.

Ressentez ce que donnent quatre notes

Le compromis est plus facile à ressentir qu’à lire. À quatre notes par intervalle, le multiplicateur de pas tombe à environ 1,075 et l’échelle du corps de texte jusqu’à h1 atteint dix-sept tailles, beaucoup presque indiscernables de leurs voisines. Posez à chaque pas la seule question qui compte — quel travail ferait cette taille ? — et laissez les pas qui ont une réponse devenir des rôles tandis que les autres restent en réserve. Ouvrez la même quarte juste, suréchantillonnée à quatre notes par intervalle, et voyez à quelle vitesse vous distinguez les tailles qui travaillent de celles en réserve.