Riprendiamo con questa guida la serie dei post dedicati alla gestione del testo tramite i fogli di stile CSS. Nella precedente occasione abbiamo visto come utilizzare la proprietà font-family per sceglier il tipo di carattere da utilizzare mentre in questa guida vedremo come gestire nel CSS la dimensione dei caratteri.
CSS, la proprietà font-size
Per gestire la dimensione del testo tramite il foglio di stile CSS si utilizza la proprietà font-size. Vediamo subito un esempio concreto applicato all’elemento P (paragrafo di testo) di HTML:
p {font-size: 15px;}
Con questa indicazione il foglio di stile CSS indica al browser che i paragrafi di testo andranno rappresentati con un carattere di altezza pari a 15 pixel.
Oltre ai pixel la proprietà font-size accetta in realtà molte altre unità di misura per gestire la dimensione dei caratteri. Alcune di queste definiscono una dimensioni assoluta (come per i pixel) mentre altre definiscono una dimensione relativa in rapporto all’elemento di HTML di riferimento.
Le principali forme di font-size
Nei documenti destinati alla pubblicazione online la proprietà font-size è utilizzata principalmente con valori espressi in pixel o in forma percentuale. In questa seconda circostanza lo spezzone di CSS assume la forma:
h2 {font-size: 200%;}
Nel caso in cui un documento HTML sia destinato alla stampa potrebbe essere utile definire per la proprietà font-size una dimensione assoluta collegata alle dimensioni fisiche della stampa. Una simile soluzione può ad esempio essere utilizzata all’interno di un foglio di stile per la stampa distinto da quello impiegato per la visualizzazione nel browser. Anche in questo contesto è possibile utilizzare varie unità di misura tra cui millimetri e centimetri:
h2 {font-size: 2cm;}
p {font-size: 10mm;}
Ovviamente la proprietà font-size è generalmente combinata con la proprietà font-family come, a titolo di esempio, in questo spezzone di foglio di stile CSS:
p {
font-family: Arial,Helvetica,sans-serif;
font-size: 10mm;
}