Générateur d’échelle typo modulaire
En partant de 16 px avec un rapport de 1,25, cinq paliers donnent 16, 20, 25, 31,25, 39,0625 et 48,828125. Choisissez trois nombres et obtenez toute une hiérarchie de tailles sans deviner chacune. 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 police de base
- 16
- Ratio d’échelle modulaire
- 1,25
- Nombre de pas
- 5 px
- Tailles
- 16, 20, 25, 31,25, 39,0625, 48,828125
- Nombre de tailles
- 6
Un générateur d’échelle typographique modulaire transforme trois nombres de design — taille de police de base, ratio d’échelle et nombre de pas — en une échelle cohérente de tailles pour titres, corps et légendes. Saisissez une base telle que seize, un ratio tel que un virgule vingt-cinq pour une tierce majeure ou un virgule six cent dix-huit pour le nombre d’or, et le nombre de pas souhaités au-dessus de la base ; l’outil renvoie chaque taille comme base multipliée par le ratio à la puissance n pour n de zéro jusqu’à votre nombre de pas, plus un tableau d’échelle structuré, une chaîne de formule fermée et des pas de substitution ordonnés que vous pouvez affirmer dans des tests ou des design systems. Kits d’interface, chartes de marque, design tokens CSS et exercices de classe ont tous besoin de cette même progression géométrique déterministe sans ouvrir un tableur ni un plugin Figma.
Ce qu’est une échelle typo modulaire et pourquoi le ratio doit dépasser un
Une échelle typographique modulaire est une suite géométrique de tailles de police contrôlée par une seule base et un seul ratio. Si la base est seize et le ratio un virgule vingt-cinq, le pas zéro vaut seize, le un vingt, le deux vingt-cinq, le trois trente et un virgule vingt-cinq, et ainsi de suite — chaque taille est la précédente multipliée par le même ratio.
Les designers choisissent des ratios aux noms musicaux ou classiques : seconde majeure près de un virgule cent vingt-cinq, tierce majeure un virgule vingt-cinq, quarte juste environ un virgule trois cent trente-trois, quinte juste un virgule cinq et nombre d’or près de un virgule six cent dix-huit. La force de la méthode est la retenue : au lieu d’inventer des valeurs de pixel arbitraires du h1 à la légende, vous choisissez trois nombres et héritez d’une hiérarchie qui paraît intentionnelle entre points de rupture et composants.
Le ratio doit être strictement supérieur à un car un ratio de un donne une suite constante où chaque pas égale la base, et un ratio inférieur à un réduit les tailles quand l’indice de pas croît, ce qui inverse la hiérarchie des titres et n’est presque jamais ce qu’une page d’échelle typographique promet.
Le chemin de contrôle recalcule chaque taille par multiplication itérative et le même arrondi à douze décimales que les champs publiés, de sorte qu’une réponse réussie livre toujours des pas que vous pouvez recomposer à la main ou figer dans des tests unitaires.
Conseils pratiques, limites et recherches liées
Les repères d’atelier courants se mémorisent facilement : base seize avec tierce majeure un virgule vingt-cinq sur cinq pas est une échelle familière du corps à l’affichage ; base dix-huit avec nombre d’or sur quatre pas convient aux systèmes d’articles longs ; base quinze avec quarte juste fonctionne bien pour des interfaces d’administration denses. Préférez envoyer des nombres plutôt que des chaînes préformatées lorsque vous contrôlez le client ; les chaînes numériques ne sont acceptées que si elles correspondent à un motif numérique fini strict.
Cette page vise les recherches de générateur d’échelle typographique modulaire, calculateur d’échelle typographique ou outil de ratio et pas de taille de police ; ce n’est ni un convertisseur px-vers-rem, ni un calculateur de clamp fluide, ni un recommandeur d’association de polices. Préférez cette capacité lorsque vous connaissez déjà base, ratio et nombre de pas et n’avez besoin que de l’échelle de tailles ; s’il faut une conversion rem ensuite, convertissez chaque taille publiée avec un outil séparé de police racine.
Les vérifications aller-retour sont directes : recalculez base fois ratio de façon itérative et confirmez que chaque entrée de sizes et scale correspond au même arrondi à douze décimales que le solver.
Cas d’usage
Design tokens pour titres et corps de texte
Les designers saisissent base, ratio et pas une fois, puis copient le tableau sizes dans des variables CSS ou des styles de texte Figma pour une hiérarchie produit cohérente.
Fiches de charte de marque
Les équipes documentent une échelle de tierce majeure ou de nombre d’or avec des chiffres déterministes que étudiants et freelances peuvent recalculer sans plugins propriétaires.
Questions fréquentes
Qu’est-ce qu’une échelle typographique modulaire ?
Une suite géométrique de tailles de police size(n) = base × ratio^n. Une base et un ratio produisent une échelle cohérente pour corps, titres et display.
Pourquoi le ratio doit-il être supérieur à un ?
Un ratio de un garde chaque pas égal à la base ; un ratio inférieur à un réduit les tailles quand les pas augmentent.
Combien de tailles obtient-on pour un nombre de pas donné ?
Cinq pas donnent six tailles en partant de la base.
Dans quelle unité sont les tailles ?
Les tailles sont des nombres purs dans la même unité que votre base (par convention px). La réponse étiquette unit comme px pour la commodité des design tokens ; convertissez en rem si votre système l’exige.
Le générateur d’échelle typographique modulaire est-il gratuit ?
L’outil navigateur est gratuit et s’exécute en local.
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/modular-scale \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"base":16,"ratio":1.25,"steps":5}'const res = await fetch("https://api.kit.forhosting.com/hobby/modular-scale", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"base": 16,
"ratio": 1.25,
"steps": 5
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/hobby/modular-scale",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"base": 16,
"ratio": 1.25,
"steps": 5
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/hobby/modular-scale", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"base":16,"ratio":1.25,"steps":5}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"base":16,"ratio":1.25,"steps":5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/hobby/modular-scale", 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,
"ratio": 1.25,
"steps": 5
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "hobby.modular_scale",
"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.
Limites
max_abs | 1000000000000 |
max_steps | 32 |
min_base | 1e-12 |
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
Lorsque le ratio vaut un ou moins l’échelle ne peut pas croître, aussi l’API renvoie-t-elle une erreur invalid_input claire au lieu d’une liste plate ou décroissante qui briserait la hiérarchie. Le chemin est une arithmétique pure — sans réseau, sans graines aléatoires ni dépendance à l’horloge — de sorte que l’exécuteur gratuit du navigateur et l’API prépayée renvoient le même JSON après un arrondi décimal fixe à chaque appel.
Ce qu’est une échelle typo modulaire et pourquoi le ratio doit dépasser un
Cette capacité rejette donc un ratio de un ou moins avec invalid_input, conforme aux attentes pédagogiques et à l’intention SEO d’un générateur d’échelle typographique modulaire. Des bases positives et un nombre de pas entier non négatif borné gardent les puissances intermédiaires finies en double précision IEEE.
Comment appeler l’API et ce qu’elle renvoie
Base doit être un nombre fini strictement positif dans la limite absolue publiée d’un billion. Ratio doit être un nombre fini strictement supérieur à un et dans la même limite absolue. Envoyez un corps JSON avec trois champs obligatoires : base (alias base_size, font_size et base_font), ratio (alias scale_ratio, modular_ratio et r) et steps (alias step_count, count et n). Steps doit être un entier non négatif de zéro à trente-deux inclus ; la réponse inclut alors step_count plus un tailles couvrant les exposants de zéro à steps. En cas de succès la réponse répète base et ratio arrondis, fixe step_count au nombre entier de pas, sizes au tableau ordonné des tailles de police arrondies, scale à un tableau d’objets chacun avec step et size, size_count à la longueur de sizes, unit à la chaîne px comme libellé conventionnel de design token, formula à la relation fermée taille de n égale base fois ratio à la n pour n de zéro à steps, message à un court résumé en anglais et steps à un parcours ordonné de lignes intermédiaires. Une validation échouée — champs manquants, nombres non finis, base non positive, ratio de un ou moins, steps fractionnaires ou hors plage, ou taille débordée non finie — renvoie invalid_input et n’est jamais facturée. Le tarif est un forfait $0.002 par requête réussie avec unité item et prix unitaire marginal nul.
Conseils pratiques, limites et recherches liées
Gardez base et ratio dans la plage absolue publiée pour que les multiplications successives restent finies sur le Worker et dans le navigateur ; préférez des nombres de pas modestes quand le ratio est grand afin que le plus grand titre n’explose pas au-delà des limites de mise en page. En enseignant ou documentant un design system, couplez un chemin heureux avec un ratio délibéré de un ou zéro virgule neuf pour démontrer le chemin dur invalid_input, et confirmez que les tailles au pas k égalent base fois ratio à la k dans l’arrondi à douze décimales. Les tâches en échec avec invalid_input ne consomment pas le solde prépayé, ce qui maintient les scripts exploratoires peu coûteux lorsque les apprenants sondent délibérément les bords.
Cas d'intégration
Tests unitaires de générateurs de design system
Les développeurs fournissent des triplets base-ratio-pas connus et affirment les lignes sizes et scale contre des fixtures golden en CI sans outils d’interface flottants.