Skip to main content

Générateur d'échelle typographique Générer une échelle typographique modulaire avec une taille de base, un ratio et des unités personnalisables.

Générateur d'échelle typographique illustration
🎨

Générateur d'échelle typographique

Générer une échelle typographique modulaire avec une taille de base, un ratio et des unités personnalisables.

1

Définir la taille de base et le rapport

Choisissez la taille de police de base et un rapport mathématique d'échelle pour la progression.

2

Configurer la sortie

Sélectionnez l'unité (px, rem, em), la hauteur de ligne et le nombre d'étapes d'échelle.

3

Copier les CSS

Prévisualisez l'échelle de type et copiez les propriétés personnalisées CSS.

Loading tool...

What Is Générateur d'échelle typographique?

Le générateur d'échelle de typographie crée un ensemble harmonieux de tailles de police basé sur une ratio mathématique, également connue sous le nom d'échelle modulaire. Une typographie cohérente est fondamentale pour une bonne conception, et les échelles modulaires fournissent des tailles de police qui se rapportent naturellement les unes aux autres par proportion mathématique. Cet outil propose huit ratios d'échelle classiques : la seconde mineure (1,067), la seconde majeure (1,125), la tierce mineure (1,200), la tierce majeure (1,250), la quarte parfaite (1,333), la quarte augmentée (1,414), la quinte parfaite (1,500) et le rapport d'or (1,618). À partir d'une taille de base, chaque étape est multipliée par le ratio choisi. La sortie comprend des propriétés CSS personnalisées nommées (--font-size-xs à --font-size-5xl) dans l'unité de votre choix, ainsi qu'un aperçu visuel montrant chaque taille avec du texte d'exemple.

Why Use Générateur d'échelle typographique?

  • Huit rapports d'échelle mathématiques classiques issus de la théorie musicale et du design
  • Sortie en unités px, rem ou em pour répondre à différents besoins de projet
  • Taille de base, hauteur de ligne et nombre d'étapes ajustables
  • Sortie des propriétés personnalisées CSS pour une intégration facile

Common Use Cases

Typographie du système de design

Établir une échelle de type cohérente comme fondement d'un système de design.

Configuration d'un nouveau projet

Générer des tailles de police harmonieuses lors du lancement de nouveaux projets web.

Mise en page de blog et d'articles

Créer une hiérarchie typographique lisible pour le contenu long-forme.

Typographie responsive

Générer des valeurs d'échelle à utiliser sur différents points de rupture responsives.

Technical Guide

Une échelle de type modulaire utilise une ratio mathématique pour générer une série de valeurs proportionnelles. En partant d'une taille de base (typiquement 16px pour le web), chaque étape est calculée en multipliant par la ratio. Pour une échelle de tierce majeure (1,25) avec une taille de base de 16px : 12,8px, 16px, 20px, 25px, 31,25px, 39,06px. La ratio détermine le contraste entre les tailles - des ratios plus petits (1,067, 1,125) créent des différences subtiles idéales pour le texte du corps, tandis que des ratios plus grands (1,5, 1,618) créent des différences dramatiques adaptées à la typographie d'affichage. Les ratios populaires proviennent de la théorie musicale (tierce mineure, quarte parfaite, quinte parfaite) et des mathématiques (rapport d'or). Pour la mise en œuvre web, définissez les tailles comme des propriétés CSS personnalisées et utilisez-les tout au long de la feuille de style. Les unités rem sont préférées pour l'accessibilité car elles respectent les préférences de taille de police de l'utilisateur. La hauteur de ligne devrait généralement diminuer à mesure que la taille de police augmente - 1,5 pour le texte du corps et 1,1-1,2 pour les titres importants.

Tips & Best Practices

  • 1
    Utilisez Major Third (1,25) ou Perfect Fourth (1,333) pour la plupart des projets web
  • 2
    Utilisez les unités rem pour une typographie accessible et respectueuse des préférences de l'utilisateur
  • 3
    Diminuez la hauteur de ligne pour les titres plus grands (1,1-1,2) et augmentez-la pour le corps (1,5-1,7)
  • 4
    Limitez-vous à 5-7 étapes d'échelle pour une hiérarchie typographique gérable

Related Tools

Frequently Asked Questions

Q Qu'est-ce qu'une échelle modulaire ?
Une échelle modulaire est une série de nombres qui se rapportent les uns aux autres par un rapport mathématique constant, créant ainsi une harmonie visuelle.
Q Quel rapport devrais-je choisir ?
Major Third (1,25) est polyvalent pour la plupart des projets. Utilisez des rapports plus petits pour des hiérarchies subtiles et plus grands pour des contrastes dramatiques.
Q Devrais-je utiliser px ou rem ?
rem est recommandé car il respecte les préférences de taille de police de l'utilisateur, améliorant ainsi l'accessibilité.
Q Combien d'étapes d'échelle ai-je besoin ?
5-7 étapes couvrent la plupart des besoins : xs, sm, base, lg, xl, 2xl, 3xl.
Q Puis-je utiliser différentes échelles pour les appareils mobiles et les ordinateurs de bureau ?
Oui, utilisez des requêtes média pour basculer entre un rapport plus petit sur les appareils mobiles et un rapport plus grand sur les ordinateurs de bureau.

About This Tool

Générateur d'échelle typographique is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.