ForHosting KIT · Texte et IA

Interligne sur grille de base

Un texte de 16 px avec un ratio de 1,5 sur une grille de 8 px donne un interligne de 24 px : exactement 3 rangs, et chaque ligne repose sur les mêmes rails. Sinon, l'idéal est calé sur un nombre entier de rangs. 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
Grille: 8
Rapport préféré: 1,5

Vous obtenez

Aligner sur la grille: nearest
Interligne idéal: 24
Hauteur de ligne: 24
Rapport: 1,5

Une grille de ligne de base place chaque ligne de texte sur les mêmes rails horizontaux invisibles, afin que paragraphes, légendes et mises en page multi-colonnes partagent un seul rythme vertical du haut de page jusqu'au pied. Les designers et les ingénieurs front-end choisissent une unité de grille —souvent quatre, six ou huit pixels— et veulent un interligne qui soit un multiple exact de cette unité, non un ratio flottant qui dérive d'un demi-pixel à chaque ligne. Ce calculateur d'interligne sur grille de base prend la taille de police, le ratio préféré sans unité et la hauteur de rangée de la grille, puis aligne la boîte de ligne idéale sur le nombre entier de rangées le plus proche (ou le plafond, ou le plancher). Vous obtenez l'interligne ajusté en pixels, le ratio effectif à coller dans le CSS, le nombre de rangées de grille occupées par la ligne, et si la valeur idéale tombait déjà sur la grille.

Comment fonctionne l'alignement de l'interligne sur la grille de base

Partez de la règle familière de l'interligne sans unité : multipliez la taille de police par un ratio préféré tel que un virgule cinq pour obtenir une boîte de ligne idéale dans la même unité que la police (presque toujours des pixels CSS). Ce produit est confortable à lire mais tombe rarement exactement sur votre grille de base. Divisez l'interligne idéal par la hauteur de rangée de la grille pour savoir combien de rangées la ligne veut occuper ; appliquez ensuite un mode d'alignement.

Nearest arrondit au nombre entier de rangées le plus proche, valeur par défaut pour le corps de texte lorsque vous voulez le moindre écart visuel par rapport au ratio préféré. Up (plafond) agrandit toujours la boîte de ligne pour que le texte ne paraisse jamais plus serré que l'idéal —utile pour les notes juridiques ou les lignes longues qui ont besoin d'air—. Down (plancher) réduit vers la grille lorsque vous devez protéger un budget vertical serré, comme la hauteur d'une carte ou une colonne d'impression.

Après l'alignement, multipliez le nombre entier de rangées par l'unité de grille pour obtenir l'interligne final, et divisez par la taille de police pour retrouver le ratio sans unité à placer dans une propriété personnalisée CSS. Au moins une rangée est imposée afin que des entrées pathologiques ne réduisent pas l'interligne à zéro.

Où caler l'interligne sur la grille fait la différence

Les design systems génèrent des échelles d'espacement et de typographie à partir d'une seule constante de grille ; appeler ce calculateur lorsqu'un auteur ajoute une nouvelle taille maintient chaque token d'interligne sur les rails sans tableur. Les pipelines d'impression et PDF qui projettent le CSS sur des grilles de page fixes utilisent la même logique d'alignement pour que les aperçus à l'écran correspondent à la planche. Une validation en échec ne consomme pas de solde.

Gardez des ratios préférés modestes, figez les goldens sur les champs arrondis, et vous obtenez un rythme vertical reproductible pour tokens de design, workers de bordure et générateurs de guides de style sans monter votre propre moteur de mise en page.

Cas d’usage

Génération de design tokens et d'échelles typographiques

Lorsque vous ajoutez une nouvelle taille de police à un design system, alignez son ratio préféré sur la grille de base partagée pour que chaque token d'interligne reste un multiple entier de l'unité de grille.

Mises en page multi-colonnes et cartes

Alignez les boîtes de ligne du corps, des légendes et des titres entre colonnes et cartes empilées en calculant des interlignes ajustés pour chaque taille sur une seule grille.

Rythme vertical pour l'impression et le PDF

Projetez les échelles typographiques d'écran sur une ligne de base d'impression fixe afin que les pipelines CSS vers PDF gardent l'espacement des paragraphes cohérent avec la grille de page.

Questions fréquentes

Quelle est la différence entre nearest, up et down ?

Nearest arrondit la boîte de ligne idéale au nombre entier de rangées le plus proche. Up applique toujours le plafond (interligne plus aéré). Down applique le plancher (plus serré). Le nombre de rangées n'est jamais inférieur à un.

En quoi cela diffère-t-il d'un simple calculateur d'interligne ?

Un calculateur simple multiplie seulement la taille de police par un ratio. Cet outil aligne aussi ce produit sur une grille de base pour un rythme vertical cohérent entre tailles et colonnes.

Quel pas de grille choisir ?

Les designers prennent souvent 4, 6 ou 8 pixels et construisent tout l'espacement à partir de ce nombre. Indiquez le même pas ici : chaque interligne obtenu en sera un multiple exact, au lieu d'un ratio qui dérive d'un demi-pixel par ligne.

Comment savoir si mon ratio tombe déjà sur la grille ?

Le résultat indique quand l'interligne idéal correspond déjà à un nombre entier de rangs. Rien ne change alors : un texte de 16 px à 1,5 sur une grille de 8 px reste à 24 px, trois rangs, avec le même ratio.

Faut-il utiliser la valeur en pixels ou le ratio dans mes styles ?

Les deux gardent le texte sur la grille. Utilisez l'interligne calé en pixels, ou le ratio effectif, c'est-à-dire cette hauteur divisée par la taille de police, si vos styles emploient des interlignes sans unité.

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/str/baseline-grid

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/baseline-grid \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"font_size":16,"grid":8}'

const res = await fetch("https://api.kit.forhosting.com/str/baseline-grid", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "font_size": 16,
    "grid": 8
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/str/baseline-grid",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "font_size": 16,
    "grid": 8
},
)
task_id = res.json()["task_id"]

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

body := bytes.NewBufferString(`{"font_size":16,"grid":8}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/baseline-grid", 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,
  "grid": 8
}

Exemple de réponse

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

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

Comment fonctionne l'alignement de l'interligne sur la grille de base

Lorsque le produit idéal égale déjà un nombre entier de rangées, la réponse marque on_grid true pour que les pipelines de tokens puissent ignorer une réécriture.

Contrat d'entrée, champs de réponse et validation

Corps de dix-huit pixels sur la même grille de huit avec ratio un virgule cinq donne un idéal de vingt-sept, qui s'aligne nearest sur vingt-quatre (trois rangées, ratio d'environ un virgule trois trois) ou up sur trente-deux (quatre rangées) selon le snap. Associez les nombres à votre propre conversion rem si la taille racine diffère ; ce point de terminaison travaille en pixels bruts pour des résultats déterministes entre environnements. Envoyez en POST un corps JSON avec deux nombres finis positifs obligatoires : font_size (pixels CSS du texte que vous dimensionnez) et grid (hauteur de rangée de la ligne de base dans la même unité). Envoyez éventuellement preferred_ratio, valant un virgule cinq s'il est omis, et snap comme nearest, up ou down —les alias round, ceil et floor sont acceptés—. Les champs numériques peuvent arriver en nombres JSON ou en chaînes décimales ; valeurs manquantes, zéro, négatifs, NaN et Infinity échouent avec invalid_input et ne sont pas facturés. En cas de succès, la charge utile répète font_size, grid, preferred_ratio et snap ; indique ideal_line_height avant l'alignement ; renvoie line_height et ratio après l'alignement ; inclut l'entier grid_rows ; positionne on_grid lorsque l'idéal coïncidait déjà avec un multiple de la grille ; et fournit une courte chaîne formula pour la documentation. Exemple : corps de seize pixels sur une grille de huit avec ratio préféré un virgule cinq donne un idéal de vingt-quatre, soit exactement trois rangées, donc line_height reste à vingt-quatre et le ratio à un virgule cinq.

Où une API d'interligne sur grille de base apporte de la valeur

Les bibliothèques de composants qui affichent des articles multi-colonnes, des cartes produit ou des barres latérales de documentation ont besoin de lignes de base alignées entre points de rupture —traiter les tailles de police par lots via l'API produit un tableau stable de ratios alignés pour Storybook et la régression visuelle. Comme l'implémentation est pure parse de niveau A, chaque appel réussi coûte le prix de base publié $0.002 sans jetons de modèle ni réseau sortant.

Questions techniques

Comment calculer un interligne sur grille de base ?

Envoyez font_size et grid positifs (et éventuellement preferred_ratio, défaut 1.5, et snap : nearest, up ou down). L'API renvoie line_height comme multiple entier de la grille et le ratio effectif sans unité.

Quelles unités dois-je utiliser pour font_size et grid ?

Utilisez la même unité pour les deux —en général des pixels CSS—. Le calcul est indépendant de l'unité tant que les deux entrées partagent l'échelle ; la conversion rem dépend de la taille de police racine.

Combien coûte l'outil d'interligne sur grille de base ?

L'outil dans le navigateur est gratuit. Les requêtes API utilisent le solde prépayé KIT à $0.002 par appel réussi ; une entrée invalide n'est pas facturée.

Consulter la documentation complète du KIT →

Lancer gratuitement

Exemple résolu

Comment fonctionne l'alignement de l'interligne sur la grille de base

Où caler l'interligne sur la grille fait la différence

Cas d’usage

Génération de design tokens et d'échelles typographiques

Mises en page multi-colonnes et cartes

Rythme vertical pour l'impression et le PDF

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

Erreurs

Notes techniques

Comment fonctionne l'alignement de l'interligne sur la grille de base

Contrat d'entrée, champs de réponse et validation

Où une API d'interligne sur grille de base apporte de la valeur

Questions techniques

merci