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 design system .italia puoi utilizzare tre diversi caratteri tipografici, ognuno dei quali ha un caso d'uso raccomandato specifico:
Titillium
Titillium è il carattere principale dell'identità del design system .italia, per realizzare servizi pubblici digitali sia su scala nazionale che su scala territoriale e/o locale.
La font, il cui nome rende omaggio al compositore Arvo Pärt e alla sua tecnica tintinnabuli, nasce nel 2008 come progetto didattico all’interno dell’Accademia di Belle Arti di Urbino e, dalla prima applicazione d'uso per il rinnovo del sito governo.it nel 2015, si è guadagnata sul campo il ruolo di carattere di riferimento e distintività per il digitale della Pubblica Amministrazione italiana.
Titillium Web (ufficiale)
Disponibile in diverse varianti, questa è la versione ufficiale integrata e disponibile in tutte le risorse del design system .italia. È un carattere geometrico che garantisce flessibilità nel design, raccomandato per titoli, sottotitoli, elementi interattivi e paragrafi di testo.
Titillium Pro (in sperimentazione)
È in corso la sperimentazione di questa nuova versione. Se avrà esisti positivi, sarà possibile sceglierla come alternativa in tutte le risorse di .italia. Risolve infatti problematiche di leggibilità, rimanendo retrocompatibile con le versioni precedenti ed estendendone in modo significativo il set di caratteri. Titillium Pro è disponibile in open source tramite la repository GitHub dedicata, curata dagli autori.
Se sperimentate in autonomia questa versione Pro in servizi digitali pubblici, sarebbe molto interessante avere feedback.
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 (lineare) o serif (con grazie) 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.
Ti raccomandiamo 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.