# Basi di tipografia: dimensione, peso, spaziatura e ritmo

[Canonical HTML page](https://gradiently.design/it/guide/typography-basics)

Gran parte di ciò che rende professionale un testo non è il font. Sono sei decisioni su dimensione, peso e spazio, e ognuna ha un valore predefinito sensato.

## The short version

- La tipografia si regge su sei decisioni: dimensione, peso, interlinea, spaziatura tra le lettere, allineamento e lunghezza della riga.
- Una scala tipografica, in cui ogni dimensione è più grande della precedente secondo un rapporto fisso, dà a un design una gerarchia chiara e coerente.
- Il testo corrente si legge bene con un’interlinea di circa 1,4 a 1,6 volte la dimensione del font, mentre i titoli grandi ne richiedono meno, circa da 1,0 a 1,2.
- Righe di circa 45 a 75 caratteri sono l’intervallo raccomandato più spesso per una lettura comoda.
- Due o tre pesi bastano per la maggior parte dei design, e devono differire chiaramente, come regular e bold invece di regular e medium.

Le **basi di tipografia** si riducono a sei decisioni: la **dimensione** di ogni porzione di testo, il suo **peso**, l’**interlinea**, la **spaziatura tra le lettere**, l’**allineamento** e la **lunghezza della riga**. Se le azzecchi, quasi qualsiasi carattere decente sembra professionale; se le sbagli, anche il miglior font del mondo sembra da dilettanti. Ognuna ha un valore predefinito sensato, indicato qui sotto, da cui puoi allontanarti di proposito.

## Dimensione: usa una scala tipografica

Scegliere le dimensioni una alla volta porta a una pagina piena di dimensioni quasi uguali e senza un ordine chiaro. Una **scala tipografica** risolve il problema: parti da una dimensione di base e moltiplica per lo stesso rapporto a ogni passo. Il rapporto dà il carattere. Rapporti piccoli, come 1,2, sembrano calmi e compatti; quelli grandi, come 1,5, sembrano drammatici ed editoriali.

| Passo | Rapporto 1,25 da 16 px | Uso tipico |
| --- | --- | --- |
| Piccolo | 12,8 px | Didascalie, etichette |
| Base | 16 px | Testo corrente |
| Passo 1 | 20 px | Paragrafo d’apertura, testo grande |
| Passo 2 | 25 px | Sottotitoli |
| Passo 3 | 31,25 px | Titoli di sezione |
| Passo 4 | 39 px | Titoli di pagina |
| Passo 5 | 48,8 px | Titoli hero |

Una scala 1,25 da una base di 16 pixel. Arrotonda i numeri come preferisci; il punto è che ogni dimensione è legata alle altre.

```css
:root {
  --step--1: 0.8rem;     /* 12.8px */
  --step-0: 1rem;        /* 16px   */
  --step-1: 1.25rem;     /* 20px   */
  --step-2: 1.5625rem;   /* 25px   */
  --step-3: 1.953rem;    /* 31.25px */
  --step-4: 2.441rem;    /* 39px   */
  --step-5: 3.052rem;    /* 48.8px */
}

body { font-size: var(--step-0); }
h3   { font-size: var(--step-2); }
h2   { font-size: var(--step-3); }
h1   { font-size: var(--step-5); }
```

La stessa scala come proprietà personalizzate CSS, con una dimensione radice di 16 pixel. Usa solo i passi della scala.

Nei post social la tela è più grande, quindi i numeri crescono ma l’idea è la stessa. Su un post largo 1080 pixel, un titolo di circa 90 a 120 pixel e una riga di dettaglio di circa 40 a 56 mantengono un salto netto tra i due e si leggono su un telefono.

## Peso: meno pesi, passi più chiari

Il peso è lo spessore dei tratti, di solito numerato da 100 (thin) a 900 (black), con 400 come regular e 700 come bold. Due o tre pesi bastano per la maggior parte dei design. La chiave è che pesi vicini devono sembrare diversi: regular contro bold si legge come un contrasto voluto, regular contro medium spesso sembra un errore.

### Confuso

- Cinque pesi in una pagina
- Regular 400 contro medium 500 per dare enfasi
- Pesi light o thin per il testo corrente piccolo
- Bold usato per paragrafi interi

### Chiaro

- Due o tre pesi, ognuno con un compito
- Regular 400 contro bold 700 o semibold 600
- Regular o medium per il testo corrente piccolo
- Bold per poche parole che devono risaltare

## Interlinea: spazio tra le righe

L’interlinea è la distanza tra una riga e la successiva. Il testo corrente ha bisogno d’aria per essere letto comodamente: circa **1,4 a 1,6** volte la dimensione del font è un intervallo affidabile. I titoli grandi ne richiedono meno, circa **1,0 a 1,2**, perché a grandi dimensioni gli spazi sembrano molto più ampi di quanto siano. Le righe lunghe richiedono un po’ più di interlinea di quelle corte, così l’occhio trova l’inizio della riga successiva. [Interlinea e lunghezza della riga](https://gradiently.design/it/guide/line-height-and-line-length) approfondisce.

## Spaziatura tra le lettere: di solito lasciala com’è

I caratteri sono spaziati dai loro designer per le dimensioni previste, quindi il testo corrente raramente va regolato. Due eccezioni meritano di essere conosciute. I titoli grandi spesso stanno meglio leggermente più stretti, con un piccolo valore negativo come da -0.01em a -0.02em. Il testo in maiuscolo e le etichette piccole richiedono il contrario: un po’ di spazio in più, circa da 0.05em a 0.1em, perché le maiuscole sono state disegnate per stare accanto alle minuscole. [La spaziatura tra le lettere](https://gradiently.design/it/guide/letter-spacing) spiega i dettagli.

## Allineamento

Il testo allineato a sinistra, con il margine destro irregolare, è la scelta predefinita per un motivo: ogni riga inizia nello stesso punto, quindi l’occhio la trova facilmente. Il testo centrato si adatta ai pezzi brevi, come un titolo, una citazione o un invito, e diventa faticoso oltre poche righe. Il testo giustificato sembra ordinato in stampa, dove il software sa sillabare bene, ma sul web spesso apre spazi irregolari tra le parole.

Un post verticale con un titolo grande, una piccola etichetta spaziata sopra e una riga di supporto sotto

Tre dimensioni da una sola scala, due pesi, interlinea stretta sul titolo e un po’ di spaziatura in più sulla piccola etichetta sopra.

## Lunghezza della riga: la giustezza

La lunghezza di una riga, la **giustezza**, conta quanto la sua dimensione. Righe troppo lunghe rendono difficile trovare la successiva; righe troppo corte spezzano il ritmo di lettura con continui ritorni a capo. Un intervallo di circa **45 a 75 caratteri** per riga è quello raccomandato più spesso per il testo corrente. Sul web, l’unità `ch` lo rende facile.

```css
article p {
  max-width: 65ch;   /* about 65 characters per line */
  line-height: 1.55;
}

h1 {
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance; /* evens out headline lines where supported */
}

.label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--step--1);
}
```

Giustezza, interlinea e spaziatura in un piccolo foglio di stile. `text-wrap: balance` viene ignorato senza problemi dove non è supportato.

## Ritmo: una spaziatura che raggruppa

Lo spazio dice ai lettori cosa va insieme. Un titolo dovrebbe stare più vicino al paragrafo che introduce che a quello precedente, quindi metti più spazio sopra i titoli che sotto. Mantieni costante la spaziatura tra i paragrafi, e usa un’unica unità di spaziatura, spesso basata sull’interlinea del testo corrente, ovunque. Quando lo spazio è usato con coerenza, la pagina acquista un ritmo che la fa sembrare calma anche quando è piena. [La gerarchia visiva](https://gradiently.design/it/guide/visual-hierarchy) parte da qui.

1. **Scegli una dimensione per il testo** 16 pixel o più sugli schermi; molto di più nei post social.
2. **Scegli un rapporto di scala** 1,2 per un effetto calmo e compatto, 1,25 per quasi tutto, 1,333 o più per un dramma editoriale.
3. **Imposta due pesi** Regular per la lettura, bold o semibold per enfasi e titoli.
4. **Imposta le interlinee** Circa 1,5 per il testo corrente, circa 1,1 per i titoli grandi.
5. **Limita la giustezza** Circa 65 caratteri per il testo corrente.
6. **Spazia con un’unità** Un solo passo di spaziatura, riutilizzato, con più spazio sopra i titoli che sotto.

Con queste basi al loro posto, la scelta del carattere diventa la parte divertente e non la soluzione a un problema. Inizia da [gli abbinamenti di font](https://gradiently.design/it/guide/font-pairing) e [serif o sans serif](https://gradiently.design/it/guide/serif-vs-sans-serif).

## FAQ

### Quali sono le regole di base della tipografia?

Usa una scala tipografica coerente, due o tre pesi chiaramente diversi, un’interlinea di circa 1,4 a 1,6 per il testo corrente, righe di circa 45 a 75 caratteri, l’allineamento a sinistra per i testi lunghi e una spaziatura coerente.

### Qual è una buona dimensione del testo per i siti web?

16 pixel sono un minimo comune per il testo corrente sugli schermi, e molti siti usano valori leggermente più grandi.

### Che interlinea dovrei usare?

Circa 1,4 a 1,6 volte la dimensione del font per il testo corrente, e circa 1,0 a 1,2 per i titoli grandi.

### Che cos’è una scala tipografica?

Un insieme di dimensioni dei font in cui ognuna è più grande della precedente secondo un rapporto fisso, come 1,25, così ogni dimensione è legata alle altre e la gerarchia resta coerente.