Generi una scala tipografica per i titoli
Parta da un testo di 16 px e da un rapporto di 1,25: i titoli salgono a gradini, h6 misura 20, h5 misura 25, h4 misura 31,25 e ogni livello moltiplica per lo stesso rapporto. Gratis nel Suo browser.
- Gratis
- Funziona nel suo browser
- Senza registrazione
- I suoi dati restano sul dispositivo
Esegui gratis nel browser
Una scala tipografica trasforma una dimensione del corpo e un rapporto in una gerarchia prevedibile di titoli. Inserisca una dimensione base, per esempio 16, e un rapporto positivo, come 1.25 per una terza maggiore. Il generatore assegna potenze successive del rapporto ai livelli e restituisce un elenco ordinato, leggibile dalle macchine, a partire da h1. È utile per creare token CSS, documentare un design system o verificare che una gerarchia segua una regola matematica coerente.
Scelga base e rapporto adatti al contesto di lettura
Parta dalla dimensione usata per il testo corrente. Una base di 16 pixel è comune sul Web, ma non è un requisito universale: un’interfaccia densa può usare un valore inferiore, mentre un impianto editoriale può iniziare da 18 o 20 pixel. Il rapporto stabilisce quanto rapidamente i titoli si allontanano dalla base.
Il valore 1.125 crea una progressione contenuta, 1.2 una gerarchia moderata e 1.25 viene spesso chiamato terza maggiore. Rapporti più alti producono rapidamente grandi titoli, soprattutto quando vengono richiesti tutti i sei livelli HTML. La capacità accetta qualsiasi rapporto finito positivo.
Con 1 le dimensioni sono uguali; sotto 1 diminuiscono all’aumentare dell’esponente. Soltanto zero e valori negativi causano errore. Mantenga coerente l’unità nel Suo sistema.
La risposta indica px per praticità, ma la relazione numerica è priva di unità. Scelga gli input considerando contenuto reale, larghezza disponibile, metriche del carattere e dispositivi di destinazione, non soltanto il nome tradizionale del rapporto.
Comprenda come vengono calcolati i livelli dei titoli
La dimensione base è il passo zero e non compare come titolo. Richiedendo sei livelli, h6 riceve la base moltiplicata per il rapporto alla potenza 1, h5 usa la potenza 2 e la sequenza prosegue fino a h1 con la potenza 6. Quando il rapporto supera 1, h1 risulta quindi più distante dal corpo, pur mantenendo il consueto ordine di output da h1 a h6.
Con tre livelli, la risposta contiene h1, h2 e h3; h3 usa la prima potenza, h2 la seconda e h1 la terza. Ogni riga riporta nome, esponente e dimensione calcolata. L’arrotondamento a sei decimali elimina il rumore in virgola mobile e conserva precisione sufficiente per le variabili CSS.
Il campo facoltativo levels vale 6 in modo predefinito e deve essere un intero da 1 a 6. Le dimensioni eccessive vengono rifiutate prima che generino output infinito o inutilizzabile.
Applichi la scala senza confondere dimensione e struttura
Consideri i valori generati come proposte di design, non come istruzioni per scegliere i tag in base all’aspetto. I livelli HTML comunicano la struttura del documento a browser, motori di ricerca e tecnologie assistive; un h2 deve rappresentare una sottosezione di h1 anche se un componente lo mostra con un token più piccolo. Un flusso pratico consiste nel generare la scala, copiare le dimensioni in token semantici e associarli poi agli elementi tramite gli stili.
Verifichi il valore massimo con titoli reali, schermi mobili stretti, traduzioni, pesi marcati e font dalle metriche diverse. Può usare solo una parte della scala, limitare le dimensioni grandi in modo responsivo o condividere una misura fra più livelli. Questi adattamenti rendono il sistema adatto ai vincoli reali.
Per le revisioni, conservi insieme base, rapporto, quantità dei livelli e righe ottenute, così l’origine di ogni variazione resterà comprensibile.
Casi d'uso
Creare token di design CSS
Generi dimensioni ripetibili per i titoli e trasferisca i valori in proprietà personalizzate o nella pipeline dei token.
Documentare la gerarchia del marchio
Registri base e rapporto insieme ai valori da h1 a h6 affinché il team riproduca la tipografia con coerenza.
Confrontare scale candidate
Provi diversi rapporti positivi sulla stessa base e confronti la velocità di crescita dei titoli principali.
Domande frequenti
Perché il rapporto zero viene rifiutato?
Zero non può creare una scala proporzionale positiva.
Il rapporto può essere minore di uno?
Sì. Ogni rapporto finito positivo è valido. Sotto uno, i valori diminuiscono quando l’esponente aumenta.
Quanti livelli si possono generare?
Da 1 a 6, corrispondenti ai titoli HTML standard. Se levels viene omesso, il valore predefinito è 6.
Quale rapporto conviene usare per iniziare?
Un rapporto di 1,125 dà una progressione contenuta, 1,2 una gerarchia evidente ma moderata e 1,25 la classica terza maggiore. I rapporti più alti arrivano presto a dimensioni molto grandi quando si chiedono tutti e sei i livelli.
Quale gradino della scala riceve ogni titolo?
Il testo base è il gradino zero. Il titolo più piccolo, h6, è la base moltiplicata una volta per il rapporto, h5 usa il rapporto al quadrato e così via fino a h1, alla sesta potenza.
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/typography-scale-generate \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"base_font_size":16,"ratio":1.25}'const res = await fetch("https://api.kit.forhosting.com/doc/typography-scale-generate", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"base_font_size": 16,
"ratio": 1.25
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/doc/typography-scale-generate",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"base_font_size": 16,
"ratio": 1.25
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/doc/typography-scale-generate", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"base_font_size":16,"ratio":1.25}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"base_font_size":16,"ratio":1.25}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/doc/typography-scale-generate", 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
{
"base_font_size": 16,
"ratio": 1.25
}Esempio di risposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "doc.typography_scale_generate",
"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
Comprenda come vengono calcolati i livelli dei titoli
L’algoritmo non consulta rete, orologio o casualità, quindi input uguali restituiscono sempre lo stesso JSON. Gli alias base e font_size indicano la base, mentre scale_ratio indica il rapporto.
Applichi la scala senza confondere dimensione e struttura
L’API costa $0.002 per richiesta riuscita e lo stesso calcolo deterministico funziona nel browser. Input non validi, compreso un rapporto non positivo, restituiscono invalid_input invece di una scala parziale.
Domande tecniche
Quale formula utilizza il generatore?
Ogni dimensione equivale a base_font_size moltiplicato per ratio elevato all’esponente riportato nella riga.
Quanto costa una richiesta API?
Una richiesta riuscita costa $0.002. Un input non valido restituisce un errore anziché una scala.