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ê use ems para tamanhos.
Mas quão grande é um em?
De acordo com o W3C, an em: “é igual ao valor calculado da propriedade ‘font-size’ do elemento no qual é usado. A exceção é quando ‘em’ ocorre no valor da propriedade ‘font-size’ em si, 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 dos web designers, 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 é o tamanho padrão? Não há como ter 100% de certeza, pois os clientes podem alterar o tamanho da 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 pixels para o tamanho da 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. Tente você mesmo, coloque o CSS acima e o seguinte HTML em um documento: Então, quando você estiver usando ems, você precisa estar bem ciente dos tamanhos dos objetos pais, ou você acabará com algo realmente estranho elementos dimensionados em sua página.
