ForHosting KIT · Maison, cuisine et loisirs

Calculateur hauteur de ligne

Un texte de 16 px avec un rapport de 1,5 demande une hauteur de ligne de 24 px. Saisissez une taille de police et un rapport pour obtenir la valeur en pixels d’une mise en page fixe, d’une fiche de design ou d’un modèle d’e-mail. 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

Exemple résolu

Si vous saisissez

Taille de police: 16
Ratio de hauteur de ligne sans unité: 1,5

Vous obtenez

Hauteur de ligne px: 24
Précision: 10

Ce calculateur de hauteur de ligne transforme une taille de police en pixels CSS et un ratio de hauteur de ligne sans unité en la hauteur de ligne résultante en pixels, la valeur exacte que vous fixez pour line-height lorsque vous préférez une pile en pixels absolus plutôt qu'un simple multiplicateur sans unité. Designers et développeurs front-end y ont constamment recours : un corps de texte à seize pixels avec un ratio de un virgule cinq nécessite vingt-quatre pixels de hauteur de ligne ; des titres à dix-huit pixels avec un ratio de un virgule six nécessitent vingt-huit virgule huit pixels. L'identité est entièrement déterministe : la hauteur de ligne en pixels est égale à la taille de police multipliée par le ratio. Il n'y a ni appel réseau, ni échantillonnage, ni raccourci dépendant de la date — uniquement de l'arithmétique finie sur deux scalaires positifs.

Ce que signifie la hauteur de ligne et ce que renvoie ce calculateur

La hauteur de ligne est le rythme vertical du texte : la distance de ligne de base à ligne de base que les navigateurs et les moteurs de mise en page utilisent lors de l'empilement des lignes d'un paragraphe. En CSS, vous pouvez écrire line-height comme un ratio sans unité tel que un virgule cinq, comme un pourcentage, ou comme une longueur absolue en pixels.

De nombreux systèmes de design conservent un ratio sans unité dans la couche de jetons pour l'héritage, puis matérialisent une valeur en pixels absolue lorsqu'ils exportent des maquettes figées, des spécifications Figma, ou des modèles d'e-mail qui ne peuvent pas hériter. Ce calculateur applique le simple produit hauteur de ligne en pixels égale taille de police multipliée par ratio, exactement ce par quoi un line-height sans unité multiplie la taille de police utilisée.

Il n'y a pas de modèle d'interlignage de typographie au plomb, pas de recherche de métriques OpenType, et pas de conversion entre rem et em : ce sont des problèmes distincts. Les ratios non positifs sont de même rejetés afin que le résultat reste une longueur en pixels positive.

Où les hauteurs de ligne en pixels s'inscrivent dans les systèmes de design, le CSS et l'enseignement

Les designers produit convertissent une échelle typographique modulaire en hauteurs de ligne absolues lorsqu'ils livrent des maquettes mobiles, lorsque les clients de messagerie ignorent l'héritage sans unité, ou lorsqu'un export PDF d'impression fige chaque mesure en pixels ou en points. Les enseignants de CSS peuvent montrer qu'un ratio sans unité de un virgule cinq à seize pixels équivaut à vingt-quatre pixels sans dépendre de l'arrondi opaque des DevTools du navigateur.

Les réviseurs d'accessibilité ont parfois besoin d'une vérification rapide que le texte de corps respecte une hauteur de ligne absolue minimale pour la lecture longue, même lorsque le jeton source reste un ratio. Associez-le à des convertisseurs d'unités typographiques lorsque vous avez aussi besoin de px vers em, et gardez à l'esprit que le rendu réel dépend encore des métriques de police, du demi-interlignage et des modèles de boîte une fois que la valeur en pixels quitte ce calculateur.

Cas d’usage

Documentation CSS et de composants

Documentez des exemples Storybook ou de guide de style avec des valeurs de hauteur de ligne en pixels exactes qui correspondent aux ratios sans unité utilisés dans les feuilles de style de production.

Questions fréquentes

Combien coûte le calculateur de hauteur de ligne ?

Il est gratuit dans votre navigateur sur cette page.

Comment la hauteur de ligne est-elle calculée ?

Par exemple, 16 px avec un ratio de 1,5 donne 24 px.

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 une hauteur de ligne utile dans ce modèle.

Cela convertit-il les unités rem ou em ?

Non. La taille de police est interprétée comme des pixels CSS et le ratio est sans unité. Utilisez un convertisseur d'unités dédié si vous avez besoin de rem ou em.

Pourquoi les résultats sont-ils arrondis à une précision donnée ?

La précision par défaut est de 10 décimales ; vous pouvez régler la précision 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

POSThttps://api.kit.forhosting.com/hobby/line-height

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/line-height \
  -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/hobby/line-height", {
  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/hobby/line-height",
    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/hobby/line-height", 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/hobby/line-height", 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": "hobby.line_height",
  "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_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 la hauteur de ligne et ce que renvoie ce calculateur

Vous fournissez une taille de police positive en pixels CSS et un ratio positif sans unité ; le moteur renvoie la taille de police normalisée, le ratio, la hauteur de ligne calculée en pixels, l'étiquette de méthode line_height, la précision utilisée pour l'arrondi, et une brève chaîne de rappel de formule. Les entrées invalides déclenchent invalid_input, y compris une taille de police ou un ratio manquant, des valeurs non finies, des magnitudes au-dessus du plafond documenté, et toute taille de police non positive, car une taille de police nulle ou négative ne peut pas définir une boîte de ligne utile. Le parcours est déterministe, si bien que les mêmes entrées produisent toujours les mêmes nombres arrondis pour les fiches d'exercices, les tests unitaires, les générateurs de jetons de design et les clients d'API qui ne doivent pas inventer d'espacement.

Comment la taille de police et le ratio sont lus, et comment les résultats restent reproductibles

Les signes plus initiaux optionnels et la notation scientifique sur les chaînes numériques sont autorisés lorsqu'ils s'analysent comme des décimaux finis ; les espaces internes, les préfixes hexadécimaux et les jetons non numériques sont rejetés avec un message clair afin qu'une mauvaise cellule ne devienne pas une hauteur de ligne erronée. Le ratio doit également être positif : un multiplicateur de zéro effondrerait la boîte de ligne, et un ratio négatif n'est pas un produit line-height CSS 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 sans unité, mais des alias tels que fontSize, size, fs et px pour la taille, et line_height_ratio, lineHeight, multiplier et lh pour le ratio sont acceptés afin que tableurs, chaînes de requête et formulaires typés puissent réutiliser un même contrat. Les tailles de police nulles et négatives échouent toujours avec invalid_input, conformément à la règle du produit selon laquelle l'arithmétique de la hauteur de ligne n'est pas définie pour une police non positive. Un champ précision optionnel, avec les alias decimals et dp, choisit combien de décimales exposer pour toutes les sorties numériques, avec une valeur par défaut de dix et un plafond de quinze afin que les fichiers de référence JSON restent stables entre environnements d'exécution. Associez l'exécution gratuite dans le navigateur sur cette page à l'API payante lorsque vous avez besoin du résultat mathématique identique au sein d'un pipeline automatisé ou d'une construction de jetons de design sans réimplémenter vous-même la multiplication.

Où les hauteurs de ligne en pixels s'inscrivent dans les systèmes de design, le CSS et l'enseignement

Les ingénieurs front-end utilisent la même arithmétique lorsqu'ils génèrent des propriétés personnalisées CSS à partir d'un fichier JSON de jetons, lorsqu'ils documentent une échelle typographique dans Storybook, ou lorsqu'ils écrivent des tests d'instantané qui attendent une line-height de vingt-quatre pour une taille de corps de texte de seize pixels. Sur cette page, le travail s'exécute entièrement dans votre navigateur ; via l'API, chaque recherche réussie coûte $0.002, la validation échouée n'est pas facturée, et rien n'est stocké après le retour de la réponse. Cette séparation — exploration interactive gratuite et API payante identique — 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

Échelles typographiques en jetons de design

À partir de la taille de police de chaque palier et d'un ratio partagé, matérialisez des pixels de hauteur de ligne absolus pour la livraison Figma, le CSS d'e-mail et les exports JSON de jetons.

Fixtures de CI déterministes

Générez des résultats line_height_px reproductibles pour les tests unitaires, les tests d'instantané et les scripts de build de systèmes de design sans multiplications écrites à la main.

Consulter la documentation complète du KIT →

Lancer gratuitement

Exemple résolu

Ce que signifie la hauteur de ligne et ce que renvoie ce calculateur

Où les hauteurs de ligne en pixels s'inscrivent dans les systèmes de design, le CSS et l'enseignement

Cas d’usage

Documentation CSS et de composants

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

Ce que signifie la hauteur de ligne et ce que renvoie ce calculateur

Comment la taille de police et le ratio sont lus, et comment les résultats restent reproductibles

Où les hauteurs de ligne en pixels s'inscrivent dans les systèmes de design, le CSS et l'enseignement

Cas d'intégration

Échelles typographiques en jetons de design

Fixtures de CI déterministes

merci