Tipografia

I caratteri, gli stili e le regole tipografiche da usare per presentare i contenuti di un'interfaccia digitale in modo chiaro, leggibile ed efficace

Fondamenti

Metadati e link per approfondire

Caratteri tipografici

Nell'ambito di questo design system puoi utilizzare tre diversi caratteri tipografici, ognuno dei quali ha un caso d'uso raccomandato specifico:

Titillium Web

Titillium Web è il nostro carattere principale. Disponibile in diverse varianti, è un carattere geometrico che garantisce flessibilità nel design. È raccomandato per titoli, sottotitoli, elementi interattivi e brevi paragrafi di testo.

Inizio componente:Fine componente.
Risoluzione

Lora

Lora è il carattere tipografico nato espressamente per facilitare la lettura dei testi su dispostivi digitali. Essendo un font con le grazie (serif), è raccomandato per paragrafi di testo più lunghi.

Inizio componente:Fine componente.
Risoluzione

Roboto Mono

Roboto Mono, variante monospaziata della famiglia Roboto, è un carattere ideato per la visualizzazione di dati tecnici. La sua uniformità dei caratteri è utile per rappresentare numeri, codici, calcoli matematici, e fornire esempi di stringhe di linguaggi di programmazione.

Stili tipografici

Gli stili tipografici disponibili sono divisi in tre categorie:

  • Intestazioni (headings)
  • Corpo del testo (body)
  • Etichette e didascalie (label, caption)

Intestazioni

La lista di tutti gli stili per creare le intestazioni di una pagina:

StileSpecificheToken

Intestazione 1

font-family: Titillium Web
font-size: 40/48px
line-height: 48/56px
letter-spacing: -1
font-weight: Bold

heading-1
heading-1-lg

Intestazione 2

font-family: Titillium Web
size: 32/40px
line height: 40/48px
letter spacing: -1
weight: Bold

heading-2
heading-2-lg

Intestazione 3

font-family: Titillium Web
font-size: 28/32px
line height: 32/40px
font-weight: Bold

heading-3
heading-3-lg

Intestazione 4

font-family: Titillium Web
font-size: 24/32px
line-height: 32/40px
font-weight: SemiBold

heading-4
heading-4-lg
Intestazione 5

font-family: Titillium Web
font-size: 20/24px
line-height: 24/32px
font-weight: SemiBold

heading-5
heading-5-lg
Intestazione 6

font-family: Titillium Web
font-size: 16/18px
line-height: 24px
font-weight: SemiBold

heading-6
heading-6-lg

Corpo del testo

La lista di tutti gli stili per il corpo del testo di una pagina:

Stile (anteprima non disponibile)SpecificheNome token

Lead paragraph

type: Titillium Web
size: 20/24px
line height: 32px
weight: Regular

lead
lead-lg

Body text sans

font-family: Titillium Web
font-size: 12/18px
line-height: 24px
font-weight: Regular

body-sans
body-sans-lg

Body text serif

font-family: Lora
font-size: 16/18px
line-height: 24px
font-weight: Regular

body-serif
body-serif-lg

Etichette e didascalie

La lista degli stili disponibili per etichette, didascalie e altri elementi testuali minori:

Stile (anteprima non disponibile)SpecificheNome token

Caption

font-family: Titillium Web
font-size: 14px
line-height: 16px
font-weight: Regular

caption

Label

font-family: Titillium Web
font-size: 16/18px
line-height: 24px
font-weight: SemiBold

label
label-lg

Consigli d'uso

Gli stili delle intestazioni servono a definire le principali sezioni di una pagina e a organizzare i paragrafi di un testo molto lungo.

Lo stile lead text è raccomandato per creare il sommario di una pagina o sezione.

Tutti gli stili di tipo body sono dedicati al corpo del testo. Seleziona la variante sans o serif in base alla lunghezza. Tradizionalmente, i testi molto lunghi sono in serif mentre quelli brevi o molto brevi sono in sans.

Lo stile label può essere utilizzato per elementi testuali composti da una o due parole, come ad esempio le etichette di un form.

Lo stile caption è dedicato a tutti questi microtesti come didascalie o messaggi di supporto che non necessitano un'attenzione primaria.

Lunghezza dei paragrafi

Per una migliore leggibilità dei contenuti ti consigliamo di mantenere i paragrafi di testo entro una lunghezza ragionevole, evitando blocchi di testo troppo lunghi.

Raccomandiamo ad esempio una lunghezza massima di 75 caratteri per riga.

Ritmo verticale

Il ritmo verticale è lo spazio occupato dalle lettere su ogni riga di testo e lo spazio tra le righe (leading).

La linea di base è di 4px (baseline). Lo spazio occupato da un elemento testuale o tra elementi diversi è un multiplo di questo valore.

Il risultato è una disposizione uniforme e un aspetto coeso.

Gerarchia visiva

La gerarchia tipografica è essenziale per guidare l'utente attraverso il contenuto e creare una struttura visiva chiara.

Ti consigliamo di non superare quattro livelli di intestazione (H1, H2, H3 e H4) per pagina, facendo attenzione a definire l’importanza di ciascuna sezione.