Aussi disponible en : English · Español · Português · العربية
Générateur d’échelle typographique modulaire
Une échelle typographique depuis n’importe quelle base et n’importe quel rapport, avec le rapport réellement obtenu affiché à côté de chaque cran.
Qu’est-ce qu’une échelle modulaire ?
Une échelle modulaire est un jeu de tailles de police obtenu en multipliant sans cesse une taille de base par un rapport fixe. Partez de 18px avec un rapport de 1,25 et vous obtenez 22,5, 28,125 et 35,15625 vers le haut, puis 14,4 et 11,52 vers le bas. L’intérêt en est la cohérence : chaque paire voisine entretient la même relation, si bien que les tailles forment un système au lieu d’une liste de nombres qui ont plu à quelqu’un.
Les rapports portent des noms parce qu’ils sont empruntés à la musique. La tierce majeure, la quarte juste, la quinte juste et l’octave sont des intervalles en intonation juste, et dans ce système ce sont des fractions exactes : 5/4, 4/3, 3/2 et 2. Cela vaut la peine de le savoir, car toutes les tables de rapports publiées les donnent en décimal, et ces décimaux sont arrondis.
Ce générateur d’échelle modulaire fait le travail ordinaire, puis celui que personne d’autre ne fait : à côté de chaque cran il affiche le rapport que ce cran a réellement atteint, et vous dit combien correspondent encore à celui que vous avez demandé. La plupart du temps, la majorité n’y correspond pas.
Comment s’en servir
- Fixez votre taille de base et choisissez un rapport. Neuf intervalles nommés sont fournis, ou choisissez Autre et saisissez le vôtre. La ligne sous le sélecteur indique la fraction exacte qu’est réellement l’intervalle, et le décimal arrondi que les tables impriment d’ordinaire.
- Choisissez le nombre de crans au-dessus et au-dessous de la base. Les crans négatifs sont les petites tailles — légendes, étiquettes — et les positifs sont les titres.
- Regardez la dernière colonne, puis décochez la case d’arrondi. Cette colonne donne le rapport que chaque cran entretient vraiment avec celui du dessous. Arrondi activé, la plupart dérivent ; désactivé, tous sont exacts. Le récapitulatif en dessous les compte, et le bloc CSS fournit des propriétés personnalisées prêtes à coller.
Arrondir au pixel entier casse l’échelle
Une suite géométrique ne survit pas à l’arrondi. Prenez l’exemple par défaut de cette page : une tierce majeure depuis une base de 18px. Arrondies au pixel entier, les tailles sont 12, 14, 18, 23, 28, 35, 44, 55 et 69, et deux seulement de ces huit crans entretiennent encore un rapport de 1,25 avec le précédent. La toute première paire, de 12 à 14, donne 1,1667 : elle est à 6,67 % du rapport pour lequel l’échelle a été choisie, et c’est le plus grand texte de la page à côté du plus petit.
Ce n’est pas une bizarrerie d’un réglage particulier. Sur les neuf rapports de cette page aux deux tailles de base les plus courantes, 16 et 18 pixels, 39 paires voisines sur 144 seulement gardent le rapport promis — 27,1 % — et la pire s’en écarte de 10 %. Autrement dit, la propriété qui justifie l’emploi d’une échelle modulaire est, dans le cas ordinaire, presque absente des nombres qui atteignent la feuille de styles.
Le coupable le plus surprenant est l’octave. Doubler est le rapport le plus simple qui soit et l’arrondi ne peut pas le casser, puisque le double d’un entier est un entier. Mais arrondir avant de doubler, si : depuis une base de 18px, le cran deux crans plus bas vaut 4,5, qui s’arrondit à 5, et 5 doublé fait 10 au lieu du 9 que veut l’échelle. C’est un écart de 10 % sur le rapport le plus simple de la table, et c’est la plus forte dérive de toute la table. Depuis une base de 16px, cette même octave est parfaite à chaque cran, car 16 se divise proprement jusqu’en bas. C’est la parité de la base qui tranche, et c’est pourquoi la base est la première commande de la page.
La solution n’est pas de changer de rapport, mais de cesser d’arrondir : CSS accepte très bien 1,3333rem ou 22,5px, et la colonne rem est exacte que celle des pixels le soit ou non. Décochez la case d’arrondi et le compteur passe à huit sur huit avec une dérive maximale nulle.
Les rapports publiés sont eux aussi arrondis
Un second arrondi, plus discret, se cache sous le premier, et il figure dans presque toutes les tables de rapports du web. Une quarte juste s’écrit 1,333. Elle ne vaut pas 1,333 : elle vaut 4/3, soit 1,3333 périodique. Une tierce mineure vaut 6/5, une tierce majeure 5/4, une quinte juste 3/2 et une seconde majeure 9/8. Voilà qui est exact ; les décimaux publiés à côté ne le sont pas.
L’écart de taille est faible : au sixième cran au-dessus d’une base de 16px, employer 1,333 plutôt que 4/3 vous coûte moins d’un pixel entier. Mais l’erreur va dans le même sens à chaque cran, car 1,333 est inférieur à 4/3 et non de part et d’autre, si bien qu’elle s’accumule au lieu de se compenser. Et elle a une conséquence qui, elle, n’est pas faible : avec la fraction exacte, trois des paires arrondies sur une base de 16px tombent pile sur le rapport, parce que 4/3 est un rapport de petits entiers et que des paires comme 12 et 16 le vérifient. Avec 1,333, aucune paire ne peut jamais être exacte, car 1,333 n’est le rapport d’aucun couple de petits entiers.
Deux des neuf sont véritablement irrationnels et aucun décimal ne sera jamais exact pour eux. La quarte augmentée vaut la racine carrée de deux, et le nombre d’or vaut un plus la racine de cinq, le tout divisé par deux. Cette page emploie la valeur exacte pour les neuf et indique sous le sélecteur auquel des deux types vous avez affaire.
Limites assumées
Rien de tout cela ne rend une échelle arrondie inutilisable. Les tailles de texte sont une décision de design et non une mesure, et 23px au lieu de 22,5px ne fera de mal à personne. L’affirmation est plus étroite et mérite d’être précise : dès que vous arrondissez, ce que vous tenez n’est plus une échelle modulaire mais une liste de tailles qui en fut une. Si le rapport était votre raison de choisir cette méthode, autant savoir à quel moment vous ne l’avez plus.
Le compteur compare chaque paire au rapport demandé et ne la déclare exacte que si les deux coïncident à une fraction de billionième près. C’est volontairement strict : la moindre tolérance ferait passer des quasi-réussites pour des réussites et la colonne n’aurait plus d’objet.
Les navigateurs ajoutent un arrondi de plus que cette page ne peut pas montrer. Une taille exprimée en rem est calculée exactement, mais les glyphes finissent peints sur une grille de pixels physiques, et la façon dont cela se résout dépend du navigateur, du système et de l’écran. La colonne rem est donc exacte comme valeur calculée et approximative comme encre. Cela reste nettement préférable à un arrondi de votre main, car le navigateur arrondit au dernier moment possible plutôt qu’au premier.
Enfin, l’échelle ne dit rien des tailles que vous devriez réellement employer. Un générateur vous donnera volontiers neuf crans ; la plupart des interfaces en demandent quatre ou cinq, et ceux que vous sautez comptent autant que ceux que vous gardez.
Pourquoi est-ce gratuit ?
C’est de l’arithmétique, et elle s’exécute dans votre navigateur. Aucun serveur n’intervient : rien à facturer, aucun compte à créer.
Rien n’est envoyé et rien n’est conservé. Rechargez la page et elle aura oublié votre échelle.