ForHosting KIT · Documents et PDF

Générez une échelle typographique pour les titres

Partez d'un texte de 16 px et d'un ratio de 1,25 : les titres montent par paliers, h6 fait 20, h5 fait 25, h4 fait 31,25, et chaque niveau multiplie par le même ratio. Gratuit dans votre navigateur.

Gratuit
Fonctionne dans votre navigateur
Sans inscription
Vos données restent sur votre appareil

Lancer gratuitement Voir l’API

Utilisez-le depuis WebAPIE-mailTelegramApp bientôt

Une échelle typographique transforme une taille de corps et un ratio en une hiérarchie prévisible de titres. Indiquez une taille de base, par exemple 16, et un ratio positif, tel que 1.25 pour une tierce majeure. Le générateur attribue les puissances successives de ce ratio aux niveaux et renvoie une liste ordonnée, exploitable par une machine, à partir de h1. Il facilite la création de jetons CSS, la documentation d’un design system et la vérification d’une hiérarchie mathématiquement cohérente.

Choisissez une base et un ratio adaptés à la lecture

Commencez par la taille du texte courant. Une base de 16 pixels est fréquente sur le Web, sans être universelle : une interface dense peut employer une valeur inférieure, tandis qu’une mise en page éditoriale peut démarrer à 18 ou 20 pixels. Le ratio détermine la vitesse à laquelle les titres s’éloignent de la base.

La valeur 1.125 crée une progression discrète, 1.2 une hiérarchie modérée et 1.25 correspond souvent à une tierce majeure. Les ratios élevés produisent rapidement de grands titres, surtout avec les six niveaux HTML. La capacité accepte tout ratio fini positif.

Avec 1, les tailles restent égales ; sous 1, elles diminuent quand l’exposant augmente. Seuls zéro et les nombres négatifs sont refusés. Conservez la même unité dans votre système.

La réponse indique px par commodité, mais la relation numérique est sans unité. Choisissez vos valeurs selon le contenu réel, la largeur disponible, les métriques de police et les appareils visés, plutôt qu’en fonction du seul nom traditionnel du ratio.

Comprenez le calcul des niveaux de titre

La taille de base constitue l’étape zéro et ne figure pas parmi les titres. Pour six niveaux, h6 reçoit la base multipliée par le ratio à la puissance 1, h5 utilise la puissance 2, puis la suite se poursuit jusqu’à h1 avec la puissance 6. Lorsque le ratio dépasse 1, h1 est donc le plus éloigné du corps, tout en conservant l’ordre de sortie familier h1 à h6.

Pour trois niveaux, la réponse contient h1, h2 et h3 ; h3 utilise la première puissance, h2 la deuxième et h1 la troisième. Chaque ligne fournit le nom, l’exposant et la taille calculée. L’arrondi à six décimales élimine le bruit de virgule flottante tout en gardant assez de précision pour les variables CSS.

Le champ facultatif levels vaut 6 par défaut et doit être un entier compris entre 1 et 6. Les tailles excessives sont refusées avant de devenir infinies ou inutilisables.

Appliquez l’échelle sans confondre taille et structure

Considérez les valeurs comme des propositions de design, pas comme une consigne de choisir les balises selon leur apparence. Les niveaux HTML transmettent la structure du document aux navigateurs, moteurs de recherche et technologies d’assistance ; un h2 doit rester une sous-section de h1 même si un composant l’affiche avec un jeton plus petit. Une méthode pratique consiste à générer l’échelle, copier les tailles dans des jetons sémantiques, puis associer ces jetons aux éléments dans les styles.

Testez la plus grande valeur avec de vrais titres, des écrans mobiles étroits, des traductions, des graisses fortes et diverses métriques de police. Vous pouvez ne retenir qu’une partie de l’échelle, limiter les grandes tailles de façon fluide ou partager une taille entre plusieurs niveaux. Ces adaptations rendent la règle viable dans une mise en page réelle.

Pour faciliter les révisions, archivez ensemble la base, le ratio, le nombre de niveaux et les lignes obtenues.

Cas d’usage

Créer des jetons de design CSS

Générez des tailles reproductibles, puis transférez-les dans des propriétés personnalisées ou votre chaîne de jetons.

Documenter une hiérarchie de marque

Consignez la base et le ratio avec les valeurs h1 à h6 afin que l’équipe reproduise fidèlement la typographie.

Comparer plusieurs échelles

Testez différents ratios positifs avec une même base et comparez la progression des titres d’affichage.

Questions fréquentes

Pourquoi le ratio zéro est-il refusé ?

Zéro ne peut pas former une échelle proportionnelle positive.

Le ratio peut-il être inférieur à un ?

Oui. Tout ratio fini positif est valable. Sous un, les valeurs diminuent lorsque l’exposant augmente.

Combien de niveaux puis-je générer ?

De 1 à 6, selon les titres HTML standard. Si levels est absent, sa valeur par défaut est 6.

Quel ratio choisir pour commencer ?

Un ratio de 1,125 donne une progression retenue, 1,2 une hiérarchie nette mais modérée, et 1,25 la tierce majeure classique. Les ratios plus grands atteignent très vite des tailles spectaculaires avec les six niveaux.

Quel palier de l'échelle reçoit chaque titre ?

Le texte de base est le palier zéro. Le plus petit titre, h6, vaut la base multipliée une fois par le ratio, h5 utilise le ratio au carré, et ainsi de suite jusqu'à h1, à la puissance six.

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

POSThttps://api.kit.forhosting.com/doc/typography-scale-generate

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/doc/typography-scale-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"base_font_size":16,"ratio":1.25}'

const res = await fetch("https://api.kit.forhosting.com/doc/typography-scale-generate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "base_font_size": 16,
    "ratio": 1.25
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/doc/typography-scale-generate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "base_font_size": 16,
    "ratio": 1.25
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/doc/typography-scale-generate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"base_font_size":16,"ratio":1.25}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"base_font_size":16,"ratio":1.25}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/doc/typography-scale-generate", 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_font_size": 16,
  "ratio": 1.25
}

Exemple de réponse

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "doc.typography_scale_generate",
  "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

par requête$0.002

Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.

Limites

`max_mb`	25
`max_pages`	200

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

Comprenez le calcul des niveaux de titre

L’algorithme ne consulte ni réseau, ni horloge, ni source aléatoire : une même entrée renvoie toujours le même JSON. Les alias base et font_size désignent la base, et scale_ratio le ratio.

Appliquez l’échelle sans confondre taille et structure

L’API coûte $0.002 par requête réussie, et le même calcul déterministe fonctionne dans le navigateur. Toute donnée invalide, notamment un ratio non positif, renvoie invalid_input plutôt qu’une échelle partielle.

Questions techniques

Quelle formule le générateur utilise-t-il ?

Chaque taille vaut base_font_size multiplié par ratio élevé à l’exposant indiqué sur sa ligne.

Quel est le prix d’une requête API ?

Une requête réussie coûte $0.002. Une entrée invalide renvoie une erreur au lieu d’une échelle.

Consulter la documentation complète du KIT →

Lancer gratuitement

Choisissez une base et un ratio adaptés à la lecture

Comprenez le calcul des niveaux de titre

Appliquez l’échelle sans confondre taille et structure

Cas d’usage

Créer des jetons de design CSS

Documenter une hiérarchie de marque

Comparer plusieurs échelles

Questions fréquentes

Outils associés

Pour les développeurs — accès API

Endpoint

Appeler depuis votre stack

Exemple de requête

Exemple de réponse

Tarifs

Limites

Erreurs

Notes techniques

Comprenez le calcul des niveaux de titre

Appliquez l’échelle sans confondre taille et structure

Questions techniques

merci