Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

03 2010 dezembro

Unidade de medida – em

Autor: g3 em CSS

Por questões de compatibilidade entre os navegadores, nós adotamos como padrão a unidade de medida “em”, principalmente para definição do tamanho das fontes.

“em” é uma medida relativa, isso quer dizer que ela pega como base um valor de referência anteriormente definido.

Exemplo

Coloque em um arquivo html, as seguintes marcações:

Dentro do body:

<div id="conteudo">
  <h1>Olá, aqui é o título</h1>
  <p>E aqui é um <strong>paragráfo</strong>.</p>
</div>

Defina o css abaixo para o html de cima:

html { font-size: 100%; }
body { font-size: .68em; }

#conteudo h1 { font-size: 1.45em; }
#conteudo p { font-size: 1.1em; }
#conteudo p strong { font-size: 1.16em; }

Explicação

  1. html “100%”. Isso atribuí ao html o tamanho da fonte padrão dos navegadores, que é 16px.
  2. body “.68em”. Como o tamanho da fonte padrão dos navegadores é 16px, pegamos 11px que é o valor que queremos e dividimos por 16px. Com isso chegamos no valor “0.68”.

Cálculo feito: 11/16 = 0.68

A idéia é que 11px é igual a 0.68em de 16px.

Em outros casos será da mesma forma, pegamos o valor que queremos e dividimos pelo valor de referência que foi definido anteriormente.

Na tabela abaixo estão os dados sobre as medidas dos elementos h1, p e strong.

Para compreender melhor esses valores definidos, veja a tabela:

Elemento Cálculo para restaurar o valor em pixel. Valor na unidade “px” Cálculo para mudar pixel para “em”. Valor na unidade “em”
h1 1.45(em) * 11(px) 16px 16(px) / 11(px) 1.45em
p 1.1(em) * 11(px) 12px 12(px) / 11(px) 1.1em
strong 1.16(em) * 12(px) 14px 14(px) / 12(px) 1.16em

O valor do strong é dividido por 12 porque ele pega o valor do elemento de referência dele, que é o parágrafo e que tem 12px de tamanho da fonte.

Então temos uma fórmula para conversão de “px” para “em” que é:

(valor a ser convertido) / (valor de referência) = (valor que desejamos)

Usando essa medida conseguimos a compatibilidade desejada entre os navegadores.

Veja mais conteúdo sobre unidades de medida usadas no css: