Interligne CSS conseillé selon la taille et le type de texte
Un texte courant de 16 px reçoit un interligne de 1,5, soit 24 px, tandis que les titres utilisent 1,2 et les légendes 1,4 : indiquez la taille de police et le type de texte, puis copiez une valeur de départ. 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
- Type de contenu
- Body text
- Taille de police (px)
- 16
- Rapport recommandé
- 1,5
- Hauteur de ligne (px)
- 24
- Css
- line-height: 24px;
Cet outil transforme une taille de police et un rôle typographique en un point de départ pratique pour l’interligne CSS. Vous choisissez texte courant, titre ou légende ; il applique alors un ratio usuel et renvoie à la fois la valeur sans unité et son équivalent en pixels. Il convient aux maquettes qui possèdent déjà une échelle de tailles, mais pas encore de jetons de rythme vertical. Le résultat est déterministe, facile à copier dans CSS et constitue un conseil plutôt qu’un réglage universel.
Choisissez le rôle du contenu avant son espacement
L’interligne doit dépendre de la façon dont le texte est lu et non répéter un multiplicateur unique dans toute l’interface. Le texte courant s’étend souvent sur plusieurs lignes : un ratio de 1.5 facilite le passage de la fin d’une ligne au début de la suivante. Les titres sont généralement plus grands, plus courts et limités à une ou deux lignes ; le ratio resserré de 1.2 préserve leur unité visuelle.
Les légendes sont petites mais brèves, et 1.4 leur donne assez d’air sans concurrencer les éléments voisins. Tout autre type inconnu déclenche une erreur au lieu d’appliquer une valeur silencieuse. Cette rigueur permet de corriger une faute dans un pipeline de jetons à sa source.
Ces ratios sont des bases issues d’usages typographiques fréquents ; vous pouvez les affiner après avoir examiné la police et la mise en page réelles.
Interprétez le ratio et la valeur en pixels
La recommandation multiplie la taille positive en pixels CSS par le ratio fixe du rôle choisi. Un corps de 16 pixels avec 1.5 donne 24 pixels ; un titre de 32 pixels avec 1.2 donne 38.4 pixels. En production, le ratio sans unité est souvent préférable, car il suit proportionnellement les changements de taille des descendants.
La valeur en pixels reste utile pour les spécifications fixes, la livraison de maquettes, le contrôle visuel, les courriels et les jetons exigeant des longueurs explicites. Les résultats sont arrondis à quatre décimales afin de conserver les fractions utiles sans bruit numérique. Une valeur absente, nulle, négative, infinie ou non numérique produit une erreur.
Le nombre décrit la boîte de ligne, pas la hauteur visible des glyphes. Chaque police répartit différemment hampes, jambages et espace interne ; examinez donc le rendu réel avant de figer un jeton.
Testez la recommandation dans la mise en page réelle
Après le calcul, appliquez la valeur dans son contexte final et testez du contenu représentatif plutôt qu’une seule phrase idéale. Pour le corps, utilisez plusieurs paragraphes, des liens longs, des emphases, des nombres et des largeurs mobiles. Vérifiez que la lecture passe facilement d’une ligne à l’autre et que le paragraphe reste cohérent.
Pour les titres, essayez le libellé plausible le plus long à chaque point de rupture. Le ratio 1.2 forme souvent un bloc solide, mais une police aux accents hauts ou un titre sur trois lignes peut demander davantage d’espace. Pour les légendes, contrôlez les cartes denses, crédits, notes de tableau et chaînes localisées.
Vérifiez également le zoom et les polices de substitution. Inscrivez les ajustements comme jetons volontaires plutôt que comme exceptions CSS dispersées. Cette capacité ne mesure ni métriques de police, ni longueur de ligne, ni langue, graisse ou moteur de rendu ; elle ne remplace donc pas une revue visuelle et d’accessibilité.
Elle fournit un départ cohérent, explicable et reproductible.
Cas d’usage
Démarrer une échelle typographique
Transformez les tailles choisies en premiers jetons d’interligne pour le corps, les titres et les légendes avant les réglages visuels.
Produire une documentation de conception
Créez des ratios, pixels et déclarations CSS cohérents pour une bibliothèque de composants ou une livraison.
Valider les rôles typographiques
Rejetez les rôles inconnus dans une automatisation au lieu d’appliquer silencieusement un espacement par défaut.
Questions fréquentes
Quels ratios l’outil recommande-t-il ?
Il utilise 1.5 pour le texte courant, 1.2 pour les titres et 1.4 pour les légendes.
Faut-il utiliser le ratio ou les pixels dans CSS ?
Le ratio sans unité s’hérite généralement mieux ; les pixels conviennent aux spécifications fixes et aux livraisons.
Le résultat garantit-il l’accessibilité du texte ?
Non. Il s’agit d’un point de départ ; vous devez tester la police, la largeur, la mise en page, le zoom et le contenu réels.
Quel interligne choisir pour un texte de 16 px ?
Un interligne de 1,5, soit 24 px. Le texte courant s’étend sur plusieurs lignes, et cet espace supplémentaire aide l’œil à passer de la fin d’une ligne au début de la suivante.
Pourquoi les titres ont-ils un interligne plus serré que les paragraphes ?
Parce qu’ils sont plus grands, plus courts et tiennent souvent sur une ou deux lignes. Le ratio de 1,2 garde un titre coupé bien uni : un titre de 32 px reçoit 38,4 px.
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/doc/line-height-recommend \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"font_size":16,"content_type":"body_text"}'const res = await fetch("https://api.kit.forhosting.com/doc/line-height-recommend", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"font_size": 16,
"content_type": "body_text"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/doc/line-height-recommend",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"font_size": 16,
"content_type": "body_text"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/doc/line-height-recommend", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"font_size":16,"content_type":"body_text"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"font_size":16,"content_type":"body_text"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/doc/line-height-recommend", 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,
"content_type": "body_text"
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "doc.line_height_recommend",
"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_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
Utilisez-le dans le navigateur ou appelez l’API pour $0.002 par requête.
Choisissez le rôle du contenu avant son espacement
Sélectionnez body_text pour les paragraphes, articles et descriptions, heading pour les titres et en-têtes de section, et caption pour les notes d’image, crédits et annotations secondaires. L’expression body text est normalisée en body_text.
Interprétez le ratio et la valeur en pixels
La réponse comprend la taille normalisée, le type, le ratio, line_height_px et une déclaration CSS prête à copier. Aucun réseau, modèle, hasard ni horloge n’intervient : une entrée identique renvoie toujours le même JSON.
Testez la recommandation dans la mise en page réelle
Le navigateur permet un usage interactif ; chaque requête API coûte $0.002, avec exactement la même fonction déterministe.
Questions techniques
Quels types de contenu sont reconnus ?
Les valeurs acceptées sont body_text (ou body text), heading et caption. Les autres renvoient invalid_input.
Combien coûte une requête API ?
Chaque requête API coûte $0.002. L’outil du navigateur est disponible pour une utilisation interactive.