Tipografia di Bootstrap

Indice dei contenuti

In questo articolo di Bootstrap potrai imparare ad impostare lo stile del testo e la tipografia della pagina web attraverso le varie impostazioni di stile e formattazione presenti nel Framework.

Con Bootstrap è possibile definire una tipografia differente da quella di default impostata nei browser web, e grazie ad un’adeguata configurazione, permette allo sviluppatore di ottenere un risultato visivo molto gradevole e moderno.

Se stai seguendo il nostro corso, questo articolo ti darà maggiori informazioni sul funzionamento del Framework e ti aiuterà a capire come impostare meglio lo stile delle tue pagine.

Gestione della tipografia in Bootstrap

Per chi non lo sapesse, per tipografia si intende lo stile del testo, la forma, la grandezza dei caratteri e l’allineamento rispetto al contenitore/pagina. Molti editor di testo comuni permettono agli utenti di gestire la tipografia del testo di un elaborato con semplici pulsanti in un menu strumenti.

In HTML invece, il discorso è del tutto differente. Per formattare un testo in un documento HTML si fa uso generalmente del CSS, che con apposite istruzioni e parametri è possibile usare per modificare ogni singolo dettaglio (grandezza, font family, stile, ombre, colore, etc…).

Con Bootstrap questo processo viene semplificato di molto. Questo perché il Framework possiede delle impostazioni esistenti che permettono di modificare lo stile del testo molto più rapidamente e con effetti grafici molto belli da vedere (E se resta comunque possibile agire sulla tipografia con CSS per la modifica di ulteriori dettagli).

Le impostazioni predefinite

Di default in Bootstrap possiede uno stile predefinito per la maggior parte degli elementi, tra cui il testo (dei paragrafi, titoli, link etc…).

Qui di seguito elencherò alcune di queste impostazioni di tipografia per gli elementi HTML più utilizzati:

Paragrafi

Il testo dei paragrafi hanno misura standard di 14 pixel con un line-height di 1.428 per l’intero body, tra cui il tag <p>, il più utilizzato per la creazione di paragrafi nelle pagine HTML.

Inoltre tutte le linee di testo hanno un margine inferiore (margin-bottom) aggiuntivo grande quanto metà linea, o in altri casi minimo di 10px.

Headings

Gli headings, o intestazioni, hanno misure variabili del testo in base all’importanza dei titoli. Dal più grande al più piccolo:

h1 – 36px
h2 – 30px
h3 – 24px
h4 – 18px
h5 – 14px
h6 – 12px

Tag “small”

Il tag <small> in HTML serve a definire una porzione di testo più piccola in un paragrafo <p>.

In Bootstrap ha una funzione aggiuntiva, ovvero serve a creare una parte di testo più piccola e di colore differente da accompagnare ad un’intestazione (heading), come un vero testo secondario.

Una cosa di questo genere:

Titolo Testo secondario

Tag “mark”

Come il precedente, il tag HTMl <mark> è utilizzato per evidenziare (marcare) una porzione di testo.

In Bootstrap l’effetto è il medesimo, ma molto meno marcato e moderno, con un colore meno vivace.

Blockquotes

Il tag <blockquote> in HTML serve a dedicare una porzione di testo proveniente da una fonte esterna (quotare, citare).

In Bootstrap è possibile aggiungere un ulteriore tag <footer> all’interno di <blockquote>, per evidenziare e specificare la fonte della citazione.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous</footer>
</blockquote>

Tag “code”

Il tag HTMl <code> evidenzia una sezione del testo contenente del codice, indifferentemente dalla tipologia.

In puro HTML queste sezioni sono caratterizzate da un differente stile del font, in Bootstrap invece il CSS è totalmente differente, con un evidenziazione più marcata con background rosato.

Puoi trovare ulteriori tag ed esempi sulla pagina ufficiale di Bootstrap.

Classi del testo

In Bootstrap esistono numerose classi da applicare al testo di un paragrafo, per modificarne prevalentemente il colore per attribuirgli un significato diverso a seconda dei casi. Le classi sono:

.text-muted
.text-primary
.text-success
.text-info
.text-danger
.text-warning

Esistono ulteriori classi per la modifica dello sfondo del testo o “background“, e sono:

.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger

Infine, qui di seguito altre classi utili per la formattazione del testo:

.text-left – Allineamento del testo a sinistra;
.text-center – Allineamento centrale;
.text-justify – Testo giustificato;
.text-right – Testo allineato a destra;
.text-nowrap – Testo senza rientro a capo;
.text-uppercase – Tutti i caratteri maiuscoli;
.text-lowercase – Tutti i caratteri minuscoli;

Questi erano i comandi fondamentali per la formattazione del testo in Bootstrap. Potrai scoprire ulteriori codici e caratteristiche seguendo corso con i prossimo articoli.

⇦ Layout e sistema a griglie

Elementi comuni ⇨

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!

Articoli recenti: