Ús d'Ems per canviar les mides de lletra
Quan està construint una pàgina web, la majoria dels professionals recomana que mida les fonts (i, de fet, tot) amb una mesura relativa com ems, exs, percentatges o píxels. Això és perquè realment no sabeu totes les maneres diferents que algú pot veure el vostre contingut. I si utilitzeu una mesura absoluta (polzades, centímetres, mil·límetres, punts o picas), podria afectar la visualització o llegibilitat de la pàgina en diferents dispositius.
I el W3C us recomana que feu servir ems per a mides.
Però, què tan gran és un Em?
Segons el W3C un em:
"és igual al valor computat de la propietat 'font-size' de l'element en el qual s'utilitza. L'excepció és quan es produeix el valor 'em' en la propietat 'font-size', en aquest cas es refereix a la mida de la font de l'element primari. "
En altres paraules, els ems no tenen una mida absoluta. Adquireixen els seus valors de mida segons el seu lloc. Per a la majoria dels dissenyadors web , això vol dir que es troben en un navegador web, de manera que una font de 1ème de tall és exactament la mateixa que la mida de font predeterminada d'aquest navegador.
Però, com és la mida per defecte? No hi ha cap manera de ser 100% segur, ja que els clients poden canviar la mida de la font predeterminada en els seus navegadors, però ja que la majoria de la gent no pot assumir que la majoria dels navegadors tenen una mida de font predeterminada de 16 px. Així que la major part del temps 1em = 16px .
Penseu en píxels, utilitzeu Ems per a la mesura
Una vegada que sàpigues que la mida predeterminada de la font és de 16 px, podeu emprar ems per permetre que els vostres clients canviïn la mida de la pàgina fàcilment, però penseu en píxels per les mides de la vostra font.
Suposem que teniu una estructura de mida com aquesta:
- Títol 1 - 20 px
- Títol 2 - 18 px
- Títol 3 - 16 px
- Text principal - 14 px
- Subtítol - 12 px
- Notes al peu - 10 px
Podria definir-los d'aquesta manera utilitzant píxels per a la mesura, però qualsevol que utilitza IE 6 i 7 no podia canviar la mida de la vostra pàgina. Així que hauríeu de convertir les mides a EMS i això només és qüestió d'algunes matemàtiques:
- Capçalera 1 - 1.25em (16 x 1.25 = 20)
- Títol 2 - 1.125em (16 × 1.125 = 18)
- Títol 3 - 1em (1em = 16px)
- Text principal - 0.875em (16 x 0.875 = 14)
- Sub text - 0.75em (16 x 0.75 = 12)
- Notes al peu: 0.625em (16 x 0.625 = 10)
No oblideu l'herència.
Però això no és tot per a nosaltres. L'altra cosa que cal recordar és que prenen la mida del pare. Per tant, si teniu elements anidats amb diferents mides de lletra, podeu acabar amb una font molt més petita o més gran del que espereu.
Per exemple, podeu tenir un full d'estil com aquest:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Això donaria lloc a fonts que són 14px i 10px per al text principal i les notes a peu de pàgina, respectivament. Però si poses una nota al peu dins d'un paràgraf, pots acabar amb un text de 8.75 píxels en lloc de 10 píxels. Prova-ho tu mateix, posa això en el CSS anterior i el següent HTML en un document:
Aquesta font és de 14 píxels o 0.875 mil·lèsimes d'alçada.
Aquest paràgraf té una nota al peu.
Si bé és només un paràgraf de nota a peu de pàgina.
El text de la nota al peu és difícil de llegir a 10 px, és gairebé il·legible a les 8.75 px.
Per tant, quan feu servir ems, haureu d'estar molt al tant de les mides dels objectes primaris, o bé acabareu amb alguns elements de mida realment estranys a la vostra pàgina.