Empregando Ems para cambiar os tamaños de letra
Cando estea construíndo unha páxina web, a maioría dos profesionais recomenda que mida fontes (e de feito, todo) cunha medida relativa como ems, exs, porcentaxes ou píxeles. Isto é porque realmente non sabes todas as formas diferentes de que alguén poida ver o teu contido. E se usa unha medida absoluta (polgadas, centímetros, milímetros, puntos ou picas) pode afectar a visualización ou lexibilidade da páxina en diferentes dispositivos.
E o W3C recomenda que use ems para tamaños.
Pero como grande é un em?
Segundo o W3C un em:
"é igual ao valor calculado da propiedade 'font-size' do elemento en que se usa. A excepción é cando se produce 'em' no valor da propiedade 'font-size', caso en que se refire ao tamaño da fonte do elemento primario. "
Noutras palabras, os ems non teñen un tamaño absoluto. Asumen os seus valores de tamaño en función do lugar onde se atopan. Para a maioría dos deseñadores web , isto significa que se atopan nun navegador web, polo tanto, unha fonte que sexa 1em de alto ten exactamente o mesmo tamaño que o tamaño de fonte predeterminado dese navegador.
Pero o alto é o tamaño predeterminado? Non hai ningunha forma de estar 100% certo, xa que os clientes poden cambiar o tamaño de letra predeterminado nos seus navegadores, pero como a maioría da xente non pode supoñer que a maioría dos navegadores teñen un tamaño de fonte predeterminado de 16 px. Entón a maior parte do tempo 1em = 16px .
Pense en Pixels, use Ems para a medida
Unha vez que saiba que o tamaño de letra predeterminado é de 16 px, pode empregar ems para que os seus clientes poidan redimensionar a páxina facilmente, pero pensan en píxeles para os tamaños de letra.
Digamos que ten unha estrutura de tamaño similar a esta:
- Título 1 - 20px
- Título 2 - 18px
- Título 3 - 16 píxeles
- Texto principal - 14 píxeles
- Subtítulo - 12 px
- Notas ao pé de páxina - 10 píxeles
Podería definila así usando píxeles para a medición, pero calquera persoa que use IE 6 e 7 non poderá redimensionar ben a súa páxina. Entón, ten que converter os tamaños para ems e esta é só unha cuestión de algunhas matemáticas:
- Título 1 - 1.25em (16 x 1.25 = 20)
- Título 2 - 1.125em (16 × 1.125 = 18)
- Título 3 - 1em (1em = 16px)
- Texto principal - 0.875em (16 x 0.875 = 14)
- Sub texto - 0.75em (16 x 0.75 = 12)
- Notas ao pé de páxina - 0.625em (16 x 0.625 = 10)
Non esqueza a herdanza!
Pero iso non é todo o que hai para ems. A outra cousa que cómpre lembrar é que asumen o tamaño do pai. Entón, se ten elementos anidados con diferentes tamaños de fonte, pode acabar cunha fonte moito menor ou maior do esperado.
Por exemplo, pode ter unha folla de estilo como esta:
p {tamaño-fonte: 0.875em; }
.footnote {font-size: 0.625em; }
Isto daría como resultado fontes que son 14px e 10px para o texto principal e as notas ao pé respectivamente. Pero se pór unha nota ao pé dun parágrafo, podería acabar cun texto que é de 8.75 píxeles en lugar de 10 píxeles. Proba vostede mesmo, coloque este o CSS anterior eo seguinte HTML nun documento:
Esta fonte é de 14 píxeles ou 0,875 m de altura.
Este parágrafo ten unha nota ao pé nela.
Aínda que este sexa só un parágrafo de nota ao pé de páxina.
O texto a pé de páxina é difícil de ler a 10 píxeles, é case ilegíbel a 8.75 píxeles.
Entón, cando estás a usar ems, debes estar moi consciente dos tamaños dos obxectos primarios ou vai acabar con algúns elementos de tamaño realmente raro na túa páxina.