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
FondamentiMetadati 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.
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.
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:
| Stile | Specifiche | Token |
|---|---|---|
Intestazione 1 | font-family: Titillium Web | heading-1 heading-1-lg |
Intestazione 2 | font-family: Titillium Web | heading-2 heading-2-lg |
Intestazione 3 | font-family: Titillium Web | heading-3 heading-3-lg |
Intestazione 4 | font-family: Titillium Web | heading-4 heading-4-lg |
Intestazione 5 | font-family: Titillium Web | heading-5 heading-5-lg |
Intestazione 6 | font-family: Titillium Web | 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) | Specifiche | Nome token |
|---|---|---|
Lead paragraph | type: Titillium Web | lead lead-lg |
Body text sans | font-family: Titillium Web | body-sans body-sans-lg |
Body text serif | font-family: Lora | 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) | Specifiche | Nome token |
|---|---|---|
Caption | font-family: Titillium Web | caption |
Label | font-family: Titillium Web | 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.