Aller au contenu
EN

Générateur d'échelle typographique

Calculez une échelle de tailles de texte harmonieuse (tierce, quarte, nombre d'or) et des tailles fluides avec clamp(). Export CSS, Tailwind et SCSS.

  • Gratuit
  • Sans inscription
  • Aucun fichier envoyé
  • Windows, Mac, Android, iPhone

Chargement de l'outil…

À propos de cet outil

Construisez une hiérarchie de textes cohérente : taille de base, rapport musical (de la seconde mineure au nombre d'or), nombre de tailles au-dessus et en dessous, et option de typographie fluide avec deux échelles (mobile et grand écran) reliées par clamp(). Aperçu dans la police de votre choix, export en variables CSS, Tailwind ou SCSS.

Dans quels cas l'utiliser ?

Démarrer un design system

Une échelle fixe les tailles autorisées (sm, base, lg, xl…) : toute l'équipe utilise les mêmes, la page reste cohérente.

Titres adaptés au mobile

Avec la typographie fluide, un titre de 28 px sur téléphone atteint 48 px sur grand écran, sans aucune media query.

Rendre un site plus lisible

Remplacer des tailles choisies au hasard par une échelle régulière améliore immédiatement la hiérarchie visuelle.

Mode d'emploi

  1. Choisissez la taille de base et le rapport de l'échelle.
  2. Activez la typographie fluide pour des tailles qui suivent l'écran.
  3. Copiez les variables CSS, la configuration Tailwind ou SCSS.

Comment ça marche

Chaque taille vaut base × rapport^n, n allant des tailles inférieures (sm, xs) aux supérieures (lg, xl, 2xl…). Les noms suivent ceux de Tailwind CSS.

En mode fluide, deux échelles sont calculées (mobile et grand écran). Pour chaque taille, l'outil cherche la droite qui passe par la taille mobile à la largeur minimale et par la taille large à la largeur maximale, et l'écrit sous la forme clamp(min, a rem + b vw, max).

Conseils pour un bon résultat

  • Un rapport plus petit sur mobile et plus grand sur ordinateur évite les titres démesurés sur téléphone.
  • Gardez le texte courant à 16 px minimum ; 17 ou 18 px sont plus confortables pour les longs articles.
  • Limitez-vous à 5 ou 6 tailles réellement utilisées.
  • Ajustez l'interligne : plus serré pour les grands titres (1,1 à 1,2), plus aéré pour le texte (1,5 à 1,7).

Problèmes fréquents et solutions

Les titres sont énormes sur ordinateur

Le rapport est trop grand : choisissez une tierce ou une quarte, ou réduisez le nombre de tailles.

La taille fluide ne change pas

Vérifiez que la page n'est pas zoomée et que la largeur de l'écran est entre les deux bornes choisies.

Les valeurs ont beaucoup de décimales

C'est normal pour une échelle : arrondir change la proportion. Les navigateurs gèrent très bien les tailles décimales.

Questions fréquentes

Qu'est-ce qu'une échelle typographique ?

Une suite de tailles de texte obtenues en multipliant une taille de base par un même rapport : 16 px × 1,25 = 20 px, × 1,25 = 25 px… Les titres et le texte paraissent ainsi en harmonie.

Quel rapport choisir ?

1,2 (tierce mineure) ou 1,25 (tierce majeure) pour les interfaces et les sites riches en texte ; 1,333 à 1,618 pour des titres très contrastés sur un site éditorial ou une page d'accueil.

Qu'est-ce que la typographie fluide ?

Chaque taille grandit progressivement entre une largeur d'écran mobile et une largeur d'écran large, grâce à clamp(). Plus besoin de media queries pour les titres.

Pourquoi des rem ?

Les rem suivent la taille de police choisie par le visiteur dans son navigateur : votre site reste lisible pour ceux qui l'ont agrandie.

Recherches associées

Toujours bloqué ?

Posez votre question sur le forum : la catégorie, l'outil, la fiche de votre appareil et le résultat du test seront déjà remplis.