Quando você está construindo uma página da web, a maioria dos profissionais recomenda que você dimensione as fontes (e, na verdade, tudo) com uma medida relativa, como ems, exs, porcentagens ou pixels. Isso ocorre porque você realmente não conhece todas as maneiras diferentes como alguém pode ver seu conteúdo. E se você usar uma medida absoluta (polegadas, centímetros, milímetros, pontos ou picas), isso pode afetar a exibição ou a legibilidade da página em diferentes dispositivos. E o W3C recomenda que você usa ems para tamanhos.
Mas quão grande é um em?
De acordo com W3C um em:
"é igual ao valor calculado da propriedade 'font-size' do elemento no qual é usado. A exceção é quando 'em' ocorre no valor da própria propriedade 'font-size', caso em que se refere ao tamanho da fonte do elemento pai. "
Em outras palavras, os ems não têm um tamanho absoluto. Eles assumem seus valores de tamanho com base em onde estão. Para a maioria designers da web, isso significa que eles estão em um navegador da Web, portanto, uma fonte com 1em de altura tem exatamente o mesmo tamanho que o tamanho de fonte padrão para esse navegador.
Mas qual é a altura do tamanho padrão? Não há como ter 100% de certeza, pois os clientes podem alterar seus tamanho de fonte padrão em seus navegadores, mas como a maioria das pessoas não o faz, você pode presumir que a maioria dos navegadores tem um tamanho de fonte padrão de 16 px. Então, na maioria das vezes 1em = 16px.
Pense em pixels, use ems para medir
Depois de saber que o tamanho da fonte padrão é 16px, você pode usar o ems para permitir que seus clientes redimensionem a página facilmente, mas pense em píxeis para seus tamanhos de fonte. Digamos que você tenha uma estrutura de dimensionamento parecida com esta:
- Título 1 - 20 px
- Título 2 - 18 px
- Título 3 - 16 px
- Texto principal - 14px
- Subtexto - 12px
- Notas de rodapé - 10px
Você poderia defini-los dessa forma usando pixels para a medição, mas ninguém usando o IE 6 e 7 não seria capaz de redimensionar bem a sua página. Portanto, 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)
- Título 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 se esqueça da herança!
Mas isso não é tudo que existe para o ems. A outra coisa que você precisa lembrar é que eles assumem o tamanho dos pais. Portanto, se você tiver elementos aninhados com tamanhos de fonte diferentes, poderá acabar com uma fonte muito menor ou maior do que o esperado.
Por exemplo, você pode ter uma folha de estilo como esta:
Isso resultaria em fontes de 14 px e 10 px para o texto principal e as notas de rodapé, respectivamente. Mas se você colocar uma nota de rodapé dentro de um parágrafo, poderá acabar com um texto de 8,75 px em vez de 10 px. Experimente você mesmo, coloque o acima CSS e o seguinte HTML em um documento:
Portanto, ao usar o ems, você precisa estar muito atento aos tamanhos dos objetos pais, ou acabará com alguns elementos de tamanhos realmente estranhos em sua página.