Tipografia

Font del tema

Il font ufficiale dei siti Unito è Titillium Web. Il font e sue varianti viene istanziato nel file css di configurazione, e non è quindi necessario includerlo attraverso tag html.

Intestazioni

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

Nel caso in cui si voglia presentare il testo nello stesso stile delle intestazioni, ma non sia possibile utilizzare l’elemento HTML appropriato, sono disponibili anche classi di tipo .h1, .h2, ecc.

<h1>Intestazione di tipo h1</h1>
<h2>Intestazione di tipo h2</h2>
<h3>Intestazione di tipo h3</h3>
<h4>Intestazione di tipo h4</h4>
<h5>Intestazione di tipo h5</h5>
<h6>Intestazione di tipo h6</h6>

Su fondo scuro

Puoi anche invertire i colori, con testo chiaro su sfondi scuri aggiungendo .bg-dark all'elemento container.

Personalizzazione delle intestazioni

È possibile utilizzare le classi di utilità incluse in Bootstrap per dare uno stile diverso per testi di intestazione secondaria.

<h4>Intestazione <small class="text-muted">con testo secondario</small></h4>

Link

Accessibilità

È fondamentale evidenziare i link presenti in un paragrafo in modo adeguato, utilizzando la forma (grassetto, sottolineato) oltre al colore per indicare la presenza di un collegamento ipertestuale.

Nel rispetto delle regole di accessibilità vigenti, Bootstrap Italia mantiene la sottolineatura ai link di tipo <a>. Nel caso di link già in evidenza (menu principali, liste di link, link in grassetto, ecc.), è possibile rimuovere la sottolineatura utilizzando la classe .text-decoration-none.

<p>Esempio di <a href="#">link normale</a>.</p>
<p>Esempio di <a href="#" class="text-decoration-none font-weight-bold">link in grassetto senza sottolineatura</a>.</p>

Citazioni

Per citare blocchi di contenuti da un’altra fonte all’interno del documento. Racchiudi ogni HTML all’interno di un <blockquote class="blockquote"> come la citazione.

Aggiungi un <footer class="blockquote-footer"> per identificare la fonte. Includi il nome delle fonte di origine in <cite>.

<blockquote class="blockquote">
    <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>