Scala tipografica: definire una progressione coerente di dimensioni

Come scegliere dimensioni tipografiche coerenti usando rapporti proporzionali e variabili CSS.

Uno degli errori più comuni per chi inizia a fare web design è scegliere le dimensioni dei font (font-size) “a occhio”.

Titolo grande: Mettiamo 45px, vediamo come sta.
Titolo medio: Magari 28px?
Testo: 16px.

Questo approccio rende difficile mantenere una gerarchia visiva coerente. Una soluzione più controllata è usare una scala tipografica (type scale).

Cos’è una Scala Tipografica?

È una serie di dimensioni del font legate tra loro da un rapporto matematico (ratio). Proprio come le note musicali in una scala aumentano di frequenza seguendo una matematica precisa, le dimensioni del testo dovrebbero moltiplicarsi per un fattore fisso.

Esempio: La Scala “Minor Third” (Ratio: 1.200)

Se prendiamo come base 16px (1rem) e vogliamo trovare il font successivo, lo moltiplichiamo per 1.2.

Base (p): 1rem (16px)
h6: 1.2rem (19.2px)
h5: 1.44rem (23.04px)
h4: 1.728rem (27.65px)
h3: 2.074rem (33.18px)
h2: 2.488rem (39.81px)
h1: 2.986rem (47.78px)

Usando queste esatte dimensioni, i tuoi titoli avranno un “ritmo” naturale. Sembreranno istintivamente corretti, perché l’occhio umano è attratto dalle proporzioni matematiche.

Implementazione con le Variabili CSS

Il modo moderno per gestire questa scala non è scriverla a mano su ogni elemento, ma salvarla in una serie di Variabili CSS nel tuo :root.

:root {
  /* Tipo di scala: Major Third (1.250) */
  --text-xs: 0.8rem;
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.25rem;   /* 20px */
  --text-xl: 1.563rem;  /* 25px */
  --text-2xl: 1.953rem; /* 31px */
  --text-3xl: 2.441rem; /* 39px */
  --text-4xl: 3.052rem; /* 48px */
}

body {
  font-size: var(--text-base);
}

h1 {
  font-size: var(--text-4xl);
}

h2 {
  font-size: var(--text-3xl);
}

Dove trovo questi numeri?

Non devi fare i calcoli a mano. Esistono strumenti online gratuiti come Type-Scale.com. Tu scegli la dimensione base (es. 16px) e il rapporto (es. “Perfect Fourth” per siti dal forte contrasto, o “Minor Second” per dashboard con tanti dati e poco spazio), e il tool ti genererà le variabili CSS pronte da copiare e incollare nel tuo :root.

Usare una scala tipografica non sostituisce il giudizio visivo, ma offre una base ordinata da cui partire e rende più semplice mantenere coerenza fra titoli, testi e componenti.