Couleurs & Design

Générateur d'échelle typographique

Générez une échelle de tailles de texte harmonieuse à partir d'une taille de base et d'un ratio, avec export CSS prêt à l'emploi.

Variables CSS

À propos de cet outil

Ce générateur d'échelle typographique calcule une série de tailles de texte cohérentes (des petits libellés aux grands titres) à partir d'une taille de base et d'un ratio, pour garder une hiérarchie visuelle harmonieuse sur tout un site.

Comment utiliser cet outil

  1. Définissez la taille de base (en général 16px pour le corps de texte).
  2. Choisissez un ratio d'échelle (1.125 mineure, 1.25 majeure, 1.333 quarte, etc.).
  3. Visualisez l'aperçu de chaque niveau de l'échelle.
  4. Copiez les variables CSS générées pour votre projet.

Questions fréquentes

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

C'est une série de tailles de texte calculées en multipliant une taille de base par un ratio fixe à chaque niveau, ce qui crée une hiérarchie visuelle cohérente entre titres et corps de texte.

Quel ratio choisir pour mon site ?

Un ratio entre 1.2 et 1.333 convient à la plupart des sites de contenu ; un ratio plus élevé (1.5 et plus) crée des contrastes de taille plus marqués, adaptés aux sites très visuels.

Comment utiliser l'échelle générée dans mon CSS ?

Copiez les variables CSS générées (par exemple --text-lg, --text-xl) et collez-les dans votre feuille de style : chaque niveau est prêt à être utilisé sur vos titres et paragraphes.

Voir aussi