In questa lezione vi parlo di come si modifica la dimensione del testo.
font-size
La proprietà font-size modifica la dimensione del testo a cui viene applicata la regola.
La proprietà accetta:
- valori assoluti, ovvero valori con unità di misura fisse;
- valori relativi, ovvero valori che dipendono da altri fattori.
Valori in pixel
Assegnando un valore assoluto, ad esempio il pixel, il carattere diventerà alto esattamente di quanto avete specificato:
font-size: 22px;
I pixel, indicati con px, sono intesi come valori assoluti, nel senso che sono indipendenti dalla larghezza della pagina o dalla dimensione di altri elementi (anche se i pixel possono essere più o meno grandi a seconda dello schermo su cui vengono visualizzati).
La dimensione predefinita del testo di una pagina web (testo del paragrafo) è di 16 pixel.
Valori relativi
E’ possibile impostare la grandezza del testo usando valori relativi, come ad esempio em e percentuali.
Impostando la dimensione del testo in percentuale (%), lo si obbliga ad avere una grandezza relativa a quella del testo per l’elemento che lo contiene.
font-size: 200%;
Per fare un esempio, se un paragrafo si trova dentro ad un div (un contenitore di elementi), scrivendo il seguente stile:
il testo del paragrafo dentro al div sarà grande 64 pixel, ovvero il doppio della dimensione del testo nel suo contenitore (32 pixel).
Quindi il testo con grandezza indicata in valori relativi è variabile al variare della dimensione del testo del contenitore che lo contiene.
L’unità di misura em indica la grandezza predefinita del font, che di norma abbiamo detto essere di 16 pixel.
Quindi:
1em = 16px
Come per la percentuale, è una unità di misura relativa, in quanto se noi andiamo a cambiare la dimensione standard del testo, gli em variano di conseguenza.
L’uso di em è raccomandato dal W3C.
Reset delle dimensioni
Per esigenze di leggibilità, magari dettate dalla visualizzazione del sito su dispositivi diversi, possiamo impostare un criterio per determinare una dimensione standard per la pagina web e farla usare come riferimento per tutti gli elementi testuali contenuti in essa.
Per cambiare la dimensione del testo standard, ovvero per effettuare un reset delle dimensioni dei caratteri, possiamo usare diversi modi.
Un sistema largamente utilizzato è quello di re-impostare la dimensione standard del font della pagina (del body, cioè il contenitore di livello principale) a 100%, quindi si imposta la dimensione di tutti gli altri elementi di testo utilizzati nella pagina con valori relativi (in em):
Se vogliamo rendere il testo più grande, ci basterà variare il valore di font-size per il body (ad esempio portandolo a 120% o 80%) e tutte le altre dimensioni varieranno di conseguenza.