Générateur d’échelle typographique au nombre d’or

Indiquez une taille de base, choisissez le nombre de degrés supérieurs et inférieurs, puis obtenez une liste déterministe de valeurs arrondies, prête pour vos jetons de design, chartes graphiques ou feuilles CSS. Contrairement à un préréglage fixe de titres, ce générateur vous laisse définir la profondeur de l’échelle et applique le nombre d’or entier entre deux entrées voisines. Vous pouvez conserver l’unité par défaut en pixels ou en fournir une autre sans modifier le calcul sous-jacent.

Construisez l’échelle à partir d’une base pertinente

Commencez par la taille qui structure réellement l’expérience de lecture plutôt que par le plus grand titre. Sur un site web, la base correspond généralement au corps du texte ; dans une présentation, il peut s’agir du texte courant des diapositives ; pour un système imprimé, ce sera éventuellement la taille standard des paragraphes en points. Le générateur considère cette valeur comme le degré zéro. Chaque degré positif la multiplie par phi, soit environ 1.61803399, tandis que chaque degré négatif la divise par ce même rapport. Vous obtenez ainsi une progression cohérente dans les deux directions, dont chaque élément reste mathématiquement lié au point d’ancrage. Définissez steps_up pour choisir combien de valeurs supérieures seront créées et steps_down pour inclure des légendes, notes ou libellés secondaires sous la base. Ces deux paramètres sont limités afin que le résultat demeure pratique et facile à examiner. Avec une base de seize et trois degrés supérieurs, par exemple, les tailles d’affichage gagnent progressivement en présence tout en gardant seize comme centre conceptuel exact. Le champ d’unité sert d’étiquette et non de convertisseur : seize pixels et seize points donnent la même échelle numérique, mais désignent des contextes différents. Cette distinction évite de prétendre convertir sans contexte des unités physiques et numériques sans équivalence directe. Partez d’une taille dont vous connaissez déjà la lisibilité, puis explorez la hiérarchie qui l’entoure.

Lisez, arrondissez et appliquez les valeurs produites

La réponse classe les entrées du plus grand degré demandé au plus petit, ce qui permet de les parcourir directement comme une hiérarchie typographique. Chaque ligne contient le degré signé, la taille numérique, sa forme complétée par l’unité choisie et un rôle simple indiquant si elle est supérieure, égale ou inférieure à la base. Le degré zéro porte toujours le rôle de base. Le champ de formule conserve la règle exacte employée ; il facilite la documentation de l’origine des jetons de design et la vérification ultérieure d’un thème généré. La précision détermine le nombre de décimales de chaque taille. Trois décimales conviennent bien au CSS et à la plupart des outils de création numérique, tandis que des nombres entiers peuvent mieux répondre aux interfaces contraintes ou aux spécifications imprimées qui excluent volontairement les fractions. L’arrondi intervient seulement après le calcul de la puissance, de sorte que les degrés intermédiaires n’accumulent pas d’erreurs. Si deux petites valeurs proches deviennent identiques avec une faible précision, augmentez celle-ci au lieu de modifier manuellement une valeur et de rompre la proportion. Considérez le résultat comme un système initial cohérent sur le plan mathématique, et non comme une obligation d’utiliser chaque taille. Un produit compact peut se limiter à la base et à deux valeurs supérieures, alors qu’un site éditorial pourra exploiter presque toute l’échelle. Transférez les nombres vers des jetons comme font_size_base ou font_size_display et conservez les degrés dans des commentaires afin que les responsables futurs puissent régénérer le système sans deviner l’origine de valeurs isolées.

Conciliez proportion classique et typographie concrète

Le nombre d’or entier crée un contraste marqué, ce qui le rend particulièrement adapté aux mises en page éditoriales expressives, aux identités de marque, aux affiches et aux pages de campagne. Il peut toutefois prendre trop de place lorsqu’une application dense doit réunir de nombreux niveaux successifs. Réduisez le nombre de degrés si le rapport apporte plus de hiérarchie que l’interface n’en demande, et testez les tailles avec la police réelle : hauteur d’œil, graisse, largeur et ajustement optique influencent l’échelle perçue. Les interfaces adaptatives peuvent employer une base différente selon le point de rupture tout en conservant les mêmes affectations de degrés. Elles gardent ainsi une ressemblance entre écrans sans imposer à un téléphone une taille d’affichage prévue pour un ordinateur. L’accessibilité commence toujours par un corps lisible, une longueur de ligne confortable, un interlignage approprié et un contraste suffisant ; un beau rapport ne compense ni une base trop petite ni une police inadaptée. Cet outil calcule uniquement les tailles de caractères et ne détermine ni l’interlignage, ni l’approche, ni les graisses, ni le HTML sémantique. Ces décisions dépendent de la langue, du support, de la police et de la densité du contenu. Pour automatiser le processus, envoyez les mêmes paramètres à l’API pour $0.002 par requête, puis stockez l’échelle avec vos jetons. Comme le calcul n’utilise ni réseau, ni hasard, ni heure courante, deux requêtes identiques renvoient toujours les mêmes valeurs. Le résultat convient donc aux scripts de build, tests d’instantané, générateurs de documentation et audits de systèmes de design où la reproductibilité compte autant que l’harmonie visuelle.