Unità di misura per il testo

Il metodo più semplice e veloce per assegnare una dimensione al testo è sicuramente utilizzare come unità di misura il pixel. La regola più utilizzata, quindi, è la seguente:

p {
  font-size: 12px;
}

Esistono però altre unità di misura sicuramente meno usate ma allo stesso tempo utilissime per settare la dimensione del testo. Le unità di misura disponibili sono le seguenti:

• Points (pt)
• Picas (pc)
• Pixels (px)
• Ems (em)
• Exes (ex)
• Percentuale (%)

Analizziamo ora nel dettaglio ogni unità di misura.

Points e Picas

Queste unità di misura provengono dalla tipografia e sono, per lo più, utilizzate per la stampa. È sconsigliato il loro utilizzo per documenti destinati allo schermo in quanto non garantiscono uniformità di dimensioni al variare delle piattaforme.

p {
  font-size: 12pt;  /* testo in points */
  font-size: 12pc;  /* testo in picas  */
}

Pixel

Come anticipato all’inizio della lezione, il pixel è sicuramente l’unità di misura più popolare. Progettare pagine utilizzando i pixel garantisce un dimensionamento preciso del testo su ogni browser e piattaforma, garantendo quindi un’uniformità generale del progetto. Per contro, però, questa unità di misura presenta un difetto non del tutto trascurabile in fatto di accessibilità. Unità di misure fisse, infatti, non permettono all’utente di aumentare o diminuire le dimensioni del testo utilizzando lo zoom presente in ormai quasi tutti i browser.

p {
  font-size: 12px;
}

Em

L’em è un’unità di misura relativa molto comoda da usare. Il suo nome proviene dalla tipografia, in cui, viene utilizzata per identificare la dimensione della lettera maiuscola M di un carattere.

Tale unità di misura calcola la dimensione del testo in base ad una misura fissa (e quindi non relativa) di base. 1em, quindi, corrisponde alla dimensione di base assegnata al documento o all’elemento. Vediamo un semplice esempio per comprendere meglio.

body {
  font-size: 10px;
}
h1 { font-size: 1.4em; }
h2 { font-size: 1.2em; }
p  { font-size: 1em; }

Nel precedente codice abbiamo assegnato un valore di 10 pixel al documento. Gli elementi successivi (h1, h2 e p) definiscono la loro dimensione utilizzando un’unità di misura relativa all’oggetto che li contiene. Questo vuol dire che per calcolare la dimensione finale degli oggetti è sufficiente moltiplicare il valore assegnato all’oggetto per il valore fisso del suo contenitore. Nel nostro caso le dimensioni finali saranno:

h1 = 10 x 1.4 = 14px
h2 = 10 x 1.2 = 12px
p  = 10 x 1   = 10px

È fortemente consigliato impostare un’unità di misura base nel body della pagina e poi assegnare le dimensioni del carattere a tutti gli elementi della pagina utilizzando l’em.

Ereditarietà dell’em

Bisogna fare molto attenzione quando si utilizzano unità di misure relative. Se assegniamo un valore in em ad un elemento, bisogna stare attenti a definire correttamente il valore degli elementi contenuti in esso poichè la dimensione finale viene calcolata in base alla dimensione effettiva dell’oggetto che li contiene. Anche in questo caso vediamo un esempio per chiarire meglio il concetto.

body {
  font-size: 10px;
}
h1 { font-size: 1.4em; }
div { font-size: 1.2em; }
p { font-size: 1.2em; }

<div>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Nell’esempio precedente la dimensione finale del paragrafo non sarà di 12 pixel come potremmo aspettarci. Vediamo insieme perché.

Innanzitutto calcoliamo la dimensione del testo all’interno del div:

div = 10 x 1.2 = 12px

Il testo all’interno del div, quindi, avrà dimensione finale 12pixel. Anche il paragrafo ha la dimensione del testo in un’unità di misura relativa, quindi, la sua dimensione finale sarà calcolata sulla base del div che lo contiene. Quindi:

p = 12 x 1.2 = 14.4px

Il valore finale del testo sarà di 14.4 pixel e non di 12 pixel come ci saremmo potuti aspettare. Questo succede per via dell’ereditarietà che contraddistingue le unità di misura relative.

Exes

L’ex è un’altra unità di misura relativa che si riferisce alla dimensione in altezza della lettera x minuscola di un carattere. L’unità di misura non è utilizzata a causa dello scarso supporto che i browser forniscono.

p {
  font-size: 1.2ex;
}

Percentuale

L’ultima unità di misura che abbiamo a disposizione per settare la dimensione del testo è la percentuale. Anche questa unità è relativa e, proprio come succede per gli em, calcola la dimensione finale del testo in base alla dimensione base assegnata.

Vediamo qualche semplicissimo esempio per comprendere il rapporto tra em e percentuale.

body {
  font-size: 10px;
}
h1 { font-size: 1.4em; }
h2 { font-size: 140%; }
h3 { font-size: 1.2em; }
h4 { font-size: 120%; }

Nell’esempio appena visto possiamo notare che le coppie h1-h2 e h3-h4 avranno la stessa dimensione finale. A dimostrazione di ciò vediamo il calcolo necessario per stabilire la dimensione finale:

h1 = 10 x 1.4 = 14px
h2 = 10 x 140% = 10 x (140/100) = 14px
h3 = 10 x 1.2 = 12px
h4 = 10 x 120% = 10 x (120/100) = 12px

Keyword per definire la dimensione del testo

Il CSS mette a disposizione anche opportune keyword per settare la dimensione del testo. Tali keyword sono:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

La loro dimensione va dalla più piccola (xx-small) alla più grande (xx-large). È sconsigliato, però, farne uso poichè al momento i browser non interpretano allo stesso modo le dimensioni ma, ognuno ne definisce dimensioni personalizzate.