Formattazione del testo in HTML: scegliere font, dimensione e colore

La formattazione del testo eseguita direttamente in HTML è una pratica diventata ormai obsoleta e si consiglia di ricorrere ai fogli di stile CSS. Vediamo in ogni caso come formattare il testo con HTML scegliendo il font da utilizzare, la dimensione del testo ed il colore.

Il tag in oggetto è font e supporta gli attributi face per la scelta del carattere, size per la definizione delle dimensioni del testo e color per la definizione del colore. Vediamo un esempio pratico di utilizzo del tag <font>:

<font face="Verdana" size="2" color="red">
Testo formattato con HTML puro
</font>

I valori di default degli attributi del tag <font>

Nel nostro esempio abbiamo scelto "Verdana" come font, dimensione 2 ed un colore rosso. I valori di default assegnati all’elemento testo, se non specificati all’interno del codice, sono:

<font face="Times New Roman" size="3" color="#000000">

L’attributo face

Per quanto riguarda l’attributo face si consiglia di utilizzare un carattere standard, cioè un font presente per default su tutti i computer, come ad esempio:

Arial
Thaoma
SansSerif
Verdana

Utilizzando un carattere NON standard, infatti, si corre il rischio che molti browser che non hanno quel font installato non vedano la pagina come noi vorremmo.

L’attributo size

Per quanto riguarda l’attributo size questo deve avere un valore numerico necessariamente compreso tra 1 e 7 dove 1 è la dimensione minima e 7 la massima. La dimensione impostata di default dal browser è 3.

L’attributo color

Questo attributo è utilizzato per definire il colore del testo. Accetta diverse tipologie di valori:

• esadecimale => es: #FF0000
• rgb => es: rgb(255,0,0)
• nome del colore => es: red

NOTA: circa i colori supportati all’interno delle pagine web si faccia riferimento a questa tabella dei colori HTML.

Superare il tag font mediante i CSS (cenni)

Come detto all’inizio di questa lezione il tag <font> deve considerarsi superato (il fatto che HTML5 lo consideri deprecato ne è una conferma). Per definire l’aspetto del testo, pertanto, è consigliabile utilizzare unicamente i CSS assegnando gli opportuni stili ai vari contenitori di testo.

Non è questa la sede dove approfondire queste tematiche, è tuttavia opportuno ricordare che le proprietà coinvolte per la formattazione in vece degli attributi del tag <font> sono:

• font-family => quivalente dell’attributo face;
• font-size => quivalente dell’attributo size;
• color => quivalente dell’attributo color.

Vediamo un esempio di utilizzo di queste proprietà per la stilizzazione di un tag span:

<span style="font-family: verdana; font-size: 16px; color: #FF0000;">
Testo formattato coi CSS
</span>