font-size
Così come puoi modificare la famiglia di caratteri, puoi anche modificarne la dimensione.
Cosa? em? Cos’è em?
Nulla di allarmante! em è una unità di misura utilizzabile sul Web, e sta ad indicare una misura relativa. Prima di spiegartelo per bene, vediamo quali sono le unità di misura che puoi utilizzare:
px; l’unità di misura più vecchia e utilizzabile anche in qualsiasi altro contesto di programmazione che preveda la necesstià di definire una dimensione;%; la grandezza in percentuale, un’ottima definizione di misura, tuttavia essa va usata con una certa cognizione e con un po’ di allenamento… non sempre è semplice da impiegare;em; un’altra grandezza relativa, come la percentuale, ma essa si basa sulla larghezza della lettere m del carattere in uso (per questo motivo è relativa);vwevh; rappresentano altre grandezze relative, definite da CSS31, si riferiscono questa volta alla grandezza del viewport (di cui parleremo brevemente nel capitolo “Pillole di utilità”) e sono delle unità corrispondenti ad 1/100 della larghezza (o altezza) del viewport;rem2; evoluzione “spirituale” diem(la sigla sta’ per root em), con l’unica differenza che l’unità base di grandezza non viene presa dal genitore dell’elemento a cui viene applicato, ma dall’elemento root, ossia da<html>.
Come vedi dalla lista soprastante, ci sono due tipologie di misure: fisse e relative… con una leggera predisposizione a quelle relative! Perché questo? Perché le misure relative degradano meglio sulle diverse possibili dimensioni degli schermi.
Ti faccio un esempio. Poniamo il caso che tu voglia utilizzare, come da impostazione grafica del tuo art director, la dimensione del carattere a 13 pixel. Se il tuo target è solo il desktop non avrai grossissimi problemi ad utilizzare i pixel come riferimento. Anche se, a ben pensarci, se qualcuno volesse stampare la tua pagina, 13px potrebbero essere un po’ troppo piccoli3!
Tuttavia, quei 13px visualizzati attraverso uno smartphone risulterebbero piccolissimi… figurati, poi, su dispositivi dotati di schermi ad alta definizione (HiDPI e Retina)! Ecco allora che utilizzare una dimensione relativa rende le cose più semplici: 1.1em, o 110% si visualizzeranno in modo eccellente su tutte le configurazione prese ad esempio (eh sì, anche nella stampa!), in quanto la dimensione non è definita una volta per tutte, ma essa è dipendente dal contesto di visualizzazione.
L’accorgimento che ti posso suggerire (e che io utilizzo sempre) è quello di impostare una dimensione realtiva a BODY o a HTML (ad esempio in %), a rappresentare la dimensione minima del carattere. Ad esempio, un 85% su BODY, lo puoi tradurre in — circa — 13px. Quando poi voglio variare la dimensione, ad esempio di un titolo o di un paragrafo, utilizzo em (in questo esempio, 1em = 85% = 13px), per cui, 1.1em sarebbero circa 14px.
In questo modo sarai sempre sicuro che la dimensione dell’elemento è relativa al dispositivo e al monitor su cui viene visualizzato e che quindi, nella maggioranza dei casi, non sarà necessario ritoccare o modificare la dimensione del carattere per un dato dispositivo.