Scala Tipografica Musicale. Calcolatore di Scala Modulare

Strumento online gratuito per creare gerarchie visive armoniose con scale modulari basate su proporzioni musicali. Genera variabili CSS pronte per il tuo design web.

Configurazione

px

La dimensione del tuo testo di paragrafo (di solito 16px).

Determina quanto cresce la dimensione ad ogni gradino.

Valori calcolati

Anteprima

Variabili copiate negli appunti!

Studio Strumenti

Vuoi questo strumento sul tuo sito?

Personalizza i colori e la modalità scura per WordPress, Notion o il tuo sito.

Domande frequenti

Cos'è una scala modulare tipografica?

È un metodo per determinare le dimensioni dei caratteri basato su un rapporto matematico costante. Come in musica, dove le note hanno relazioni armoniche, la scala modulare crea una gerarchia visiva equilibrata e prevedibile.

Perché usare gli intervalli musicali nel design?

Gli intervalli musicali sono proporzioni che il cervello umano percepisce come armoniose. Applicarle alle dimensioni del testo crea una struttura visiva che risulta corretta e professionale, invece di scegliere le dimensioni a caso.

Cos'è la Sezione Aurea in tipografia?

È la proporzione 1,618, nota come Sezione Aurea. Crea scale molto drammatiche ed eleganti in cui ogni gradino della gerarchia cresce in modo esponenziale. Perfetta per portfolio o siti a vocazione artistica.

Come implemento la scala nel mio file CSS?

Lo strumento genera variabili CSS (token) nel formato :root { --step-N: Xrem; }. Copiale nel tuo file CSS principale e usale con var(--step-N) per mantenere la coerenza tipografica su tutto il sito.

# L'armonia invisibile del web design

La Scala Tipografica Musicale applica la matematica degli intervalli musicali al design tipografico. Proprio come una composizione musicale è governata da proporzioni precise, un design visivo solido beneficia di una struttura matematica che mette in relazione tutte le dimensioni tra loro.

# Come funziona la scala modulare

La formula

La progressione è semplice: Dimensione = Base × Rapporton. Il gradino 0 è il tuo testo base. Il gradino 1 è un piccolo sottotitolo. Il gradino 4 o 5 potrebbe essere il tuo H1 principale. La stessa costante moltiplicativa garantisce che tutte le relazioni siano coerenti.

Perché "Musicale"

I pitagorici scoprirono che dividere una corda in proporzioni semplici (1:2, 2:3, 3:4) produceva suoni consonanti. Questi intervalli — ottava, quinta giusta e quarta giusta — sono esattamente i rapporti tipografici. Stai componendo musica visiva.

# Scegliere il rapporto giusto

Per interfacce dense (dashboard, tabelle) usa rapporti piccoli come 1,125 o 1,2. Per siti editoriali o portfolio, usa rapporti più espressivi come 1,5 o 1,618.
Non limitare la scala al solo font-size. Le stesse variabili CSS funzionano per margin, padding e gap. Quando lo spazio bianco segue la stessa progressione matematica del testo, il design raggiunge un livello di coesione che tutti avvertono ma in pochi sanno spiegare.

Riferimenti Bibliografici