Tipografia
Generatore Scala Tipografica
Genera scale tipografiche proporzionali per design system e CSS
Anteprima scala
xs
9px / 0.5628rem
The quick brown fox
sm
12px / 0.7502rem
The quick brown fox
base
16px / 1rem
The quick brown fox
lg
21.33px / 1.333rem
The quick brown fox
xl
28.43px / 1.7769rem
The quick brown fox
2xl
37.9px / 2.3686rem
The quick brown fox
3xl
50.52px / 3.1573rem
The quick brown fox
4xl
67.34px / 4.2087rem
The quick brown fox
5xl
89.76px / 5.6102rem
The quick brown fox
6xl
119.66px / 7.4784rem
The quick brown fox
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 */
}FAQ
Domande Frequenti
Tutto sulla tipografia e le scale modulari
Domande frequenti
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.