Calcolatore altezza di riga
Un testo di 16 px con rapporto 1,5 richiede un'interlinea di 24 px. Inserisca qualsiasi dimensione e rapporto e ottenga il valore in pixel per un'impaginazione fissa, una scheda di progetto grafico o un modello di email. 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 adimensionale per l'altezza di riga
- 1,5
- Altezza di riga in px
- 24
- Precisione
- 10
Questo calcolatore dell'altezza di riga trasforma una dimensione del font in pixel CSS e un rapporto adimensionale per l'altezza di riga nell'altezza di riga risultante in pixel, cioè il valore esatto da impostare come line-height quando preferisci uno stack assoluto in pixel invece di un semplice moltiplicatore adimensionale. Designer e sviluppatori front-end ricorrono ancora costantemente a questo calcolo: un testo di corpo a sedici pixel con un rapporto di uno virgola cinque richiede ventiquattro pixel di altezza di riga; titoli a diciotto pixel con un rapporto di uno virgola sei richiedono ventotto virgola otto pixel. L'identità è completamente deterministica: l'altezza di riga in pixel è uguale alla dimensione del font moltiplicata per il rapporto. Non c'è nessuna chiamata di rete, nessun campionamento e nessuna scorciatoia legata alla data — solo aritmetica finita su due scalari positivi.
Cosa significa l'altezza di riga e cosa restituisce questo calcolatore
L'altezza di riga è il ritmo verticale del testo: la distanza da baseline a baseline che browser e motori di layout usano quando impilano le righe di un paragrafo. In CSS puoi scrivere line-height come rapporto adimensionale, per esempio uno virgola cinque, come percentuale, oppure come lunghezza assoluta in pixel. Molti design system mantengono un rapporto adimensionale nel livello dei token per l'ereditarietà, poi materializzano un valore assoluto in pixel quando esportano mockup fissi, specifiche Figma o modelli email che non possono ereditare.
Questo calcolatore implementa il semplice prodotto altezza di riga in pixel uguale a dimensione del font moltiplicata per rapporto, che è esattamente ciò per cui un line-height adimensionale moltiplica la dimensione del font usata. Non esiste un modello dell'interlinea nella stampa a caratteri di piombo, nessuna ricerca di metriche OpenType e nessuna conversione tra rem ed em: sono problemi separati. Anche i rapporti non positivi vengono respinti allo stesso modo, così il risultato resta una lunghezza in pixel positiva.
Dove si usano le altezze di riga in pixel nei design system, nel CSS e nella didattica
I product designer convertono una scala tipografica modulare in altezze di riga assolute quando consegnano mockup mobile, quando i client email ignorano l'ereditarietà adimensionale, o quando un'esportazione PDF congela ogni misura in pixel o punti. Gli insegnanti di CSS possono mostrare che un rapporto adimensionale di uno virgola cinque a sedici pixel equivale a ventiquattro pixel senza affidarsi all'arrotondamento opaco dei DevTools del browser.
I revisori di accessibilità hanno talvolta bisogno di una verifica rapida che il testo del corpo rispetti un'altezza di riga assoluta minima per la lettura prolungata, anche quando il token sorgente è ancora un rapporto. Abbinalo a convertitori di unità tipografiche quando ti serve anche passare da px a em, e tieni presente che il rendering reale dipende ancora dalle metriche del font, dal mezzo interlinea e dai modelli di box una volta che il valore in pixel esce da questo calcolatore.
Casi d'uso
Documentazione CSS e dei componenti
Documenta esempi in Storybook o nella guida di stile con valori px esatti di altezza di riga che corrispondano ai rapporti adimensionali usati nei fogli di stile di produzione.
Domande frequenti
Come si calcola l'altezza di riga?
Per esempio, 16 px con un rapporto di 1,5 dà 24 px.
Cosa succede se la dimensione del font è zero o negativa?
Una dimensione del font non positiva non può definire un'altezza di riga utile in questo modello.
Questo strumento converte unità rem o em?
No. La dimensione del font è interpretata come pixel CSS e il rapporto è adimensionale. Usa un convertitore di unità dedicato se ti servono rem o em.
Perché i risultati sono arrotondati a una precisione?
La precisione predefinita è di 10 cifre decimali; puoi impostare la precisione da 0 a 15.
Quale interlinea si adatta a un testo di 16 px?
Con un rapporto di 1,5, 24 px. Moltiplichi la dimensione del carattere per il rapporto e otterrà il valore in pixel per un'impaginazione fissa, una bozza grafica o un modello di email.
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/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)Esempio di richiesta
{
"font_size": 16,
"ratio": 1.5
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "hobby.line_height",
"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'altezza di riga e cosa restituisce questo calcolatore
Fornisci una dimensione del font positiva in pixel CSS e un rapporto adimensionale positivo; il motore restituisce la dimensione del font normalizzata, il rapporto, l'altezza di riga calcolata in pixel, l'etichetta di metodo line_height, la precisione usata per l'arrotondamento e una breve stringa di promemoria della formula. Gli input non validi generano invalid_input, inclusi dimensione del font o rapporto mancanti, valori non finiti, grandezze oltre il tetto documentato e qualunque dimensione del font non positiva, perché una dimensione del font pari a zero o negativa non può definire un blocco di riga utile. Il percorso è deterministico, quindi gli stessi input producono sempre gli stessi numeri arrotondati per schede di esercizi, test unitari, generatori di design token e consumatori API che non devono inventare spaziature.
Come vengono letti dimensione del font e rapporto e come i risultati restano riproducibili
Il segno più iniziale opzionale e la notazione scientifica su stringhe numeriche sono ammessi quando si interpretano come decimali finiti; spazi incorporati, prefissi esadecimali e token non numerici vengono respinti con un messaggio chiaro, così che una cella sbagliata non diventi un'altezza di riga errata. Anche il rapporto deve essere positivo: un moltiplicatore pari a zero collasserebbe il blocco di riga, e un rapporto negativo non è un prodotto line-height CSS valido in questo modello. I nomi di campo preferiti sono font_size per la dimensione in pixel CSS e ratio per il moltiplicatore adimensionale, ma sono accettati alias come fontSize, size, fs e px per la dimensione, e line_height_ratio, lineHeight, multiplier e lh per il rapporto, così che fogli di calcolo, stringhe di query e moduli tipizzati possano riusare un unico contratto. Dimensioni del font pari a zero o negative falliscono sempre con invalid_input, coerentemente con la regola del prodotto secondo cui l'aritmetica dell'altezza di riga non è definita per corpi tipografici non positivi. Abbina l'esecuzione gratuita nel browser di questa pagina all'API a pagamento quando ti serve lo stesso risultato matematico dentro una pipeline automatizzata o una build di design token senza reimplementare da solo la moltiplicazione.
Dove si usano le altezze di riga in pixel nei design system, nel CSS e nella didattica
Gli sviluppatori front-end usano la stessa aritmetica quando generano proprietà personalizzate CSS da un file JSON di token, quando documentano una scala tipografica in Storybook, o quando scrivono snapshot test che si aspettano un'altezza di riga di ventiquattro per una dimensione del corpo di sedici pixel. In questa pagina il lavoro gira interamente nel tuo browser; tramite l'API ogni ricerca riuscita costa $0.002, la validazione fallita non viene addebitata e nulla viene conservato dopo la restituzione della risposta. Questa distinzione — esplorazione interattiva gratuita e API a pagamento identica — corrisponde al resto del catalogo tier A del KIT e ti permette di passare da una revisione di design a una pipeline di token automatizzata senza cambiare il risultato matematico.
Casi di integrazione
Scale tipografiche per design token
Da dimensione del font di ogni livello e un rapporto condiviso, materializza pixel di altezza di riga assoluti per consegne Figma, CSS email ed esportazioni JSON di token.
Fixture CI deterministiche
Genera risultati riproducibili di line_height_px per test unitari, snapshot test e script di build dei design system senza moltiplicazioni scritte a mano.
Domande tecniche
Quanto costa il calcolatore dell'altezza di riga?
È gratuito nel browser su questa pagina. Tramite l'API una richiesta riuscita costa $0.002; gli input non validi non vengono addebitati.