Quando si costruisce una pagina Web, la maggior parte dei professionisti consiglia di ridimensionare i caratteri (e di fatto, tutto) con una misura relativa come em, ex, percentuali o pixel. Questo perché in realtà non conosci tutti i diversi modi in cui qualcuno potrebbe visualizzare i tuoi contenuti. E se si utilizza una misura assoluta (pollici, centimetri, millimetri, punti o picas) potrebbe influire sulla visualizzazione o leggibilità della pagina su dispositivi diversi. E il W3C ti consiglia di usare 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 em non hanno una dimensione assoluta. Assumono i loro valori dimensionali in base a dove si trovano. Per la maggior parte dei Web designer, questo significa che si trovano in un browser Web, quindi un font che è alto 1em ha esattamente le stesse dimensioni della dimensione predefinita per quel browser.
Ma quanto è alta la dimensione predefinita? Non c'è modo di essere certi al 100%, in quanto i clienti possono cambiare la dimensione del carattere predefinito 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 predefinita di 16px. Quindi la maggior parte del tempo 1em = 16px.
Pensa in pixel, usa Ems per la misura
Una volta che sai che la dimensione predefinita del font è 16px, puoi usare ems per consentire ai tuoi clienti di ridimensionare facilmente la pagina, ma pensa in pixel per le dimensioni dei caratteri. Supponi di avere una struttura di dimensionamento simile a questa:
- Titolo 1 - 20px
- Titolo 2 - 18 px
- 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 utilizzi IE 6 e 7 non sarebbe in grado di ridimensionare bene la pagina. Quindi dovresti convertire le dimensioni in ems e questa è solo una questione di matematica:
- Titolo 1 - 1.25em (16 x 1.25 = 20)
- Headline 2 - 1.125em (16 × 1.125 = 18)
- Titolo 3 - 1em (1em = 16px)
- Testo principale - 0.875em (16 x 0.875 = 14)
- Sottotesto - 0,75em (16 x 0,75 = 12)
- Footnotes - 0.625em (16 x 0.625 = 10)
Non dimenticare l'ereditarietà!
Ma non è tutto quello che c'è da dire. L'altra cosa che devi ricordare è che assumono le dimensioni del genitore. Pertanto, 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:
p {font-size: 0.875em; }.footnote {font-size: 0.625em; }
Ciò risulterebbe in caratteri che sono rispettivamente 14px e 10px per il testo principale e le note a piè di pagina. Ma se metti una nota a piè di pagina in un paragrafo, potresti finire con un testo di 8,75 px anziché 10 px. Provalo tu stesso, metti questo sopra il CSS e il seguente codice HTML in un documento:
Questo font è di 14px o 0.875 di altezza in ems.Questo paragrafo ha una nota in calce.Mentre questo è solo un paragrafo in nota.
Il testo della nota a piè di pagina è difficile da leggere a 10px, è quasi illeggibile a 8.75px.
Quindi, quando si utilizza ems, è necessario essere molto consapevoli delle dimensioni degli oggetti padre, o si finirà con alcuni elementi di dimensioni davvero strane nella pagina.
