Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Typography

Typography

Font

Le Linee Guida per il design degli applicativi di Regione Lombardia prevedono solo due famiglie di caratteri:

  • il font senza grazie, o sans serif, Titillium Web.
  • il font monospace con dimensioni di caratteri normalizzate Roboto Mono.

Tipografia responsive

Esattamente come Bootstrap Italia, Bootstrap Regione Lombardia ridimensiona la dimensione di intestazioni e testo modificando le proprietà font-size e line-height dell’elemento tramite una media query che imposta dimensioni lievemente maggiori per schermi con dimensioni maggiori di 576px.
Questa impostazione, unita all’utilizzo di dimensioni in rem o in semplici valori numerici all’interno del CSS, fa sì che testo e altre proprietà occupino più spazio quando lo schermo lo permette.

Intestazioni

Tutte le intestazioni HTML, da <h1> fino a <h6>, sono disponibili, anche se è buona norma non utilizzare più di 4 livelli di intestazione.

L’interlinea è impostata con il rapporto di 1.2 per tutte le intestazioni.

Il Design System di Regione Lombardia non prevede il bold per le intestazioni.
Per eliminarlo è sufficiente aggiungere la classe fw-normal al tag <h*>.

Intestazione di tipo h1

Intestazione di tipo h2

Intestazione di tipo h3

Intestazione di tipo h4

Intestazione di tipo h5
Intestazione di tipo h6

1
2
3
4
5
6

<h1 class="fw-normal">Intestazione di tipo h1</h1>
<h2 class="fw-normal">Intestazione di tipo h2</h2>
<h3 class="fw-normal">Intestazione di tipo h3</h3>
<h4 class="fw-normal">Intestazione di tipo h4</h4>
<h5 class="fw-normal">Intestazione di tipo h5</h5>
<h6 class="fw-normal">Intestazione di tipo h6</h6>

Queste le dimensioni nel dettaglio (dimensione del testo, peso del font e interlinea):

Intestazione Mobile Schermo > 576px

h1

 40px (2.5rem)
font-weight: 700 400
line-height: 1.2		 48px (3rem)
font-weight: 700 400
line-height: 1.2

h2

 32px (2rem)
font-weight: 700 400
line-height: 1.2		 40px (2.5rem)
font-weight: 700 400
line-height: 1.2

h3

 28px (1.75rem)
font-weight: 700 400
line-height: 1.2		 32px (2rem)
font-weight: 700 400
line-height: 1.2

h4

 24px (1.5rem)
font-weight: 600 400
line-height: 1.2		 28px (1.75rem)
font-weight: 600 400
line-height: 1.2

h5

 20px (1.25rem)
font-weight: 600 400
line-height: 1.2		 24px (1.5rem)
font-weight: 600 400
line-height: 1.2

h6

 16px (1rem)
font-weight: 600 400
line-height: 1.2		 18px (1.125rem)
font-weight: 600 400
line-height: 1.2

Nota: il font-weight originario viene reimpostato a 400 dalla classe fw-normal.

Body text

Il semplice testo prevede una dimensione del testo di 16px/1rem su dispositivi mobili e 18px/1.125rem su schermi con dimensioni maggiori di 576px.

L’interlinea è impostata con il rapporto di 1.5.

Ullamco laboris nisi ut aliquid ex ea commodi consequat. Curabitur blandit tempus ardua ridiculus sed magna. Curabitur est gravida et libero vitae dictum. Phasellus laoreet lorem vel dolor tempus vehicula. Magna pars studiorum, prodita quaerimus.

Ullamco laboris nisi ut aliquid ex ea commodi consequat. Curabitur blandit tempus ardua ridiculus sed magna. Curabitur est gravida et libero vitae dictum. Phasellus laoreet lorem vel dolor tempus vehicula. Magna pars studiorum, prodita quaerimus.

1
2

<p>Ullamco laboris nisi ut aliquid ex ea commodi consequat. Curabitur blandit tempus ardua ridiculus sed magna. Curabitur est gravida et libero vitae dictum. Phasellus laoreet lorem vel dolor tempus vehicula. Magna pars studiorum, prodita quaerimus.</p>
<p>Ullamco laboris nisi ut aliquid ex ea commodi consequat. Curabitur blandit tempus ardua ridiculus sed magna. Curabitur est gravida et libero vitae dictum. Phasellus laoreet lorem vel dolor tempus vehicula. Magna pars studiorum, prodita quaerimus.</p>

Dates & Labels

Dates & Labels
26 Maggio 2024 | Piazza Cinque Giornate, Milano 

1
2
3
4

<p class="font-monospace lh-base grey-color-600">
Dates & Labels<br/>
26 Maggio 2024 | Piazza Cinque Giornate, Milano
</p>

TIPOLOGIA
CONTENT TYPE 

1
2
3
4

<p class="fw-semibold small lh-base primary-color-v8">
TIPOLOGIA<br/>
CONTENT TYPE
</p>

Tag

Tags
Sanità 

1
2
3
4

<p class="fw-semibold small lh-base primary-color-v8">
Tags<br/>
Sanità
</p>

Accessibilità

Lunghezza
Una riga di testo che permette una lettura confortevole non supera i 75 caratteri.
In caso di colonne multiple la lunghezza è compresa tra 40 e 50 caratteri.
Per i testi a margine, la lunghezza non è mai inferiore ai 12-15 caratteri.
Allineamento
Il testo deve essere allineato a sinistra, salvo eccezioni come ad esempio i testi a margine.
L’allineamento giustificato e senza sillabazione è sempre da evitare per l’incongrua spaziatura delle parole e la minore leggibilità che comporta.
Definizione
I paragrafi possono essere distinti o applicando uno spazio tra di essi o in alternativa usando una indentatura di misura pari a quella del leading.
Link
Per distinguere i link dal testo canonico si usa la sottolineatura per i link all’interno di un testo, oppure il peso bold per i link isolati.

Documentazione tecnica

Per l’utilizzo delle classi di formattazione tipografica si consulti la voce:
Tipografia