2.46
Come personalizzare i font del testo con il tag font.
La lezione HTML attuale si occupa della selezione del colore, delle dimensioni e del tipo di carattere del testo attraverso l’impiego del tag “font”. Tuttavia, questo argomento è ormai obsoleto poiché la formattazione del testo nei siti moderni è comunemente gestita tramite fogli di stile.
Va notato che l’uso del tag <font> è sconsigliato dal W3C e sta progressivamente cadendo in disuso. Nonostante ciò, è un argomento cruciale che un webmaster competente non dovrebbe trascurare. Come già accennato, lo studio dei fogli di stile richiederà tempo, ma è un passo successivo essenziale dopo aver acquisito la conoscenza dell’HTML.
Per quanto riguarda i font HTML, vengono distinti tra serif e sans serif. Il carattere predefinito visualizzato dal browser è il “Times”. Tuttavia, questo carattere, ideale per la stampa su carta, non è adatto alla visualizzazione su schermi di computer. Questa limitazione è legata alle grazie, ovvero quegli ornamenti tipografici delle lettere che dovrebbero migliorare la leggibilità del carattere.
Poiché i caratteri con grazie non producono l’effetto desiderato sul monitor, cioè rendere le lettere più riconoscibili e di conseguenza il testo più leggibile, si preferisce comunemente utilizzare caratteri senza grazie come “Verdana”, “Arial” o “Helvetica” (consultare l’articolo “I font e la tipografia del testo” su questo sito per ulteriori dettagli).
<font face=”Arial”>testo in
Arial</font>
La diffusione universale dello stile di caratteri è un concetto importante. Tuttavia, è essenziale precisare fin da subito che non è possibile garantire che l’utente visualizzi un testo nel carattere fantasioso da noi scelto. Attualmente, gli utenti che navigano su Internet possono vedere solo i caratteri installati nel proprio sistema. In ambiente Windows, questi caratteri sono accessibili attraverso il percorso: Pannello di controllo > Tipi di caratteri.
Ad esempio, se scarichiamo il carattere “Hackers” dal nostro archivio di font preferito e lo aggiungiamo alla cartella dei caratteri, avremo la possibilità di visualizzare il testo in “Hackers” sul nostro computer.
Per questo motivo è bene tener conto di due accorgimenti:
- scegliere caratteri “sicuri” , che siano cioè senz’altro presenti sul pc dell’utente
- non indicare un solo carattere, ma una serie di caratteri che gradualmente si allontanano dal risultato che vorremmo
ottenere, ma non di molto, fino ad indicare la famiglia a cui il nostra carattere appartiene. In questo modo il browser dell’utente cercherà di trovare nella propria cartella dei fonts il primo carattere indicato, se non lo trova passerà al secondo, e solo come ultima spiaggia sceglierà si utilizzare il carattere predefinito (il famigerato “Times”)
È vero: l’impossibilità di scegliere i caratteri che preferiamo limita terribilmente le nostre possibilità espressive, ma il bello di sviluppare per il web è proprio accettare di creare con delle regole ben definite, e a volte anche molto vincolanti.
Per i titoli delle pagine, i menu, e quant’altro potremmo poi sempre utilizzare delle immagini con il nostro carattere tipografico preferito (ad esempio delle “gif”).
Esempio di uso dei Google Fonts impostando via CSS la Family Font:
Dimensione del testo con Font Size
Le dimensioni del testo in HTML sono gestite attraverso l’attributo ‘size’ del tag <font>. Esistono due approcci per assegnare dimensioni al testo utilizzando il tag <font>:
- Utilizzo di valori interi da 1 a 7.
- Utilizzo di valori relativi alla dimensione di base del tag font, di default impostato su “3”.
Per i valori interi, la scala di grandezza è la seguente:
- <font size=”1″>testo di grandezza 1</font><br />
- <font size=”2″>testo di grandezza 2</font><br />
- <font size=”3″>testo di grandezza 3</font><br />
- <font size=”4″>testo di grandezza 4</font><br />
- <font size=”5″>testo di grandezza 5</font><br />
- <font size=”6″>testo di grandezza 6</font><br />
- <font size=”7″>testo di grandezza 7</font>
Per i valori relativi alla dimensione di base, è possibile “muoversi” nella scala di grandezza del tag <font> utilizzando i segni “+” e “-“.
Considerando che la grandezza del font di base predefinita nel browser è 3, se utilizziamo size=”+2″, significa che la dimensione del font sarà di 2 misure più grande rispetto alla dimensione di base, risultando in un font di grandezza 5.