Interlinea su griglia di base
Un testo di 16 px con rapporto 1,5 su una griglia di 8 px dà un'interlinea di 24 px: esattamente 3 righe di griglia, e ogni riga poggia sugli stessi binari. Se l'ideale non cade sulla griglia, passa a righe intere. 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
- Griglia
- 8
- Rapporto preferito
- 1,5
- Aggancia
- nearest
- Interlinea ideale
- 24
- Altezza della riga
- 24
- Rapporto
- 1,5
Una griglia di linea di base mantiene ogni riga di testo sugli stessi binari orizzontali invisibili, così paragrafi, didascalie e layout a più colonne condividono un solo ritmo verticale dalla testata al piè di pagina. Designer e ingegneri front-end scelgono un'unità di griglia —spesso quattro, sei o otto pixel— e vogliono un'interlinea che sia un multiplo esatto di quell'unità, non un rapporto fluttuante che scivola di mezzo pixel a ogni riga. Questo calcolatore di interlinea su griglia di base prende la dimensione del font, il rapporto preferito senza unità e l'altezza di riga della griglia, quindi allinea la box di riga ideale al numero intero di righe più vicino (o al soffitto, o al pavimento). Lei ottiene l'interlinea allineata in pixel, il rapporto effettivo da incollare nel CSS, quante righe di griglia occupa quella linea e se il valore ideale cadeva già sulla griglia.
Come funziona l'allineamento dell'interlinea alla griglia di base
Parta dalla regola familiare dell'interlinea senza unità: moltiplichi la dimensione del font per un rapporto preferito come uno virgola cinque per ottenere una box di riga ideale nella stessa unità del font (quasi sempre pixel CSS). Quel prodotto è comodo da leggere ma raramente cade esattamente sulla griglia di base. Divida l'interlinea ideale per l'altezza di riga della griglia per sapere quante righe la linea vuole occupare; poi applichi una modalità di allineamento.
Nearest arrotonda al conteggio intero di righe più vicino, valore predefinito per il corpo del testo quando desidera il minor scostamento visivo dal rapporto preferito. Up (soffitto) amplia sempre la box di riga affinché il testo non risulti mai più stretto dell'ideale —utile per note legali o righe di misura lunga che necessitano di respiro—. Down (pavimento) riduce verso la griglia quando deve proteggere un budget verticale stretto, come l'altezza di una card o una colonna di stampa.
Dopo l'allineamento, moltiplichi il conteggio intero di righe per l'unità di griglia per ottenere l'interlinea finale, e divida per la dimensione del font per recuperare il rapporto senza unità da inserire in una proprietà personalizzata CSS. Si impone almeno una riga così che input patologici non collassino l'interlinea a zero.
Casi d'uso
Generazione di design token e scale tipografiche
Quando aggiunge una nuova dimensione del font a un design system, allinei il rapporto preferito sulla griglia di base condivisa affinché ogni token di interlinea resti un multiplo intero dell'unità di griglia.
Layout multi-colonna e a card
Allinei le box di riga di corpo, didascalia e titoli tra colonne e card impilate calcolando interlinee allineate per ogni dimensione rispetto a un'unica griglia.
Ritmo verticale per stampa e PDF
Mappi le scale tipografiche a schermo su una linea di base di stampa fissa affinché le pipeline da CSS a PDF mantengano la spaziatura dei paragrafi coerente con la griglia di pagina.
Domande frequenti
Qual è la differenza tra nearest, up e down?
Nearest arrotonda la box di riga ideale al conteggio intero di righe più vicino. Up applica sempre il soffitto (interlinea più ariosa). Down applica il pavimento (più stretta). Il conteggio delle righe non è mai inferiore a uno.
In cosa differisce da un semplice calcolatore di interlinea?
Un calcolatore semplice moltiplica solo la dimensione del font per un rapporto. Questo strumento allinea anche quel prodotto a una griglia di base così il ritmo verticale resta coerente tra dimensioni e colonne.
Quale passo di griglia conviene scegliere?
I designer scelgono spesso 4, 6 o 8 pixel e costruiscono tutta la spaziatura su quel numero. Inserisca lo stesso passo qui e ogni interlinea ottenuta ne sarà un multiplo esatto, non un rapporto che slitta di mezzo pixel a ogni riga.
Come capisco se il mio rapporto cade già sulla griglia?
Il risultato le segnala quando l'interlinea ideale corrisponde già a un numero intero di righe. In quel caso non cambia nulla: un testo di 16 px a 1,5 su una griglia di 8 px resta a 24 px, tre righe, con lo stesso rapporto.
Nei miei stili uso il valore in pixel o il rapporto?
Entrambi tengono il testo sulla griglia. Usi l'interlinea allineata in pixel oppure il rapporto effettivo, cioè quell'altezza divisa per il corpo del testo, se i suoi stili usano interlinee senza unità.
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/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)Esempio di richiesta
{
"font_size": 16,
"grid": 8
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "str.baseline_grid",
"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.
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
Come funziona l'allineamento dell'interlinea alla griglia di base
Quando il prodotto ideale equivale già a un numero intero di righe, la risposta imposta on_grid true affinché le pipeline di token possano saltare una riscrittura.
Contratto di input, campi di risposta e validazione
Corpo a diciotto pixel sulla stessa griglia di otto con rapporto uno virgola cinque produce ideale ventisette, che allinea nearest a ventiquattro (tre righe, rapporto circa uno virgola tre tre) o up a trentadue (quattro righe) a seconda dello snap. Invii con POST un corpo JSON con due numeri finiti positivi obbligatori: font_size (pixel CSS del testo che sta dimensionando) e grid (altezza di riga della linea di base nella stessa unità). Opzionalmente invii preferred_ratio, che vale uno virgola cinque se omesso, e snap come nearest, up o down —sono accettati alias come round, ceil e floor—. I campi numerici possono arrivare come numeri JSON o stringhe decimali; valori mancanti, zero, negativi, NaN e Infinity falliscono con invalid_input e non vengono fatturati. In caso di successo il payload ripete font_size, grid, preferred_ratio e snap; riporta ideal_line_height prima dell'allineamento; restituisce line_height e ratio dopo l'allineamento; include l'intero grid_rows; imposta on_grid quando l'ideale coincideva già con un multiplo della griglia; e fornisce una breve stringa formula per la documentazione. Esempio: corpo a sedici pixel su griglia di otto con rapporto preferito uno virgola cinque produce ideale ventiquattro, esattamente tre righe, quindi line_height resta ventiquattro e il rapporto uno virgola cinque. Abbini i numeri alla propria conversione rem se la dimensione root differisce; questo endpoint lavora in pixel grezzi così i risultati restano deterministici tra ambienti.
Dove un'API di interlinea su griglia di base conviene
I design system generano scale di spazio e tipografia da una sola costante di griglia; chiamare questo calcolatore quando gli autori aggiungono una nuova dimensione mantiene ogni token di interlinea sui binari senza un foglio di calcolo. Le pipeline di stampa e PDF che mappano CSS su griglie di pagina fisse usano la stessa logica di allineamento affinché le anteprime a schermo coincidano con la lastra. Una validazione fallita non consuma saldo. Le librerie di componenti che renderizzano articoli multi-colonna, card prodotto o barre laterali di documentazione necessitano di linee di base allineate tra breakpoint: elaborare le dimensioni del font a lotti tramite l'API produce una tabella stabile di rapporti allineati per Storybook e regressione visiva. Poiché l'implementazione è parse pura di livello A, ogni chiamata riuscita costa il prezzo base pubblicato $0.002 senza token di modello né rete in uscita.
Domande tecniche
Come si calcola un'interlinea su griglia di base?
Invii font_size e grid positivi (e opzionalmente preferred_ratio, predefinito 1.5, e snap: nearest, up o down). L'API restituisce line_height come multiplo intero della griglia e il rapporto effettivo senza unità.
Quali unità devo usare per font_size e grid?
Usi la stessa unità per entrambi —in genere pixel CSS—. La matematica è indipendente dall'unità finché entrambe le entrate condividono la scala; la conversione rem dipende dalla dimensione del font root.
Quanto costa lo strumento di interlinea su griglia di base?
Lo strumento nel browser è gratuito. Le richieste API usano il saldo prepagato KIT a $0.002 per chiamata riuscita; l'input non valido non viene fatturato.