Échelle de type modulaire — Les maths derrière les tailles de police de chaque système de conception

Vous avez regardé longuement le maquette. Les tailles de police sont 14px, 16px, 18px, 24px, 32px, 48px. Rien ne semble erroné, exactement — et pourtant quelque chose sent un peu bizarre. Les sauts entre les tailles ne semblent pas égaux. L'entête est trop proche de l'élément sous-titre. L'étiquette petite semble déconnectée du texte principal. Vous avez choisi des valeurs qui semblent rondes et raisonnables, et vous vous êtes demandé pourquoi le résultat sent un peu arbitraire. C'est arbitraire. C'est le problème.

On découvre que la perception humaine des différences de taille suit une logique logarithmique. Nous ne percevons pas la différence entre 16px et 32px comme « double » — nous la percevons comme une étape. Pour créer une typographie qui semble proportionnellement cohérente, les écarts entre vos tailles doivent suivre un rapport, et non une suite arithmétique. C'est l'idée derrière une échelle modulaire.

Ce qu'est réellement une échelle modulaire

Une échelle modulaire est une suite de nombres construite en multipliant une valeur de base par un rapport fixe, répétitivement. La formule est :

size = base × ratio^n

Où n n est le numéro de pas (0 pour la base, positif pour les valeurs plus grandes, négatif pour les valeurs plus petites). Avec une base de 16px et un rapport de 1.25 (la tierce majeure), on obtient :

• 16 × 1.25^-2 = 10.24px
• 16 × 1.25^-1 = 12.8px
• 16 × 1.25^0 = 16px (base)
• 16 × 1.25^1 = 20px
• 16 × 1.25^2 = 25px
• 16 × 1.25^3 = 31.25px
• 16 × 1.25^4 = 39.06px

Chaque augmentation est exactement 25% plus grande que la précédente. Les sauts visuels semblent cohérents parce qu'ils sont en millisecondes. Un écart important entre les estimations et les valeurs réelles est le signal le plus fiable selon lequel le planificateur a fait une mauvaise décision. cohérents — géométriquement. Comparez cela à 14, 16, 18, 24, 32, 48, où les sauts sont +2, +2, +6, +8, +16. Un espacement considérablement incohérent, masqué par des nombres arrondis.

Les rapports nommés (et quand ils sont pertinents)

Les noms proviennent des intervalles de musique occidentale, qui suivent les mêmes relations mathématiques. Voici la disposition pratique :

• 1.067 — Second mineur : Très serré. Les étapes sont presque indiscernables. Utile pour des espacements fins dans le texte de corps au sein d'un composant unique, pas pour les hiérarchies d'entêtes.
• 1.125 — Second majeur : Subtil. Idéal pour des interfaces densément structurées où vous avez besoin de distinctions sans dramatisation — pensez aux tables de données, aux tableaux de bord.
• 1.25 — Tierce majeure : Le point idéal pour la plupart des interfaces web. Il y a assez de contraste entre les niveaux pour lire clairement la hiérarchie sans que les entêtes semblent trop grandes. Le plus populaire dans les systèmes de conception.
• 1.333 — Quatrième parfaite : Simples et largement utilisés. Donne aux entêtes un peu plus d'autorité. Fonctionne bien lorsque vous souhaitez une hiérarchie typographique claire avec un nombre réduit d'étapes.
• 1.414 — Quatrième augmentée (√2) : Également le rapport de la feuille A4. Plus dramatique que la quatrième parfaite, idéal pour les contenus d'information.
• 1.5 — Quinte parfaite : Fort contraste entre les niveaux. Les entêtes semblent grandes et bold. Fonctionne pour les affichages, les pages d'accueil, tout ce qui nécessite des textes d'affichage pour faire une déclaration.
• 1.618 — Rapport d'or : Beau en théorie, agressif en pratique. Deux étapes au-dessus du texte de corps et votre entête est déjà énorme. Utilisez-le pour des éléments d'affichage uniquement, pas pour des hiérarchies complètes.

Pour un développeur frontend construisant une interface produit, la tierce majeure (1.25) ou la quatrième parfaite (1.333) couvrent presque tous les cas. Si vous êtes incertain, commencez par 1.25. Vous pouvez toujours augmenter le rapport si la hiérarchie semble trop plate.

L'échelle en pratique : la tierce majeure à partir de 16px

Voici ce qu'une échelle complète de tierce majeure (rapport = 1.25, base = 16px) ressemble sur sept étapes :

Étape	Multiplicateur	px value	rem value
xs	1.25^-2	10.24px	0.64rem
sm	1.25^-1	12.8px	0.8rem
base	1.25^0	16px	1rem
lg	1.25^1	20px	1.25rem
xl	1.25^2	25px	1.5625rem
2xl	1.25^3	31.25px	1.953rem
3xl	1.25^4	39.06px	2.441rem

Une note sur les valeurs décimales : 12.8px et 31.25px sont parfaitement acceptables à conserver exactement en rem — les navigateurs gèrent correctement le rendu sous-pixel. Vous n'avez pas besoin de les arrondir à 13px ou 31px et de rompre la cohérence mathématique. Gardez les calculs purs ; laissez le navigateur faire son travail.

Propriétés CSS personnalisées : votre système de tokens de conception

Translatez directement l'échelle en propriétés CSS personnalisées. Cela vous donne un système de tokens de conception facile à consommer partout dans votre codebase — et facile à remplacer plus tard si vous modifiez le rapport :

:root {
  --font-size-xs:   0.64rem;    /* 16 × 1.25^-2 = 10.24px */
  --font-size-sm:   0.8rem;     /* 16 × 1.25^-1 = 12.8px  */
  --font-size-base: 1rem;       /* base = 16px             */
  --font-size-lg:   1.25rem;    /* 16 × 1.25^1  = 20px     */
  --font-size-xl:   1.5625rem;  /* 16 × 1.25^2  = 25px     */
  --font-size-2xl:  1.953rem;   /* 16 × 1.25^3  = 31.25px  */
  --font-size-3xl:  2.441rem;   /* 16 × 1.25^4  = 39.06px  */
}

Puis utilisez-les comme n'importe quel token de conception :

body        { font-size: var(--font-size-base); }
small       { font-size: var(--font-size-sm);   }
h3          { font-size: var(--font-size-xl);   }
h2          { font-size: var(--font-size-2xl);  }
h1          { font-size: var(--font-size-3xl);  }
.label      { font-size: var(--font-size-xs);   }

L'avantage par rapport aux valeurs fixes : lorsque le designer décide que le rapport devrait être 1.333 au lieu de 1.25, vous modifiez sept valeurs en un seul endroit. Tous les composants sont mis à jour automatiquement. Les systèmes de conception qui omis cette étape se retrouvent avec cinquante valeurs différentes de taille de police dispersées dans des fichiers de composants — et chaque développeur de l'équipe ajoutant ses propres valeurs. Les développeurs et les tokens de conception ont une relation compliquée, mais c'est la version qui fonctionne réellement.

Si vous ne souhaitez pas calculer les valeurs à la main, le Générateur d'échelle modulaire vous permet de choisir une taille de base et un rapport, et de produire immédiatement l'ensemble de l'échelle, avec des propriétés CSS prêtes à copier.

Quand il faut rompre l'échelle

Les échelles sont des outils, pas des lois. Voici quand il faut dévier intentionnellement :

Les entêtes d'affichage nécessitent un traitement particulier

La plupart des systèmes de conception utilisent deux échelles : une rapport serré (1.25 ou 1.333) pour le texte de corps et les composants d'interface, et un rapport plus dramatique (1.5 ou 1.618) pour les entêtes d'affichage. L'entête principale sur une page de marketing n'a pas besoin de suivre la même progression qu'une étiquette dans un formulaire. Tailwind utilise exactement cela — des étapes plus serrées aux tailles petites, des sauts plus grands aux tailles d'affichage.

La typographie fluide régule les transitions

Sur une vue mobile, un rapport de 1.5 qui semblait excellent sur un ordinateur de bureau produira des entêtes trop petites ou trop grandes. La réponse moderne est clamp():

h1 {
  font-size: clamp(1.953rem, 4vw + 1rem, 2.441rem);
}

Cela conserve les valeurs de l'échelle modulaire comme points d'ancrage minimum et maximum, mais permet à la taille de varier de manière fluide en fonction de la largeur de la fenêtre. L'échelle modulaire définit la plage ; clamp() gère les transitions. Les calculs restent cohérents, les résultats restent lisibles sur tous les tailles d'écran.

Des surcharges contextuelles sont acceptables

Si votre h2 dans un panneau latéral semble trop large à 1.953rem, le réduire à 1.5625rem dans ce contexte est une décision légitime. L'échelle vous donne une valeur cohérente par défaut, pas une règle immuable. L'objectif est l'harmonie visuelle, pas la pureté mathématique. Rompez l'échelle quand le contexte l'exige — mais rompez-la de manière consciente, pas parce que vous avez choisi un nombre arrondi.

Assemblage de tout cela

Choisissez une taille de base (souvent 16px), choisissez un rapport qui correspond au poids visuel que vous avez besoin (1.25 pour l'interface, 1.333 pour quelque chose de plus présent, 1.5 pour les contenus d'information), générez l'échelle, et écrivez-la sous forme de propriétés CSS personnalisées. C'est tout. Vos tailles de police ont maintenant une relation mathématique au lieu d'une valeur arbitraire, et tout designer qui regarde votre code comprendra immédiatement le système.

Le Générateur d'échelle modulaire sur IO Tools vous permet de configurer la taille de base, le rapport et le nombre d'étapes — et vous donne l'échelle prête à copier en CSS. Essayez d'ajuster le rapport de 1.25 à 1.333 et voyez à quelle vitesse les tailles des entêtes changent. C'est l'intuition à construire : comprendre ce que chaque rapport sent avant de le fixer dans un système de conception.

Vous aimerez peut-être aussi