Échelle typographique

Ce qu'est une échelle typographique

Une échelle typographique est un ensemble défini de tailles de police reliées entre elles par un ratio constant. Au lieu de choisir des tailles au hasard, vous choisissez une taille de base et générez le reste à partir d'elle, si bien que titres, sous-titres, corps de texte et légendes forment une progression délibérée. L'échelle est ce qui rend le texte d'une page harmonieux plutôt qu'arbitraire.

L'idée emprunte à la musique, où les notes sonnent agréablement parce que leurs fréquences sont reliées par des ratios fixes. La typographie se comporte de même : des tailles qui partagent une relation mathématique paraissent équilibrées ensemble, tandis qu'un fouillis de tailles sans lien paraît bruyant. Une échelle remplace le tâtonnement par un petit système qui garde chaque texte en proportion.

Comment fonctionne une échelle typographique

Une échelle commence par deux décisions : une taille de base, en général le corps de texte, et un ratio qui multiplie vers le haut et divise vers le bas. Les ratios courants viennent de proportions classiques, et chacun produit un caractère différent.

• Taille de base : la taille du corps de texte à laquelle tout le reste se mesure, souvent autour de seize pixels sur le web.
• Ratio : le multiplicateur entre les pas, comme 1,25 pour une échelle douce ou 1,5 pour une échelle marquée.
• Pas : chaque taille successive, donnant h1, h2, h3, corps et petit texte.
• Hauteur de ligne : l'espacement vertical associé à chaque taille pour garder le texte lisible.

Un ratio plus petit produit un jeu de tailles subtil et resserré, adapté aux interfaces denses et riches en information. Un ratio plus grand produit un contraste fort entre un grand titre et un petit corps, adapté aux pages marketing expressives. Choisir le ratio, c'est choisir la personnalité de la typographie.

Pourquoi une échelle compte

Le premier bénéfice est la hiérarchie. Des différences de taille claires indiquent au lecteur quoi regarder en premier, guidant l'œil du titre au sous-titre puis au corps sans effort conscient. Une page sans échelle force le lecteur à deviner lui-même la structure, ce qui est précisément la friction que le bon design supprime.

Le deuxième bénéfice est la cohérence. Quand chaque taille provient de la même échelle, le texte sur des dizaines de pages paraît un seul système cohérent plutôt qu'une série de choix ponctuels. C'est ce qui sépare un site conçu d'un document où chaque titre a été dimensionné par celui qui l'a écrit.

Une échelle accélère aussi le travail. Une fois les pas définis, dimensionner un texte revient à choisir un niveau, pas à inventer un nombre. Cela supprime une décision récurrente et évite la lente dérive vers des dizaines de tailles légèrement différentes qui rend un code difficile à maintenir.

Échelles typographiques et responsive design

Le texte ne peut pas avoir une taille fixe partout. Un titre qui paraît imposant sur un ordinateur peut écraser un écran de téléphone, donc les échelles s'adaptent selon l'appareil. L'approche traditionnelle change les tailles aux points de rupture, réduisant un titre sur les petits écrans. Une approche plus moderne utilise la typographie fluide, où les tailles évoluent en douceur avec la fenêtre grâce à des fonctions CSS, si bien que le texte paraît juste à chaque largeur sans sauts brusques.

Quelle que soit la méthode, l'échelle reste l'ancre. Vous ne choisissez pas de nouvelles tailles sur mobile, vous exprimez la même hiérarchie à une taille qui convient à l'écran. L'accessibilité compte aussi : respecter une taille minimale lisible et utiliser des unités relatives pour que les utilisateurs puissent agrandir le texte garde une échelle utilisable par tous, pas seulement par ceux qui ont une vue parfaite.

Échelles typographiques dans les tokens et outils no-code

Dans un flux moderne, l'échelle est stockée sous forme de design tokens : chaque pas devient une variable nommée comme text-lg ou heading-1, appliquée par référence dans tout le produit. Cela signifie que l'échelle peut être ajustée à un seul endroit, et qu'elle reste parfaitement cohérente parce que personne ne saisit de tailles brutes. C'est le même principe de token qui gouverne la couleur et l'espacement, appliqué à la typographie.

Les outils no-code le prennent en charge directement. Webflow permet de définir des styles de texte et des variables pour qu'une échelle s'applique à l'échelle du site et se change globalement, et les styles de texte de Figma font de même en design, gardant la maquette et le build synchronisés. L'erreur courante est de contourner l'échelle pour ajuster une seule taille sur un composant, ce qui érode discrètement le système. La discipline consiste à ajouter un pas à l'échelle si vous en avez vraiment besoin, plutôt que de parsemer des exceptions imprévisibles pour les autres.

Les échelles typographiques chez BeBranded

Chez BeBranded, nous définissons une échelle typographique au début de chaque projet, car une typographie cohérente est l'un des signaux les plus clairs d'un site professionnel. Nous choisissons une taille de base et un ratio adaptés à la marque, générons les pas pour les titres et le corps, et les stockons en styles de texte et variables dans Figma et Webflow afin qu'ils restent identiques sur chaque page. Nous rendons l'échelle responsive, en ajustant les tailles pour les petits écrans tout en gardant la même hiérarchie, et nous respectons des minimums lisibles pour que le texte fonctionne pour chaque visiteur. Parce que l'échelle vit sous forme de tokens, l'affiner plus tard est un seul changement plutôt qu'une édition page par page. Le résultat est un texte qui se lit clairement, guide l'œil et paraît faire partie d'un système cohérent, du premier titre à la plus petite légende.