Quando guardi un sito ben progettato, noti che tutto “sembra giusto”. Il testo principale ha la giusta dimensione, il titolo è appropriatamente più grande, il testo piccolo in basso è comunque leggibile. Se osservi da vicino, noterai anche che tra tutte queste dimensioni diverse esiste una proporzione, un ritmo, un’armonia. Tutto sembra fluire naturalmente da una dimensione all’altra senza salti strani o incoerenze.
Questa sensazione di coerenza e armonia non è accidentale. È il risultato di una decisione intenzionale nel design: la scala tipografica. È un sistema che definisce tutte le dimensioni di testo che il sito usa, la loro relazione reciproca, e i principi dietro quando usare quale. Senza una scala tipografica deliberata, i siti finiscono con testo che varia arbitrariamente: 14px qui, 17px là, 22px lì, senza apparente razionale. Il risultato è caos visivo che comunica mancanza di intenzionalità.
Eppure, la scala tipografica rimane uno degli aspetti meno compresi del design, specialmente da chi non ha formazione formale. Molti pensano che sia una questione di preferenza personale, di “quanto mi piace questa dimensione di testo”. In realtà, è una scienza con principi chiari basati su tipografia, psicologia della lettura, e armonia visiva. In questo articolo esploreremo come creare una scala tipografica che funzioni davvero, che sia bella, e che sia pratica da implementare e mantenere nel tempo.
Cosa è una scala tipografica e perché importa
Una scala tipografica è un insieme di dimensioni di testo predefinite che usi coerentemente in tutto il tuo sito o applicazione. Invece di scegliere arbitrariamente “16 pixel per il corpo, 24 pixel per i titoli, 12 pixel per il testo piccolo”, definisci una scala: forse 12, 16, 20, 28, 36, 48. Poi usi solo queste dimensioni, e tutte le altre.
La matematica dell’armonia
La ragione per cui una scala predefinita è superiore a scelte arbitrarie è matematica. Se ogni step della scala è proporzionale al precedente, il nostro occhio percepisce armonia e coerenza. Se invece le dimensioni variano senza pattern visibile, il nostro occhio nota l’incoerenza inconsciamente, e il sito sembra “spento” o “non finito”.
Storicamente, la tipografia ha sempre utilizzato scale matematiche. I tipografi tradizionali usavano scale basate su moltiplicatori fissi: ogni grandezza era 1.5 o 1.618 volte la precedente (il rapporto aureo, uno dei numeri più importanti della natura e dell’arte). Questo non era arbitrario: era una pratica sviluppata nel corso di secoli perché funzionava.
Il nostro occhio è sintonizzato a riconoscere questi rapporti matematici. Quando una scala segue una progressione coerente, la percepiamo come “giusta”. Quando no, sentiamo un disagio anche se non riusciamo ad articolarlo chiaramente.
Il beneficio pratico per il team
Oltre al lato estetico, una scala tipografica ha benefici pratici enormi per il team. Quando è definita chiaramente, il designer non perde tempo a discutere di quale dimensione di testo usare. Lo sa: sono disponibili questi sei tagli, usa quello che comunica la gerarchia intesa. Lo sviluppatore sa esattamente che codificare il testo del corpo come “dimensione-testo-corpo” che si mappa a 16 pixel.
Se in futuro decidi che il testo del corpo dovrebbe essere 17 pixel invece di 16, non devi cercare e sostituire in mille file. Cambi un numero in un posto, e tutte le istanze del corpo si aggiornano automaticamente. La manutenibilità migliora drammaticamente.
Scegliere il tuo rapporto di scala
La scelta del rapporto che governa la tua scala è il primo passo. Questo rapporto definisce quanto ogni step è più grande (o più piccolo) del precedente. Le scelte comuni variano da 1.125 (un aumento del 12.5% tra step) a 2 (raddoppia ogni volta).
Rapporti comuni e loro usi
Una scala con rapporto 1.125 è molto conservatrice. I passi sono piccoli, il che significa che hai molte dimensioni disponibili e le differenze tra loro sono graduali. È utile per siti con testo denso e molti livelli di gerarchia, perché consente di mantenere il testo relativamente piccolo mentre hai comunque distinzioni chiare tra livelli diversi.
Un rapporto di 1.25 (aumento del 25%) è quello che la tipografia moderna tende a preferire. È aggressivo abbastanza per creare distinzione chiara tra step, ma non così aggressivo che ogni step è drasticamente diverso. È il rapporto suggerito da molti design system contemporanei.
Un rapporto di 1.5 è molto più aggressivo. Ogni dimensione è il 50% più grande della precedente. Questa scala ha meno step (perché cresce velocemente), ma ogni step è visivamente molto distinto. È utile quando vuoi una gerarchia molto chiara e drammatica.
Il rapporto aureo, 1.618, è il numero magico dell’armonia naturale, presente in conchiglie, fiori, e le proporzioni del corpo umano. Ha un appeal estetico, ma per web è spesso overkill. Le scale leggermente più modeste (1.25, 1.333) danno molti degli stessi benefici estetici con meno complessità.
Quale scegliere per il tuo sito
Se il tuo sito è un blog o un sito di contenuti con molto testo da leggere, un rapporto più conservatore (1.125 o 1.25) mantiene il testo leggibile mentre ha comunque una gerarchia chiara. Se il tuo sito è una applicazione o un’interfaccia con molti livelli visivi, un rapporto più aggressivo (1.333 o 1.5) aiuta a creare distinzione visiva tra livelli.
Una regola pratica: inizia con 1.25. È un buon compromesso che funziona per la maggior parte dei siti. Se dopo aver visto il risultato senti che la progressione è troppo aggressiva, puoi passare a 1.125. Se senti che non c’è abbastanza distinzione, passa a 1.333.
Costruire la tua scala partendo dal testo del corpo
La tua scala deve iniziare da un punto di ancoraggio: il testo del corpo principale. Questa è la dimensione che gli utenti leggeranno di più, il testo di base di paragrafi e prose. Tutto il resto della scala è costruito da lì.
Scegliere la dimensione base ottimale
Per il testo del corpo, gli studi sulla leggibilità suggeriscono che il range ottimale è tra 14 e 18 pixel per la maggior parte dei siti. Se troppo piccolo (sotto 14px), il testo diventa difficile da leggere, specialmente per utenti con vista meno acuta. Se troppo grande (oltre 20px), il testo diventa unwieldy e ingombra lo spazio, rendendo difficile scannerizzare la pagina.
16 pixel è diventato lo standard de facto per il testo del corpo sul web moderno, e per buona ragione. È leggibile, è abbastanza compatto per non sprecare spazio, e sulla maggior parte dei dispositivi moderni è una dimensione comoda senza zoom.
Se il tuo sito ha un pubblico particolare (per esempio, seniores con vista debole, o bambini), potresti adattare questo: 18 pixel per anziani, 14 pixel per siti giovanili ad alta densità di testo. Ma per la maggior parte, 16px è il punto di partenza sensato.
Costruire verso l’alto
Una volta fissato il testo del corpo, costruisci verso l’alto. Se usi una scala con rapporto 1.25 e il corpo è 16px:
- Titolo 1 (h1): 16 × 1.25 × 1.25 × 1.25 = 39px (arrotonda a 40px)
- Titolo 2 (h2): 16 × 1.25 × 1.25 = 31px (arrotonda a 32px)
- Titolo 3 (h3): 16 × 1.25 = 20px
- Corpo: 16px
- Piccolo: 16 ÷ 1.25 = 12.8px (arrotonda a 13px)
- Molto piccolo: 16 ÷ 1.25 ÷ 1.25 = 10.2px (arrotonda a 10px)
Questa è la tua scala. Tutte le dimensioni di testo nel tuo sito usano uno di questi sei valori. Se in futuro decidi che il corpo dovrebbe essere 18px, tutti gli altri valori si scalano proporzionalmente e la scala rimane armoniosa.
Creare nomi significativi e semantici
Il passaggio finale è nominare i tuoi livelli tipografici in modo che sia facile dire “usa il titolo 2” invece di “usa il testo da 32 pixel”.
Nomi semantici vs nomi basati sulla dimensione
Evita di nominare basandoti sulla dimensione assoluta: “14px”, “16px”, “32px” comunica solo il numero, non l’intento. Usa nomi semantici che comunicano il ruolo: “Titolo 1”, “Titolo 2”, “Corpo”, “Piccolo”, “Didascalia”.
Ancora meglio, usa nomi che comunicano quando usarli: “Titolo pagina principale” per h1, “Titolo sezione” per h2, “Sottotitolo” per h3, “Testo corpo” per il paragrafo principale, “Testo ausiliario” per il testo piccolo.
Questo approccio aiuta il team. Un designer che pensa “ho bisogno di testo per una didascalia sotto un’immagine” sa di usare il livello “Didascalia”. Non deve pensare a quale pixel è la dimensione giusta, sa che esiste un livello predisposto per questo uso.
Considerare la linea di base e lo spazio verticale
Oltre alla dimensione del testo, due aspetti critici della scala tipografica sono l’altezza di linea (il space verticale tra righe di testo) e la spaziatura tra paragrafi.
Altezza di linea e leggibilità
Un’altezza di linea troppo stretta rende il testo difficile da leggere perché le righe si sentono compresse. Un’altezza di linea troppo ampia spreça spazio e rende il testo difficile da scannerizzare. La linea di base consigliata è tra 1.4 e 1.6 volte la dimensione del testo.
Per il corpo principale (16px), un’altezza di linea di 1.5 significa 24px di spazio verticale tra le linee baseline di righe successive. Questo è leggibile e accogliente.
Per i titoli, puoi essere più aggressivo e usare 1.2 o anche 1.1, perché i titoli sono in genere non lunghi e la compressione non danneggia la leggibilità.
Per il testo molto piccolo, aumenta l’altezza di linea a 1.6 o più, perché il testo piccolo è più difficile da leggere e ha bisogno di spazio per respirare.
Spaziatura verticale coerente
Lo spazio tra i paragrafi dovrebbe anche seguire una logica della scala. Se il tuo testo del corpo ha un’altezza di linea di 24px, lo spazio tra i paragrafi potrebbe essere 24px (uguale all’altezza di linea, creando un ritmo regolare) o 32px (uno step più grande nella tua scala).
La regola importante è coerenza. Non mettere 10px di spazio tra i paragrafi in una sezione e 20px in un’altra. Il ritmo irregolare comunica mancanza di cura.
Implementare la scala nel codice
Una volta che hai definito la tua scala tipografica, deve vivere nel tuo codice. Non come valori hardcoded sparsi, ma come variabili o classi riutilizzabili.
Variabili CSS
Se usi CSS moderno, puoi definire la tua scala come variabili CSS:
css
:root {
--font-size-10: 10px;
--font-size-13: 13px;
--font-size-16: 16px;
--font-size-20: 20px;
--font-size-32: 32px;
--font-size-40: 40px;
--line-height-body: 1.5;
--line-height-title: 1.2;
}Poi nel codice, usi queste variabili:
css
p {
font-size: var(--font-size-16);
line-height: var(--line-height-body);
}
h1 {
font-size: var(--font-size-40);
line-height: var(--line-height-title);
}Classi riutilizzabili
In alternativa, puoi creare classi che incapsulano i tuoi livelli tipografici:
css
.text-body {
font-size: 16px;
line-height: 1.5;
}
.text-title-1 {
font-size: 40px;
line-height: 1.2;
}Poi nel HTML:
html
<p class="text-body">Questo è un paragrafo.</p>
<h1 class="text-title-1">Questo è un titolo.</h1>Nomi sensati
Indipendentemente da quale approccio usi, i nomi delle tue variabili o classi dovrebbero essere semantici. “font-size-16” è meno utile di “font-size-body”. “text-body” è immediatamente comprensibile e comunica il ruolo.
Adattare la scala per diversi dispositivi
Una scala tipografica definita per desktop potrebbe non funzionare perfettamente su mobile. Lo spazio è più ristretto, la distanza di lettura è di solito più vicina, le preferenze dell’utente potrebbero essere diverse.
La stessa scala, ma scalata
L’approccio più semplice è usare la stessa scala su tutti i dispositivi, ma potenzialmente scalare tutti i valori leggermente verso il basso su mobile. Se il corpo è 16px su desktop, potrebbe essere 14px su mobile. Tutti gli altri valori si scalano proporzionalmente mantenendo l’armonia.
Questo approccio mantiene il rapporto matematico intatto, ma riconosce che il mobile ha spazi diversi. Un h1 di 40px su un desktop è appropriato, ma su un mobile da 375px di larghezza potrebbe essere troppo grande e occupare lo spazio verticale prezioso.
Quando creare scale completamente separate
Se il tuo sito ha design molto diversi tra desktop e mobile (il che è sempre meno comune nel 2026 grazie al design responsivo), potrebbe avere senso definire scale completamente separate. Una scala per desktop, una per mobile. Fintanto che ogni scala è matematicamente coerente in sé stessa, vai bene.
Ma la pratica moderna è preferibilmente una scala, scalata leggermente per diverse dimensioni di schermo, mantenendo il rapporto armonioso.
Test e validazione
Una volta che hai definito la tua scala, devi testarla. Non solo nello strumento di design, ma in veri browser, su veri dispositivi, con vero contenuto.
Osservare la gerarchia visiva
Quando vedi la scala implementata nel vero sito con contenuto reale, chiedi: la gerarchia è chiara? Sai immediatamente quali testi sono titoli, quali sono corpo, quali sono ausiliari? Oppure tutto sembra circa lo stesso livello di importanza?
Se la gerarchia non è chiara, la tua scala potrebbe non essere abbastanza aggressiva. Aumentare il rapporto da 1.25 a 1.333 potrebbe aiutare. Oppure il testo del corpo potrebbe essere troppo grande, comprimendo i titoli. Sperimenta.
Scansionabilità
Prova a scannerizzare una pagina senza leggere completamente il testo. Riesci a capire velocemente la struttura? I titoli saltano fuori? Oppure devi leggere ogni riga per capire dove è la struttura?
Una scala bene calibrata rende la scannerizzazione facile. Il tuo occhio dovrebbe poter saltare ai titoli immediatamente.
Leggibilità a vari tagli
Leggi il corpo per un po’. È comodo? O le tue occhi si stancano? Il testo è troppo compresso o troppo distanziato? Leggi anche il testo piccolo per qualche minuto. È tollerabile anche se meno piacevole del corpo?
Il tuo test più importante è semplicemente leggere il sito per 5-10 minuti. Se ti senti comodo e il testo sembra ben proporzionato, hai vinto. Se certe parti ti disturbano o sembrano off, la scala ha bisogno di aggiustamento.
Raffinamenti nel tempo
Una volta implementata, la scala non è fissa. Man mano che usi il sito nel tempo, potresti scoprire che certi livelli non ti servono, o che avresti bisogno di un livello aggiuntivo tra due esistenti.
Aggiungere o rimuovere livelli
Se scopri che usi raramente un livello (per esempio, il molto piccolo a 10px), rimuovilo. Meno è meglio. Una scala con sei livelli è più pulita di una con dieci quando sei, di quei sei, sono più che sufficienti.
Se scopri che hai spesso bisogno di una dimensione tra due livelli della scala (per esempio, qualcosa tra il corpo 16px e il titolo 3 da 20px), aggiungi un livello. Forse una dimensione di 18px per “sottotitolo” o “testo enfatizzato”. La scala deve servire il sito reale, non un’idea astratta.
Mantieni il rapporto
Se aggiungi un livello, assicurati che mantienga il rapporto. Se la scala è 1.25 e hai 16px e 20px, il livello tra loro dovrebbe essere 16 × 1.25 = 20px. Aspetta, quello è già il titolo 3. Probabilmente non hai bisogno di un livello tra i due.
Ma se hai 16px e 32px, e vuoi un livello tra loro, il math suggerisce 16 × √1.25 = 19.8px (arrotonda a 20px). Puoi anche semplicemente mettere 18 o 20, e stai abbastanza vicino al rapporto che il tuo occhio percepirà armonia.
Conclusione: l’arte e la scienza della scala
Una scala tipografica bene costruita è dove l’arte e la scienza si incontrano. C’è la scienza dei rapporti matematici che creano armonia visiva. C’è l’arte nel scegliere come applicare questi rapporti al tuo sito specifico, come bilanciare leggibilità e gerarchia, come servire l’intenzione comunicativa del tuo design.
Non è qualcosa che devi decidere arbitrariamente ogni volta che usi testo. Stabilisci la scala una volta, la implementi nel tuo sistema, e poi usi semplicemente gli strumenti che hai creato. Il risultato è coerenza, professionalità, e un sito che comunica gerarchia e intento sin dal primo colpo.
La next volta che vedi un sito bellissimo e ti chiedi perché il testo sembra perfetto, la risposta è spesso una scala tipografica ben pensata. Non è magia. È il risultato di decisioni sistematiche basate su principi che la tipografia ha raffinato nel corso di secoli. Applicandoli nel web moderno, puoi creare lo stesso effetto di armonia nel tuo sito.
