Generatore di scala tipografica

Cos'è Generatore di scala tipografica?

Il Generatore di Scala Tipografica trasforma una dimensione base e un rapporto modulare in una scala tipografica completa e matematicamente coerente, con quanti livelli di titolo più grandi e livelli di didascalia più piccoli ti servono. Oltre alle dimensioni del carattere, deriva un'interlinea e una crenatura coerenti per ogni livello, più un'espressione fluida clamp() opzionale che interpola tra un viewport mobile e uno desktop usando un rapporto mobile separato. Designer e sviluppatori front-end lo usano per costruire i token tipografici di un design system, mantenere dimensioni coerenti e incollare CSS, Sass, Tailwind o JSON pronti all'uso. Digita qualsiasi rapporto personalizzato o scegline uno classico, imposta dimensione base e unità (px o rem), visualizza l'anteprima nella tua font-family e copia il formato che ti serve.

Come usare Generatore di scala tipografica

1. Digita qualsiasi rapporto personalizzato nel campo rapporto, o scegline uno classico come quarta giusta (1.333) dal menu a discesa dei preset nelle impostazioni.
2. Imposta la dimensione base; diventa la dimensione del corpo del testo e l'ancora della scala.
3. Nelle impostazioni, scegli quanti livelli più grandi e più piccoli generare; i livelli più piccoli stanno sotto la base per didascalie e testo minuto.
4. Regola l'interlinea base e quella stretta e la crenatura alle dimensioni grandi, e inserisci una font-family per vedere l'anteprima della scala nel tuo carattere.
5. Per una tipografia responsiva, imposta le larghezze di viewport minima e massima e un rapporto mobile per costruire una scala fluida clamp().
6. Cambia il formato di output tra variabili CSS, clamp() fluido, Sass, config di Tailwind e JSON, poi copia il codice o la dimensione di un singolo livello.

Esempi

rapporto 1.333, base 16px, 5 su / 1 giù

--font-size-2xl: 37.897px; --line-height-2xl: 1.27; --letter-spacing-2xl: -0.017em;

base 16px, rapporto 1.333, rapporto mobile 1.2, 320-1240px

--font-size-2xl: clamp(27.648px, 24.083px + 1.114vw, 37.897px);

qualsiasi scala, export Tailwind

fontSize: { base: ['16px', { lineHeight: '1.5', letterSpacing: '0em' }] }

Domande frequenti

Posso usare un rapporto personalizzato, non solo i preset?

Sì. Digita qualsiasi numero nel campo rapporto, come 1.2, 1.5, 1.618 o un valore non standard come 1.45. Il menu a discesa dei preset nelle impostazioni è solo una scorciatoia che riempie lo stesso campo, e scegliere un valore che non corrisponde a un preset mostra semplicemente Personalizzato.

Come funzionano i livelli più piccoli (negativi)?

La scala è ancorata alla dimensione base (livello 0). I livelli più grandi moltiplicano la base per il rapporto, mentre quelli più piccoli la dividono, producendo dimensioni di didascalia e testo minuto sotto la base come sm e xs. Imposta quanti livelli più grandi e più piccoli vuoi nelle impostazioni.

Come vengono calcolate interlinea e crenatura?

L'interlinea passa dal tuo valore base alla dimensione del corpo verso un valore più stretto man mano che il testo cresce, e la crenatura passa da zero alla base verso il tuo valore per le dimensioni grandi, così i testi grandi da display risultano un po' più stretti e quelli piccoli un po' più larghi. Entrambe le curve sono regolabili nelle impostazioni.

Cos'è la scala fluida clamp()?

Costruisce un font-size: clamp() per ogni livello che cresce dolcemente tra una larghezza di viewport minima e una massima, usando il tuo rapporto principale alla larghezza massima e un rapporto mobile separato a quella minima. Scegli il formato di output CSS clamp() per esportarla.

I miei dati vengono inviati a un server?

No. L'intera scala, comprese dimensioni, interlinea, crenatura e i valori fluidi clamp(), viene calcolata localmente nel tuo browser con semplice aritmetica. Nulla viene caricato, quindi lo strumento funziona offline e mantiene private le tue impostazioni.