Interlinea CSS consigliata per dimensione e tipo di testo
Un testo normale di 16 px riceve un’interlinea di 1,5, cioè 24 px, mentre i titoli usano 1,2 e le didascalie 1,4: indichi la dimensione del carattere e il tipo di testo, poi copi un valore di partenza. 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
- Tipo di contenuto
- Body text
- Dimensione del carattere (px)
- 16
- Rapporto consigliato
- 1,5
- Altezza di riga (px)
- 24
- Css
- line-height: 24px;
Questo strumento trasforma la dimensione del carattere e il ruolo tipografico in un punto di partenza pratico per l’interlinea CSS. Lei sceglie testo normale, titolo o didascalia; il sistema applica un rapporto comune e restituisce sia il valore senza unità sia l’equivalente in pixel. È utile quando un progetto dispone già delle dimensioni, ma non ancora dei token per il ritmo verticale. Il risultato è deterministico, facile da copiare in CSS e va considerato un’indicazione, non l’unica impostazione corretta per ogni font.
Scelga il ruolo del contenuto prima della spaziatura
L’interlinea deve seguire il modo in cui il testo viene letto, non ripetere un solo moltiplicatore in tutta l’interfaccia. Il testo normale occupa spesso molte righe e deve facilitare il passaggio dalla fine di una riga all’inizio della successiva; per questo lo strumento consiglia 1.5. I titoli sono generalmente più grandi, brevi e limitati a una o due righe: il rapporto più stretto di 1.2 ne mantiene l’unità visiva.
Le didascalie sono piccole ma corte, quindi 1.4 offre aria sufficiente senza farle prevalere sugli elementi vicini. In un flusso automatico ciò permette di correggere gli errori alla fonte. Questi rapporti sono punti di partenza basati su pratiche comuni; Lei può modificarli dopo aver osservato il font e l’impaginazione reali.
Interpreti il rapporto e il valore in pixel
La raccomandazione moltiplica la dimensione positiva in pixel CSS per il rapporto fisso del ruolo selezionato. Un corpo da 16 pixel usa 1.5 e restituisce 24 pixel; un titolo da 32 pixel usa 1.2 e restituisce 38.4 pixel. In produzione il rapporto senza unità è spesso preferibile, perché viene ereditato proporzionalmente quando cambia la dimensione dei discendenti.
Il valore in pixel rimane utile per specifiche fisse, consegne di design, verifiche visive, email e token che richiedono lunghezze esplicite. I risultati vengono arrotondati a quattro decimali per conservare frazioni utili senza rumore numerico. Valori mancanti, zero, negativi, infiniti o non numerici generano un errore.
Il numero rappresenta il riquadro di riga, non l’altezza visibile dei glifi. I font distribuiscono ascendenti, discendenti e spazi interni in modi diversi; usi quindi il calcolo come base riproducibile e controlli il testo renderizzato prima di fissare il token.
Verifichi la raccomandazione nel layout reale
Dopo il calcolo, applichi il valore nel contesto finale e provi contenuti rappresentativi, non una sola frase ideale. Per il testo normale includa paragrafi, collegamenti lunghi, enfasi, numeri e larghezze mobili. Controlli che il lettore passi tra le righe senza perdersi e che il paragrafo resti coeso.
Per i titoli provi la dicitura plausibile più lunga a ogni breakpoint. Il rapporto 1.2 crea spesso un blocco forte, ma un font con accenti alti o un titolo di tre righe può richiedere più spazio. Per le didascalie esamini schede dense, crediti, note di tabella e stringhe localizzate.
Verifichi inoltre zoom e sostituzioni del font. Registri gli adattamenti come token intenzionali, non come dichiarazioni CSS sparse. Questa capacità non misura metriche del font, lunghezza della riga, lingua, peso o ambiente di rendering, quindi non sostituisce la revisione visiva e di accessibilità.
Offre invece un inizio ragionevole, spiegabile e ripetibile.
Casi d'uso
Avviare una scala tipografica
Trasformi le dimensioni scelte nei primi token di interlinea per corpo, titoli e didascalie prima del perfezionamento visivo.
Generare documentazione di design
Produca rapporti, pixel e dichiarazioni CSS coerenti per una libreria di componenti o una consegna.
Convalidare i ruoli del testo
Rifiuti ruoli sconosciuti in un’automazione invece di accettare silenziosamente una spaziatura predefinita.
Domande frequenti
Quali rapporti consiglia lo strumento?
Usa 1.5 per il testo normale, 1.2 per i titoli e 1.4 per le didascalie.
È meglio usare il rapporto o i pixel in CSS?
Il rapporto senza unità viene in genere ereditato meglio; i pixel sono pratici per specifiche fisse e consegne.
Il risultato garantisce l’accessibilità del testo?
No. È un punto di partenza; Lei deve provare font, larghezza, layout, zoom e contenuti reali.
Quale interlinea usare per un testo di 16 px?
Un’interlinea di 1,5, pari a 24 px. Il testo normale occupa più righe, e quello spazio in più aiuta l’occhio a passare dalla fine di una riga all’inizio della successiva.
Perché i titoli hanno un’interlinea più stretta dei paragrafi?
Perché sono più grandi, più brevi e spesso occupano una o due righe. Il rapporto di 1,2 tiene unito un titolo spezzato, quindi un titolo di 32 px riceve 38,4 px.
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/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)Esempio di richiesta
{
"font_size": 16,
"content_type": "body_text"
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "doc.line_height_recommend",
"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_mb | 25 |
max_pages | 200 |
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
Può usarlo nel browser oppure integrare l’API al costo di $0.002 per richiesta.
Scelga il ruolo del contenuto prima della spaziatura
Scelga body_text per paragrafi, articoli e descrizioni, heading per titoli e intestazioni, caption per note di immagini, crediti e annotazioni secondarie. La frase body text viene normalizzata in body_text, mentre ogni altro tipo sconosciuto genera un errore anziché ricevere un valore predefinito.
Interpreti il rapporto e il valore in pixel
La risposta include dimensione normalizzata, tipo, rapporto, line_height_px e una dichiarazione CSS pronta da copiare. Il calcolo non usa rete, modelli, casualità o orologio: lo stesso input produce sempre lo stesso JSON.
Verifichi la raccomandazione nel layout reale
L’uso interattivo è disponibile nel browser; ogni richiesta API costa $0.002 ed entrambi i percorsi utilizzano la stessa funzione deterministica.
Domande tecniche
Quali tipi di contenuto vengono riconosciuti?
Sono accettati body_text (o body text), heading e caption. Gli altri valori restituiscono invalid_input.
Quanto costa una richiesta API?
Ogni richiesta API costa $0.002. Lo strumento nel browser è disponibile per l’uso interattivo.