Generatore Scala Tipografica
Anteprima scala
Codice
:root {
--text-xs: 0.5628rem; /* 9px */
--text-sm: 0.7502rem; /* 12px */
--text-base: 1rem; /* 16px */
--text-lg: 1.333rem; /* 21.33px */
--text-xl: 1.7769rem; /* 28.43px */
--text-2xl: 2.3686rem; /* 37.9px */
--text-3xl: 3.1573rem; /* 50.52px */
--text-4xl: 4.2087rem; /* 67.34px */
--text-5xl: 5.6102rem; /* 89.76px */
--text-6xl: 7.4784rem; /* 119.66px */
}Domande Frequenti
Tutto sulla tipografia e le scale modulari
Cos'è una scala tipografica?
Una scala tipografica è un insieme di dimensioni di testo proporzionalmente correlate tra loro tramite un rapporto fisso (ratio). Usare una scala coerente crea armonia visiva nel design, poiché ogni dimensione è matematicamente correlata alle altre.
Quale ratio scegliere?
Per interfacce digitali, il Perfect Fourth (1.333) e il Major Third (1.250) sono le scelte più comuni: offrono un contrasto visibile senza essere eccessivo. Il Golden Ratio (1.618) crea contrasti molto marcati, ideale per titoli e landing page. Minor Second (1.125) è sottile, per UI molto dense.
Come si usa l'output CSS?
Copia le variabili CSS nel tuo file di stile globale (es. `app.css`). Poi usale con `font-size: var(--text-lg)`. Per Tailwind, incolla la configurazione nel blocco `fontSize` del tuo `tailwind.config.js`.
Che cos'è una scala tipografica?
È un insieme di dimensioni del testo legate da un rapporto fisso: ogni misura nasce dalla precedente moltiplicata per lo stesso numero. Il risultato è una gerarchia che appare ordinata.
Quale rapporto conviene scegliere?
Per le interfacce funzionano bene 1,25 e 1,333, che danno contrasto senza esagerare. Il rapporto aureo di 1,618 crea salti molto marcati, adatti a titoli e pagine di presentazione.
Come si usa la scala nel progetto?
Le variabili CSS si incollano nel foglio di stile globale e si richiamano nelle regole con var. Per Tailwind si incolla il blocco delle dimensioni nella configurazione del progetto.