Quando você cria uma página da Web, a maioria dos profissionais recomenda que você dimensione fontes (e, de fato, tudo) com uma medida relativa, como ems, exs, percentuais ou pixels. Isso porque você realmente não conhece todas as maneiras diferentes pelas quais alguém pode ver seu conteúdo. E se você usar uma medida absoluta (polegadas, centímetros, milímetros, pontos ou picas), isso poderá afetar a exibição ou a legibilidade da página em diferentes dispositivos. E o W3C recomenda que você use ems para tamanhos.
Mas quão grande é um Em?
De acordo com o W3C um em:
"é igual ao valor computado da propriedade 'tamanho da fonte' do elemento no qual é usado. A exceção é quando 'em' ocorre no valor da propriedade 'tamanho da fonte' em si, caso em que se refere para o tamanho da fonte do elemento pai. "
Em outras palavras, os ems não têm tamanho absoluto. Eles assumem seus valores de tamanho com base em onde estão. Para a maioria dos Web designers, isso significa que eles estão em um navegador da Web, portanto, uma fonte de 1em de altura tem exatamente o mesmo tamanho que o tamanho de fonte padrão desse navegador.
Mas qual é o tamanho padrão? Não há como ter 100% de certeza, pois os clientes podem alterar seu tamanho de fonte padrão em seus navegadores, mas como a maioria das pessoas não acredita que a maioria dos navegadores tenha um tamanho de fonte padrão de 16px. Então a maior parte do tempo 1em = 16px.
Pense em Pixels, Use Ems para a Medida
Quando você souber que o tamanho da fonte padrão é 16px, poderá usar o ems para permitir que os clientes redimensionem a página com facilidade, mas pense em pixels para o tamanho da fonte. Digamos que você tenha uma estrutura de dimensionamento como esta:
- Título 1 - 20px
- Título 2 - 18px
- Título 3 - 16px
- Texto principal - 14px
- Subtexto - 12px
- Notas de rodapé - 10px
Você pode defini-los dessa maneira usando pixels para a medição, mas qualquer um que use o IE 6 e 7 não conseguirá redimensionar bem a sua página. Então você deve converter os tamanhos para ems e isso é apenas uma questão de matemática:
- Título 1 - 1,25em (16 x 1,25 = 20)
- Headline 2 - 1.125em (16 × 1.125 = 18)
- Título 3 - 1em (1em = 16px)
- Texto principal - 0.875em (16 x 0.875 = 14)
- Subtexto - 0,75em (16 x 0,75 = 12)
- Notas de rodapé - 0.625em (16 x 0,625 = 10)
Não esqueça a herança!
Mas isso não é tudo que existe para os ems. A outra coisa que você precisa lembrar é que eles assumem o tamanho do pai. Portanto, se você tiver elementos aninhados com tamanhos de fonte diferentes, pode acabar com uma fonte muito menor ou maior do que o esperado.
Por exemplo, você pode ter uma folha de estilo como esta:
p {tamanho da fonte: 0.875em; }.footnote {tamanho da fonte: 0,625em; }
Isso resultaria em fontes que são 14px e 10px para o texto principal e as notas de rodapé, respectivamente. Mas se você colocar uma nota de rodapé dentro de um parágrafo, pode acabar com um texto de 8,75 px em vez de 10 px. Tente você mesmo, coloque este CSS acima e o seguinte HTML em um documento:
Esta fonte é 14px ou 0.875 ems de altura.Este parágrafo tem uma nota de rodapé.Enquanto isso é apenas um parágrafo de nota de rodapé.
O texto da nota de rodapé é difícil de ler em 10px, é quase ilegível em 8.75px.
Então, quando você está usando o ems, precisa estar bem ciente dos tamanhos dos objetos pai, ou você acabará com alguns elementos de tamanhos realmente estranhos na sua página.
