Interlignage depuis taille et ratio
Un texte de 16 px avec un ratio de 1,5 demande 24 px d'une ligne de base à la suivante. Vous obtenez aussi l'espace qui dépasse la taille du caractère et sa moitié, prêts pour des maquettes, des e-mails et des cahiers des charges d'impression. 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
- 16
- Rapport
- 1,5
- Interligne (px)
- 24
- Interligne supplémentaire (px)
- 8
- Demi-interligne (px)
- 4
- Précision
- 10
Ce calculateur d'interlignage (leading) transforme une taille de police en pixels CSS et un ratio unitless de line-height en espacement exact de bas de ligne à bas de ligne en pixels—la mesure typographique classique appelée leading—avec l'interlignage extra et le half-leading pour le calcul de mise en page. Designers et développeurs front-end y recourent souvent : un corps à seize pixels avec un ratio de un virgule cinq nécessite vingt-quatre pixels d'interlignage ; des titres à dix-huit pixels avec un ratio de un virgule six en nécessitent vingt-huit virgule huit. L'identité est pleinement déterministe : l'interlignage en pixels égale la taille de police multipliée par le ratio, l'extra est cet interlignage moins la taille de police, et le half-leading est la moitié de cet extra. Aucun appel réseau, aucun échantillonnage, aucun raccourci dépendant de la date : seulement de l'arithmétique finie sur deux scalaires positifs.
Ce que signifie l'interlignage et ce que renvoie ce calculateur
L'interlignage (leading) est le rythme vertical du texte : la distance d'un bas de ligne au suivant qu'imprimeurs, moteurs de mise en page et boîtes de ligne CSS utilisent en empilant les lignes d'un paragraphe. Le terme vient des bandes de plomb placées autrefois entre les caractères de métal ; en design numérique la même idée s'écrit souvent line-height, mais de nombreux briefs, guides éditoriaux et manuels de typographie demandent encore l'interlignage en unités absolues.
Vous pouvez conserver un ratio sans unité dans une couche de jetons pour l'héritage, puis matérialiser une valeur absolue en pixels à l'export de maquettes fixes, de spécifications Figma, de modèles d'e-mail ou de PDF d'impression qui ne peuvent pas hériter. Ce calculateur implémente l'interlignage en pixels égal à la taille de police multipliée par le ratio, exactement ce qu'un line-height unitless multiplie par la taille de police utilisée.
Il signale aussi l'interlignage extra—l'espace au-delà du corps, interlignage moins taille de police—et le half-leading, la moitié de cet extra, comme de nombreux moteurs répartissent l'espace au-dessus et au-dessous des glyphes dans la boîte de ligne. Pas de consultation de métriques OpenType, ni de conversion rem ou em, ni d'analyse de fichiers de police : ce sont d'autres problèmes.
Où l'interlignage en pixels s'inscrit dans les design systems, le CSS et l'enseignement
Les designers produit convertissent une échelle typographique modulaire en interlignage absolu lors de la livraison de maquettes mobiles, lorsque les clients de messagerie ignorent l'héritage unitless, ou lorsqu'un export PDF d'impression fige chaque mesure en pixels ou points. Les enseignants de typographie et de fondamentaux CSS peuvent montrer qu'un ratio unitless de un virgule cinq à seize pixels égale vingt-quatre pixels d'espacement entre bas de ligne, avec huit d'extra et quatre de half-leading, sans s'appuyer sur des arrondis opaques des DevTools du navigateur.
Les relecteurs d'accessibilité ont parfois besoin d'une vérification rapide que le corps respecte un espacement absolu minimal pour une lecture longue, même si le jeton source reste un ratio. Les équipes éditoriales et d'impression qui spécifient encore l'interlignage au sens traditionnel obtiennent les mêmes nombres que les produits line-height CSS lorsque le ratio est appliqué de la même façon.
Associez-le à des convertisseurs d'unités typographiques lorsque vous avez aussi besoin de px vers em ou rem, et gardez à l'esprit que le rendu réel dépend encore des métriques de police et du modèle de boîtes une fois la valeur en pixels sortie de ce calculateur.
Cas d’usage
Documentation CSS et composants
Documentez des exemples Storybook ou de guide de style avec des valeurs exactes d'interlignage en px qui correspondent aux ratios unitless utilisés dans les feuilles de style de production.
Questions fréquentes
Combien coûte le calculateur d'interlignage ?
Il est gratuit dans votre navigateur sur cette page.
Comment l'interlignage est-il calculé ?
Par exemple, 16 px au ratio 1.5 donne 24 px d'interlignage, 8 px d'extra et 4 px de half-leading.
Que se passe-t-il si la taille de police est nulle ou négative ?
Une taille de police non positive ne peut pas définir un interlignage utile dans ce modèle.
L'interlignage est-il la même chose que le line-height CSS ?
Cet outil signale aussi extra et half-leading pour la mise en page.
Pourquoi les résultats sont-ils arrondis à une précision ?
La précision par défaut est 10 décimales ; vous pouvez fixer precision de 0 à 15.
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/str/leading-from-ratio \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"font_size":16,"ratio":1.5}'const res = await fetch("https://api.kit.forhosting.com/str/leading-from-ratio", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"font_size": 16,
"ratio": 1.5
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/str/leading-from-ratio",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"font_size": 16,
"ratio": 1.5
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/leading-from-ratio", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"font_size":16,"ratio":1.5}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"font_size":16,"ratio":1.5}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/leading-from-ratio", 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
{
"font_size": 16,
"ratio": 1.5
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "str.leading_from_ratio",
"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_value | 1000000000000000 |
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
Ce que signifie l'interlignage et ce que renvoie ce calculateur
Vous fournissez une taille de police positive en pixels CSS et un ratio unitless positif ; le moteur renvoie la taille normalisée, le ratio, leading_px, extra_leading_px, half_leading_px, l'étiquette de méthode leading_from_ratio, la précision d'arrondi et une courte chaîne de formule. Les entrées invalides lèvent invalid_input, y compris taille ou ratio manquants, valeurs non finies, magnitudes au-dessus du plafond documenté, et toute taille ou ratio non positif, car un corps nul ou négatif ne définit pas de boîte de ligne utile. Le chemin est déterministe, de sorte que les mêmes entrées produisent toujours les mêmes nombres arrondis pour tableurs, tests unitaires, générateurs de jetons et consommateurs d'API qui ne doivent pas inventer l'espacement.
Comment la taille et le ratio sont lus et comment les résultats restent reproductibles
Signes plus optionnels et notation scientifique sur chaînes numériques sont autorisés lorsqu'ils s'interprètent comme décimales finies ; espaces embarqués, préfixes hexadécimaux et jetons non numériques sont rejetés avec un message clair pour qu'une mauvaise cellule ne devienne pas un mauvais interlignage. Le ratio doit aussi être positif : un multiplicateur nul effondrerait la boîte de ligne, et un ratio négatif n'est pas un produit d'interlignage valide dans ce modèle. Les noms de champs préférés sont font_size pour la taille en pixels CSS et ratio pour le multiplicateur unitless, mais des alias tels que fontSize, size, fs et px pour la taille, et line_height_ratio, lineHeight, multiplier, lh et leading_ratio pour le ratio sont acceptés afin que tableurs, chaînes de requête et formulaires typés réutilisent un seul contrat. Tailles de police nulles ou négatives échouent toujours avec invalid_input, selon la règle produit selon laquelle l'arithmétique d'interlignage est indéfinie pour un corps non positif. Un champ optionnel precision, avec les alias decimals et dp, choisit combien de décimales exposer pour toutes les sorties numériques, par défaut dix et plafonné à quinze afin que les goldens JSON restent stables entre runtimes. Associez l'exécution gratuite dans le navigateur de cette page à l'API payante lorsque vous avez besoin du même résultat mathématique dans un pipeline automatisé ou un build de jetons de design sans réimplémenter la multiplication vous-même.
Où l'interlignage en pixels s'inscrit dans les design systems, le CSS et l'enseignement
Les ingénieurs front-end utilisent la même arithmétique pour générer des propriétés personnalisées CSS depuis un JSON de jetons, documenter une rampe typographique dans Storybook, ou écrire des tests de snapshot qui attendent un interlignage de vingt-quatre pour un corps de seize pixels avec un ratio de un virgule cinq. Sur cette page le travail s'exécute entièrement dans votre navigateur ; via l'API chaque consultation réussie coûte $0.002, la validation échouée n'est pas facturée et rien n'est stocké après la réponse. Ce partage—exploration interactive gratuite et API identique payante—correspond au reste du catalogue KIT de niveau A et vous permet de passer d'une critique de design à un pipeline de jetons automatisé sans changer le résultat mathématique.
Cas d'intégration
Rampes typographiques de jetons de design
À partir de la taille de police de chaque palier et d'un ratio partagé, matérialisez l'interlignage absolu en pixels plus extra et half-leading pour la livraison Figma, le CSS d'e-mail et les exports JSON de jetons.
Fixtures CI déterministes
Générez des résultats leading_px reproductibles pour tests unitaires, snapshots et scripts de build du design system sans multiplications écrites à la main.