# Sistema tipografico: scegliere un ruolo per ogni carattere

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

Scegliere i caratteri è la parte facile. Decidere con precisione come si comportano, a che misura, in che peso, per quale compito, è ciò che rende coerente un brand ovunque.

## The short version

- Un sistema tipografico è un piccolo insieme di ruoli con nome, come display, titolo, testo ed etichetta, ciascuno con carattere, peso, corpo, interlinea e maiuscole fissi.
- I corpi di un sistema tipografico vengono da un’unica scala, una misura di base moltiplicata per un rapporto costante, così ogni passo si lega agli altri.
- La maggior parte dei brand ha bisogno di uno o due caratteri; il sistema crea varietà con ruoli, pesi e corpi.
- I design token salvano ogni ruolo come valore con nome, così siti, app e file di design usano le stesse decisioni tipografiche.
- Post social, slide e siti richiedono corpi diversi per gli stessi ruoli, quindi un buon sistema elenca ogni ruolo per canale.

Un **sistema tipografico** è l’insieme di regole che decide come si comporta il testo in un brand: pochi ruoli con nome (display, titolo, testo, etichetta), ciascuno con un carattere, un peso, un corpo, un’interlinea e un uso delle maiuscole, tutti dimensionati da un’unica scala e salvati come token, così ogni designer e sviluppatore usa gli stessi valori. I caratteri danno una voce al brand. Il sistema rende coerente quella voce, così un titolo su un manifesto, un sito e una storia sembrano venire dallo stesso posto. Ecco come costruirne uno.

## I ruoli in un sistema tipografico

Parti dai compiti, non dai caratteri. Ogni testo che un brand pubblica svolge uno tra pochi compiti, e ogni compito diventa un ruolo. La maggior parte dei brand ne ha bisogno da cinque a sette.

| Ruolo | Compito | Impostazione tipica |
| --- | --- | --- |
| Display | Le parole più grandi: frasi di campagna, copertine, titoli principali | Carattere dei titoli, grassetto, interlinea stretta, poche parole |
| Titolo | Titoli di sezione e titoli dei post | Carattere dei titoli, semibold o grassetto, iniziale maiuscola solo all’inizio |
| Sottotitolo | Introduce una sezione, sommari | Carattere del testo, peso medio, un passo sopra il testo |
| Testo | Testo da leggere | Carattere del testo, regolare 400, interlinea intorno a 1,5 |
| Etichetta e sopratitolo | Piccoli testi sopra i titoli, tag, pulsanti | Carattere del testo, semibold, spesso maiuscolo con spaziatura aggiunta |
| Didascalia | Crediti, note, caratteri piccoli | Carattere del testo, regolare, il passo più piccolo |
| Numerico | Prezzi, statistiche, tabelle | Cifre tabulari perché i numeri si allineino |

Sette ruoli coprono quasi ogni brand. Se non sai dire che compito svolge uno stile, non è un ruolo; è un’eccezione.

Un post verticale in stile newsletter con un piccolo sopratitolo, un titolo grande e una breve riga di supporto

Tre ruoli su un post: un sopratitolo, un titolo e una riga di testo. Ognuno è subito distinto, così l’occhio sa da dove iniziare.

## Quanti caratteri serve a un sistema tipografico di brand

Di solito uno o due. Una famiglia in tre pesi può reggere un intero sistema. Due caratteri, uno per i titoli e uno per il testo, aggiungono carattere. Un terzo è giustificato solo per un compito specifico come codice o dati. La varietà viene da ruoli, corpi e pesi, non da più caratteri. Gli [abbinamenti di Google Fonts](https://gradiently.design/it/guide/google-fonts-pairings) e i [caratteri del brand](https://gradiently.design/it/guide/brand-fonts) ti aiutano a scegliere.

### Evita

- Un nuovo carattere per ogni campagna
- Corpi scelti a occhio su ogni design
- Nove pesi caricati, tre usati
- Regole diverse sulle maiuscole in team diversi
- Una guida di stile che elenca caratteri ma non ruoli

### Fai

- Una o due famiglie per tutto
- Ogni corpo da un’unica scala
- Solo i pesi che servono ai ruoli
- Una regola scritta sulle maiuscole per titoli e pulsanti
- Ruoli con carattere, peso, corpo, interlinea e maiuscole

## Costruisci una scala tipografica

Una scala tipografica sceglie un corpo di base e lo moltiplica per lo stesso rapporto a ogni passo verso l’alto. I passi sono legati tra loro, quindi due corpi qualsiasi del sistema sembrano voluti insieme. Un rapporto di 1,25 va bene per interfacce e pagine dense; 1,333 o 1,5 dà più effetto per il lavoro editoriale e di marketing. La [scala tipografica](https://gradiently.design/it/guide/typographic-scale) spiega i rapporti più a fondo.

| Passo | Misura a 1,25 da 16 px | Ruolo |
| --- | --- | --- |
| Passo 0 | 16 px | Testo |
| Passo 1 | 20 px | Sottotitolo, testo grande |
| Passo 2 | 25 px | Titolo piccolo |
| Passo 3 | 31 px | Titolo |
| Passo 4 | 39 px | Titolo grande |
| Passo 5 | 49 px | Display su mobile |
| Passo 6 | 61 px | Display su desktop |
| Passo meno 1 | 13 px | Didascalia, etichetta |

Una scala web da una base di 16 px con rapporto 1,25, arrotondata a pixel interi. Ogni ruolo prende un passo e lo tiene.

## Salva il sistema come token

Un sistema che vive solo in un PDF si sfalda. I token sono valori con nome che leggono sia il codice sia i file di design, quindi cambiando un valore si aggiorna tutto. Dai ai token nomi di ruolo, mai di misura: `--type-heading` sopravvive a un restyling, `--type-31` no. I [design token](https://gradiently.design/it/guide/design-tokens) trattano l’idea più ampia.

```css
:root {
  --font-heading: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;

  --type-display: 600 clamp(3.0625rem, 6vw, 3.8125rem) / 1.05 var(--font-heading);
  --type-heading: 600 1.9375rem / 1.15 var(--font-heading);
  --type-subheading: 500 1.25rem / 1.4 var(--font-body);
  --type-body: 400 1rem / 1.5 var(--font-body);
  --type-label: 600 0.8125rem / 1.2 var(--font-body);
}

h1 { font: var(--type-display); }
h2 { font: var(--type-heading); }
p { font: var(--type-body); }
.eyebrow { font: var(--type-label); text-transform: uppercase; letter-spacing: 0.08em; }
.price { font-variant-numeric: tabular-nums; }
```

Ogni ruolo è un token con la sintassi abbreviata di font, così peso, corpo, interlinea e famiglia viaggiano sempre insieme. I valori corrispondono alla scala sopra, in rem.

## Un ruolo, corpi diversi per canale

Un titolo su un sito e un titolo su un post Instagram svolgono lo stesso compito a corpi molto diversi, perché uno si legge a distanza di braccio su un grande schermo e l’altro si rimpicciolisce nel feed di un telefono. Tieni identici i ruoli e dai a ogni canale i propri corpi.

| Ruolo | Sito | Post social 1080×1350 | Slide 1920×1080 |
| --- | --- | --- | --- |
| Display | da 49 a 61 px | da 140 a 200 px | da 120 a 160 px |
| Titolo | 31 px | da 90 a 120 px | da 88 a 112 px |
| Testo | 16 px | da 40 a 48 px | da 48 a 64 px |
| Etichetta e sopratitolo | 13 px | da 28 a 32 px | da 36 a 44 px |

Stessi ruoli, stessi caratteri, stessi pesi, corpi diversi. La [dimensione dei caratteri per i post Instagram](https://gradiently.design/it/guide/font-size-for-social-media) e i [caratteri per le presentazioni](https://gradiently.design/it/guide/typography-for-presentations) spiegano i numeri per social e slide.

## Come costruire il tuo sistema tipografico

1. **Raccogli ciò che già pubblichi** Fai screenshot di sito, post, email e slide. Cerchia ogni stile di testo distinto. La maggior parte dei brand ne trova molti più di quanti pensava.
2. **Raggruppa gli stili in ruoli** Unisci i quasi duplicati. Punta a cinque o sette ruoli che coprano tutto ciò che hai cerchiato.
3. **Scegli i caratteri per i ruoli** Di solito un carattere per i titoli e uno per il testo. Verifica che la licenza copra web, app ed eventuale uso nel logo.
4. **Imposta la scala e i dettagli** Scegli una base e un rapporto, poi fissa peso, interlinea, maiuscole e spaziatura di ogni ruolo. Decidi una volta sola le maiuscole dei titoli; [iniziale maiuscola solo all’inizio o ogni parola](https://gradiently.design/it/guide/title-case-vs-sentence-case) aiuta.
5. **Pubblicalo come token e come scheda di una pagina** Token per codice e file di design, una singola scheda visiva nella tua [guida di stile del brand](https://gradiently.design/it/guide/brand-style-guide) per tutti gli altri.

Per i post social e le presentazioni di ogni giorno, un brand kit di Gradiently (con Pro) contiene i caratteri per titoli e testo del tuo sistema, compresi i file di font caricati, insieme a loghi, colori e voce. I nuovi design partono da quei due caratteri, e il Designer applica il kit quando imposta un design, così la divisione tra titolo e testo regge senza che nessuno debba ricordarla.

## FAQ

### Che cos’è un sistema tipografico?

Un insieme di ruoli tipografici con nome, come display, titolo, testo ed etichetta, ciascuno con carattere, peso, corpo, interlinea e maiuscole fissi, di solito salvati come design token.

### Quanti caratteri dovrebbe usare un brand?

Uno o due per la maggior parte dei brand: uno per i titoli e uno per il testo. Un terzo vale la pena solo per un compito specifico come codice o dati.

### Che cos’è una scala tipografica?

Una sequenza di corpi ottenuta moltiplicando una misura di base per un rapporto costante, come 1,25, così ogni corpo del sistema si lega agli altri.

### Come vanno chiamati i token tipografici?

Per ruolo, come type-heading o type-body, non per misura. I nomi di ruolo restano significativi quando i corpi cambiano.

### I post social devono usare gli stessi corpi di un sito?

No. Tieni gli stessi ruoli e caratteri, ma usa corpi molto più grandi sui post, perché si vedono piccoli nel feed di un telefono.