Interlinea da dimensione e rapporto
Un testo di 16 px con rapporto 1,5 richiede 24 px da una linea di base alla successiva. Ottiene anche lo spazio che avanza oltre la dimensione del carattere e la sua metà, pronti per mockup, email e specifiche di stampa. Gratis nel suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Esempio risolto
- Dimensione del carattere
- 16
- Rapporto
- 1,5
- Interlinea (px)
- 24
- Interlinea aggiuntiva (px)
- 8
- Mezza interlinea (px)
- 4
- Precisione
- 10
Questo calcolatore di interlinea (leading) trasforma una dimensione del font in pixel CSS e un ratio unitless di line-height nella spaziatura esatta da baseline a baseline in pixel—la misura tipografica classica chiamata leading—insieme all'interlinea extra e al half-leading per il calcolo di layout. Designer e sviluppatori front-end lo usano spesso: un corpo a sedici pixel con ratio di uno virgola cinque necessita di ventiquattro pixel di interlinea; titoli a diciotto pixel con ratio di uno virgola sei ne necessitano ventotto virgola otto. L'identità è pienamente deterministica: l'interlinea in pixel è la dimensione del font per il ratio, l'extra è quell'interlinea meno la dimensione del font, e il half-leading è la metà di quell'extra. Non c'è chiamata di rete, campionamento né scorciatoia dipendente dalla data: solo aritmetica finita su due scalari positivi.
Cosa significa l'interlinea e cosa restituisce questo calcolatore
L'interlinea (leading) è il ritmo verticale del testo: la distanza da una baseline alla successiva che stampatori, motori di layout e box di riga CSS usano impilando le righe di un paragrafo. La parola deriva dalle strisce di piombo un tempo poste tra i caratteri metallici; nel design digitale la stessa idea si scrive spesso come line-height, ma molti brief di design, guide editoriali e manuali tipografici chiedono ancora l'interlinea in unità assolute.
Lei può mantenere un ratio senza unità in uno strato di token per l'ereditarietà e materializzare poi un valore assoluto in pixel esportando mockup fissi, specifiche Figma, template e-mail o PDF di stampa che non possono ereditare. Questo calcolatore implementa interlinea in pixel uguale a dimensione del font per ratio, esattamente ciò che un line-height unitless moltiplica per la dimensione del font usata.
Segnala anche l'interlinea extra—lo spazio oltre il corpo, interlinea meno dimensione del font—e il half-leading, metà di quell'extra, come molti motori ripartiscono lo spazio sopra e sotto i glifi nella box di riga. Non c'è consultazione di metriche OpenType, né conversione rem o em, né analisi di file di font: sono problemi separati.
Dove l'interlinea in pixel si colloca in design system, CSS e didattica
I product designer convertono una scala tipografica modulare in interlinea assoluta quando consegnano mockup mobile, quando i client di posta ignorano l'ereditarietà unitless, o quando un export PDF di stampa congela ogni misura in pixel o punti. Gli educatori di tipografia e fondamenta CSS possono mostrare che un ratio unitless di uno virgola cinque a sedici pixel equivale a ventiquattro pixel di spaziatura tra baseline, con otto di extra e quattro di half-leading, senza affidarsi ad arrotondamenti opachi dei DevTools del browser.
I revisori di accessibilità a volte necessitano di un controllo rapido che il corpo rispetti una spaziatura assoluta minima per la lettura prolungata, anche quando il token di origine è ancora un ratio. I team editoriali e di stampa che specificano ancora l'interlinea nel senso tradizionale ottengono gli stessi numeri dei prodotti line-height CSS quando il ratio è applicato allo stesso modo.
La abbini a convertitori di unità tipografiche quando Le servono anche px in em o rem, e tenga presente che il rendering reale dipende ancora dalle metriche del font e dal box model una volta che il valore in pixel lascia questo calcolatore.
Casi d'uso
Documentazione CSS e componenti
Documenti esempi Storybook o guide di stile con valori esatti di interlinea in px che corrispondano ai ratio unitless usati nei fogli di stile di produzione.
Domande frequenti
Quanto costa il calcolatore di interlinea?
È gratis nel Suo browser in questa pagina.
Come si calcola l'interlinea?
Ad esempio, 16 px con ratio 1.5 produce 24 px di interlinea, 8 px di extra e 4 px di half-leading.
Cosa succede se la dimensione del font è zero o negativa?
Una dimensione del font non positiva non può definire un'interlinea utile in questo modello.
Perché i risultati sono arrotondati a una precisione?
La precisione predefinita è 10 decimali; può impostare precision da 0 a 15.
L'interlinea è la stessa cosa del line-height del CSS?
È la stessa idea in unità assolute. Un line-height senza unità moltiplica la dimensione del font, e questo strumento restituisce proprio quel prodotto in pixel, cioè ciò che di solito chiedono le specifiche di design e i manuali di tipografia.
Strumenti correlati
Per sviluppatori — accesso via API
Tutto quello che vedi in questa pagina è disponibile anche via API. Questa sezione è per i team che vogliono integrarlo nei propri sistemi; chi non ne ha bisogno può semplicemente usare lo strumento qui sopra.
Endpoint
Autenticazione con Bearer token: un POST mette in coda l'attività e il risultato arriva via webhook o link firmato.
Chiamala dal tuo 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)Esempio di richiesta
{
"font_size": 16,
"ratio": 1.5
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "str.leading_from_ratio",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L'API è asincrona: ricevi subito un task_id e puoi fare polling fino a 1 richiesta al secondo.
Prezzi
Prezzo pubblicato, senza token né crediti. Se l'attività fallisce, non paghi.
Limiti
max_abs_value | 1000000000000000 |
Errori
| HTTP | Codice | Significato |
|---|---|---|
401 | unauthorized | Chiave API mancante o non valida: controlla l'header Authorization. |
402 | insufficient_balance | Credito esaurito: ricarica per continuare a eseguire attività. |
404 | unknown_type | Tipo di attività sconosciuto: controlla il campo type della richiesta. |
429 | rate_limited | Troppe richieste in poco tempo: rallenta e riprova tra qualche secondo. |
Note tecniche
Cosa significa l'interlinea e cosa restituisce questo calcolatore
Lei fornisce una dimensione del font positiva in pixel CSS e un ratio unitless positivo; il motore restituisce la dimensione normalizzata, il ratio, leading_px, extra_leading_px, half_leading_px, il tag di metodo leading_from_ratio, la precisione di arrotondamento e una breve stringa di formula. Gli input non validi sollevano invalid_input, inclusi dimensione o ratio assenti, valori non finiti, grandezze oltre il soffitto documentato, e qualsiasi dimensione o ratio non positivo, perché un corpo zero o negativo non definisce una box di riga utile. Il percorso è deterministico, così gli stessi input producono sempre gli stessi numeri arrotondati per fogli di calcolo, test unitari, generatori di token e consumatori di API che non devono inventare la spaziatura.
Come si leggono dimensione e ratio e come i risultati restano riproducibili
Segni più opzionali e notazione scientifica su stringhe numeriche sono consentiti quando si interpretano come decimali finiti; spazi incorporati, prefissi esadecimali e token non numerici vengono rifiutati con un messaggio chiaro affinché una cella errata non diventi un'interlinea sbagliata. Anche il ratio deve essere positivo: un moltiplicatore zero collasserebbe la box di riga, e un ratio negativo non è un prodotto di interlinea valido in questo modello. I nomi di campo preferiti sono font_size per la dimensione in pixel CSS e ratio per il moltiplicatore unitless, ma si accettano alias come fontSize, size, fs e px per la dimensione, e line_height_ratio, lineHeight, multiplier, lh e leading_ratio per il ratio, così fogli di calcolo, query string e moduli tipizzati riutilizzano un unico contratto. Dimensioni del font zero o negative falliscono sempre con invalid_input, secondo la regola di prodotto per cui l'aritmetica di interlinea è indefinita per corpo non positivo. Abbini l'esecuzione gratuita nel browser di questa pagina all'API a pagamento quando le serve lo stesso risultato matematico in una pipeline automatizzata o in un build di token di design senza reimplementare la moltiplicazione Lei stesso.
Dove l'interlinea in pixel si colloca in design system, CSS e didattica
Gli ingegneri front-end usano la stessa aritmetica quando generano proprietà personalizzate CSS da un JSON di token, documentano una rampa tipografica in Storybook, o scrivono test di snapshot che si aspettano interlinea di ventiquattro per un corpo di sedici pixel con ratio di uno virgola cinque. In questa pagina il lavoro viene eseguito interamente nel Suo browser; tramite l'API ogni consultazione riuscita costa $0.002, la validazione fallita non viene addebitata e nulla viene memorizzato dopo la risposta. Questa divisione—esplorazione interattiva gratuita e API identica a pagamento—corrisponde al resto del catalogo KIT di livello A e Le consente di passare da una critica di design a una pipeline di token automatizzata senza cambiare il risultato matematico.
Casi di integrazione
Rampe tipografiche di token di design
Dalla dimensione del font di ogni gradino e da un ratio condiviso, materializzi interlinea assoluta in pixel più extra e half-leading per la consegna in Figma, CSS e-mail ed export JSON di token.
Fixture CI deterministiche
Generi risultati leading_px riproducibili per test unitari, snapshot e script di build del design system senza moltiplicazioni scritte a mano.
Domande tecniche
L'interlinea è la stessa cosa del line-height CSS?
Quando usa un ratio unitless, il prodotto font_size × ratio è la distanza tra baseline che CSS chiama line-height e la tipografia tradizionale chiama leading. Questo strumento segnala anche extra e half-leading per il layout.