Quando crei una pagina web, la maggior parte dei professionisti consiglia di ridimensionare i caratteri (e in effetti, tutto) con una misura relativa come ems, exs, percentuali o pixel. Questo perché davvero non conosci tutti i diversi modi in cui qualcuno potrebbe visualizzare i tuoi contenuti. E se usi una misura assoluta (pollici, centimetri, millimetri, punti o pica) potrebbe influenzare la visualizzazione o la leggibilità della pagina in diversi dispositivi. E il W3C raccomanda che usi ems per le taglie.
Ma quanto è grande un em?
Secondo il W3C un em:
"è uguale al valore calcolato della proprietà 'font-size' dell'elemento su cui viene utilizzato. L'eccezione è quando 'em' si verifica nel valore della proprietà 'font-size' stessa, nel qual caso si riferisce alla dimensione del carattere dell'elemento genitore."
In altre parole, gli ems non hanno una dimensione assoluta. Prendono i loro valori di dimensione in base a dove si trovano. Per la maggior parte web designer, questo significa che si trovano in un browser Web, quindi un carattere alto 1 em ha esattamente la stessa dimensione del carattere predefinito per quel browser.
Ma quanto è alta la dimensione predefinita? Non c'è modo di essere sicuri al 100%, poiché i clienti possono cambiare il loro dimensione del carattere predefinita nei loro browser, ma poiché la maggior parte delle persone non lo fa, si può presumere che la maggior parte dei browser abbia una dimensione del carattere predefinita di 16 px. Quindi la maggior parte delle volte 1em = 16px.
Pensa in pixel, usa ems per la misura
Una volta che sai che la dimensione del carattere predefinita è 16px, puoi utilizzare ems per consentire ai tuoi clienti di ridimensionare facilmente la pagina ma pensaci pixel per le dimensioni dei caratteri. Supponiamo di avere una struttura di dimensionamento simile a questa:
- Titolo 1 - 20px
- Titolo 2 - 18px
- Titolo 3 - 16px
- Testo principale - 14px
- Sottotesto - 12px
- Note a piè di pagina - 10px
Potresti definirli in questo modo usando i pixel per la misurazione, ma chiunque usi IE 6 e 7 non sarebbe in grado di ridimensionare bene la tua pagina. Quindi dovresti convertire le dimensioni in ems e questa è solo una questione di matematica:
- Titolo 1 - 1,25 em (16 x 1,25 = 20)
- Titolo 2 - 1.125em (16 × 1.125 = 18)
- Titolo 3 - 1em (1em = 16px)
- Testo principale - 0.875 em (16 x 0.875 = 14)
- Sottotesto - 0,75 em (16 x 0,75 = 12)
- Note a piè di pagina - 0,625 em (16 x 0,625 = 10)
Non dimenticare l'eredità!
Ma non è tutto per ems. L'altra cosa che devi ricordare è che assumono le dimensioni del genitore. Quindi, se hai elementi nidificati con dimensioni di carattere diverse, potresti ritrovarti con un carattere molto più piccolo o più grande di quanto ti aspetti.
Ad esempio, potresti avere un foglio di stile come questo:
Ciò comporterebbe caratteri di 14px e 10px rispettivamente per il testo principale e le note a piè di pagina. Ma se metti una nota a piè di pagina all'interno di un paragrafo, potresti ritrovarti con un testo di 8,75 px anziché 10 px. Provalo tu stesso, metti quanto sopra CSS e il seguente codice HTML in un documento:
Quindi, quando usi ems, devi essere molto consapevole delle dimensioni degli oggetti genitori, o ti ritroverai con alcuni elementi di dimensioni davvero strane sulla tua pagina.