Calculateur typo nombre d'or
Partez d’un texte de 16 px : chaque titre grandit selon la racine carrée du nombre d’or, si bien que le titre 5 tombe exactement sur 16 fois phi. Obtenez légende, texte et six titres aux tailles apparentées. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Taille de base
- 16
- Nombre d'or
- 1,6180339888 px
- Rapport de pas
- 1,2720196495
- Corps
- 16
- Petit
- 12,5784220441
Le nombre d'or est la constante classique phi égale à un plus la racine carrée de cinq, le tout divisé par deux, environ 1.618. Les designers l'utilisent comme échelle modulaire pour que chaque taille typographique paraisse proportionnelle à la suivante au lieu de sauter par pixels arbitraires. Donnez à ce calculateur de tailles au nombre d'or une taille de corps de base positive et il renvoie l'échelle complète des titres de h1 à h6, le corps lui-même, une taille de légende un demi-pas sous le corps, et une interligne corps de base multipliée par phi. Les demi-pas utilisent la racine carrée de phi pour que l'échelle reste utilisable à l'écran tout en restant de la géométrie pure au nombre d'or.
Comment le nombre d'or construit une échelle typo modulaire
Parte d'une seule taille de corps de base, typiquement seize pixels ou un rem dans les kits d'interface contemporains. Le nombre d'or phi se définit exactement comme un plus la racine carrée de cinq, divisé par deux. Une échelle de puissances entières multiplie par phi à chaque pas, ce qui saute trop loin pour six niveaux de titres sur un écran de lecture normal ; ce calculateur utilise donc le demi-pas égal à la racine carrée de phi, environ 1.272.
Le corps reste à base multiplié par step à la puissance zéro. Le titre de niveau six est base multiplié par step à la première puissance, le niveau cinq est base multiplié par step au carré, soit exactement base multiplié par phi, et ainsi de suite jusqu'au titre un à base multiplié par step à la sixième puissance. Un demi-pas sous le corps est la taille small ou légende à base divisé par step.
L'interligne du corps se fixe souvent près de base multiplié par phi car ce rythme vertical reprend le même rapport utilisé horizontalement dans les mises en page classiques. Une base non positive est rejetée car une taille de police nulle ou négative n'est pas une origine modulaire valide et effondrerait ou inverserait l'échelle.
L'unité optionnelle n'est qu'une étiquette comme px, rem, em ou pt ; les nombres ne sont pas convertis entre unités absolues, ce qui garde les maths honnêtes et déterministes pour des design tokens collés dans des propriétés CSS personnalisées.
Où les calculateurs typo au nombre d'or interviennent
Les design systems produit ont constamment besoin d'une rampe typographique cohérente pour que les landing marketing, les réglages d'app et les centres d'aide forment une même famille ; un oracle de confiance qui renvoie chaque titre à côté du corps et du small accélère la rédaction des tokens dans le handoff Figma et les variables CSS.
Les plateformes de blog et les sites de documentation assignent des échelles modulaires lorsque les éditeurs choisissent une taille racine pour l'accessibilité et ont besoin de titres qui dominent encore sans soupe de pixels manuelle. Les chartes de marque et les migrations print-vers-web réutilisent des échelles au nombre d'or pour que affiches, PDF et sites responsives partagent une hiérarchie proportionnelle même si l'unité absolue passe des points au rem.
Les auteurs de cursus de design visuel introduisent le nombre d'or avec des calculateurs en direct pour que les étudiants voient comment phi devient des valeurs rem concrètes et non seulement un schéma de rectangle. Si vous avez ensuite besoin de palettes de couleurs, de grilles d'espacement hors typo, de calculateurs fluides clamp() ou d'alignement optique des marges, traitez-les comme des intentions de recherche et des landings distincts plutôt que de surcharger cette page de calculateur de tailles au nombre d'or.
Cas d’usage
Tokens typographiques de design system
Générez h1–h6, body, small et interligne depuis une taille de base pour que variables CSS et styles de texte Figma restent sur une échelle modulaire dorée.
Guides de style blogs et documentation
Choisissez une taille de corps lisible pour l'accessibilité, puis dérivez des titres proportionnels pour des articles longs sans sauts de pixels arbitraires.
Questions fréquentes
Qu'est-ce qu'une échelle de tailles de police au nombre d'or ?
C'est une échelle typographique modulaire où les tailles se relient par le nombre d'or φ ≈ 1.618 (ou des demi-pas √φ). Depuis une taille de corps de base on multiplie par des puissances successives du step ratio pour obtenir h6 jusqu'à h1.
Quels champs sont obligatoires ?
base (taille de police du corps) est obligatoire et doit être finie et strictement positive. unit est optionnel et vaut px par défaut ; il étiquette les tailles sans convertir entre unités.
Que se passe-t-il si la taille de base est nulle ou négative ?
Une base non positive n'est pas une origine valide pour une échelle typo modulaire et est rejetée plutôt que d'inventer des tailles.
Quel est le coût ?
L'outil navigateur est gratuit et s'exécute en local.
Pourquoi l’échelle utilise-t-elle la racine carrée de phi plutôt que phi ?
Multiplier par phi à chaque palier saute trop loin pour six niveaux de titre sur un écran de lecture ordinaire. Le demi-palier garde des tailles liées, et le titre 5 tombe toujours sur la base fois phi.
Outils associés
Pour les développeurs — accès API
Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.
Endpoint
Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.
Appeler depuis votre stack
curl -X POST https://api.kit.forhosting.com/hobby/golden-ratio-type \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"base":16}'const res = await fetch("https://api.kit.forhosting.com/hobby/golden-ratio-type", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"base": 16
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/hobby/golden-ratio-type",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"base": 16
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/hobby/golden-ratio-type", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"base":16}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"base":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/hobby/golden-ratio-type", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemple de requête
{
"base": 16
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "hobby.golden_ratio_type",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.
Tarifs
Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.
Erreurs
| HTTP | Code | Signification |
|---|---|---|
401 | unauthorized | Clé API absente ou invalide : vérifiez l’en-tête Authorization. |
402 | insufficient_balance | Solde insuffisant : rechargez votre compte pour lancer cette tâche. |
404 | unknown_type | Type de tâche inconnu : vérifiez le champ type de votre requête. |
429 | rate_limited | Trop de requêtes : ralentissez la cadence, puis réessayez. |
Notes techniques
Bases nulles, négatives, manquantes, NaN et Infinity échouent avec invalid_input clair pour qu'une échelle cassée n'atteigne jamais le CSS.
Comment le nombre d'or construit une échelle typo modulaire
Le pipeline est de l'arithmétique flottante pure sans réseau, sans graines aléatoires ni horodatages d'horloge, de sorte qu'une même base et unité produisent toujours le même JSON.
Ce que vous envoyez et ce que vous recevez
Envoyez base comme nombre fini positif pour la taille de police du corps. Envoyez éventuellement unit comme courte étiquette comme px ou rem ; la valeur par défaut est px et n'annote que les libellés, sans convertir les magnitudes. Contrôles classiques : base seize pixels donne body seize, h5 égal à seize multiplié par phi, et h1 égal à seize multiplié par step à la sixième ; base un rem pour les design systems relatifs à la racine ; et base dix-huit pour des corps éditoriaux un peu plus grands. Les alias incluent base_size, font_size, size, body, body_size et base_font. Base manquante, chaînes non numériques, NaN, Infinity, zéro et valeurs négatives échouent avec invalid_input et ne sont pas facturés. En cas de succès la réponse renvoie base et unit nettoyés, les constantes exactes golden_ratio et step_ratio, les tailles body et small, un objet headings avec h1 à h6, des champs plats h1 à h6 pour clients simples, line_height et line_height_ratio, un tableau scale de lignes rôle taille exposant et libellé de h1 jusqu'à small, des libellés lisibles pour chaque rôle, plus le texte formula et method golden_ratio_type pour que les tests affirment l'algorithme. Le prix des appels API réussis est la base publiée de $0.002 par élément ; les échecs de validation ne consomment pas le solde prépayé.
Où les calculateurs typo au nombre d'or interviennent
Les ingénieurs front-end qui écrivent des paquets de thème veulent un JSON déterministe à figer en CI plutôt que de juger à l'œil des captures navigateur pour chaque base. Comme cette capacité est un moteur parse pur, le tarif API est la base publiée de $0.002 par élément réussi et une validation échouée ne consomme pas le solde.
Cas d'intégration
Paquets de thème et fixtures CI
Produisez en masse des rampes typo déterministes pour plusieurs bases et figez le JSON dans des tests de régression avant de livrer un thème.
Questions techniques
Comment h1–h6 se relient-ils à la base ?
Avec step = √φ, le titre h_k vaut base × step^(7−k). Ainsi h6 est un demi-pas au-dessus du corps, h5 vaut base × φ, et h1 est six demi-pas au-dessus du corps.