Scala Tipografica: Perché le Dimensioni dei Font Devono Seguire un Rapporto

Perché alcune tipografie sembrano armoniose e professionali mentre altre sembrano casuali? Spesso la risposta è nella scala: i progetti con una tipografia solida usano dimensioni di font che seguono un rapporto matematico coerente, non valori arbitrari come 12, 16, 20, 28px scelti a caso.

Scale Tipografiche Comuni

• Minor Second (1.067): Differenze sottili, ideale per UI dense dove lo spazio è prezioso.
• Major Second (1.125): Gerarchia chiara ma compatta. Molto usato nelle app web.
• Minor Third (1.200): Buon equilibrio tra compattezza e gerarchia visiva.
• Major Third (1.250): Differenze visivamente evidenti, ottimo per landing page.
• Perfect Fourth (1.333): La scala più popolare nel web design moderno. Buona gerarchia senza sbalzi eccessivi.
• Golden Ratio (1.618): Differenze dramatiche, ideale per display e titolazioni grandi.

Come Usare il Generatore

1. Imposta la dimensione base del corpo del testo (tipicamente 16px o 1rem).
2. Scegli il rapporto della scala.
3. Il generatore calcola tutti i livelli della gerarchia e li mostra in anteprima con testo reale.
4. Esporta come CSS custom properties (--text-sm, --text-base, --text-lg ecc.).