Générez une échelle typographique modulaire harmonieuse avec le nombre d'or, la tierce majeure et d'autres ratios classiques. Prévisualisez les tailles et copiez le CSS complet.
Une échelle typographique est un ensemble de tailles de police qui suivent un rapport mathématique cohérent. Au lieu de choisir les tailles au hasard, chaque étape est multipliée par le même rapport, créant ainsi un rythme visuel et une hiérarchie entre les titres, le corps du texte et les légendes.
Choisissez une taille de base (16 px est la valeur par défaut du navigateur et un point de départ solide), puis choisissez un rapport. Des ratios plus petits comme 1,125 créent des échelles subtiles et élégantes pour les sites éditoriaux ; des ratios plus élevés comme 1,618 créent un contraste spectaculaire pour les pages marketing.
Une échelle typographique est un ensemble fixe de tailles de police suivant une même proportion mathématique, si bien que chaque palier se relie au suivant par le même rapport. Au lieu de choisir des tailles à l'œil — 14, 17, 22, 31... — vous choisissez une taille de base et la multipliez (ou divisez) par le rapport, encore et encore : 16 × 1,25 = 20, × 1,25 = 25, etc. Le résultat est une hiérarchie qui paraît intentionnelle : titres, corps, légendes et libellés semblent membres du même système de design, pas un tas de tailles jetées au hasard.
Les rapports courants se comportent différemment. 1,125 et 1,2 créent des paliers subtils et élégants — idéaux pour les interfaces denses en texte. 1,25 et 1,333 sont les chevaux de trait du web : une hiérarchie perceptible sans drame, et 1,333 est justement la quarte juste de la musique classique. 1,5 produit des sauts audacieux pour les sites de contenu. 1,618 — le nombre d'or — est frappant mais agressif : magnifique pour les titres d'affichage et les pages marketing, souvent excessif pour la lecture longue.
16px est la valeur par défaut des navigateurs et le bon point de départ pour le corps sur ordinateur : il égale le confort de lecture des livres imprimés, reste lisible pour la plupart des gens et suit les recommandations d'accessibilité. Les interfaces mobiles peuvent démarrer un peu plus bas (15px) ou rester à 16px. Une fois la base fixée, tout le reste en découle — titres en multipliant vers le haut, légendes et libellés en divisant vers le bas — un seul changement de base réaccorde toute la hiérarchie de façon cohérente.
Une échelle, c'est plus que des tailles de police. L'interligne doit grandir quand le texte rapetisse : 1,5–1,6 pour le corps, 1,2–1,4 pour les titres. Pour le rythme vertical, multipliez la taille de base par le rapport de l'échelle pour bâtir les paliers d'espacement — si votre échelle est 16/20/25/31, ces mêmes nombres servent d'incréments de marges et de paddings. Quand tailles et espacements partagent un rapport, chaque élément s'aligne sur une grille invisible et la page paraît composée plutôt qu'assemblée.
Le texte doit évoluer fluidement entre mobile et ordinateur. Le CSS moderne règle cela en une ligne : font-size: clamp(1rem, 0.7rem + 1.2vw, 1.75rem) — un minimum, un milieu fluide, un maximum. Prenez le minimum et le maximum dans votre échelle (par exemple 16px à 28px) et le terme de viewport fait le reste : les titres rétrécissent avec élégance sur mobile et grandissent sur écran, sans une seule media query.
Du bleu de France au rouge coquelicot, la palette française puise dans la mode, l'art et le patrimoine. Des couleurs élégantes et raffinées qui ont marqué l'histoire du design mondial.
Le bleu national utilisé depuis les rois capétiens
Le rouge éclatant des champs de coquelicots
La couleur emblématique des bijoux et de la joaillerie
Pigment historique des peintres depuis la Renaissance
Le rose sucré de la confiserie et de la mode
Le bleu royal des armoiries et de Versailles
Le rouge sombre des vins de la région bordelaise
L'élégance discrète des intérieurs parisiens
Les champs de Provence en été
La douceur des façades haussmanniennes