Unidades de medidas EM ou PX: qual a melhor opção?

Essa é uma dúvida muito comum em CSS: “devo usar unidades de medidas EM ou PX?”. A resposta pode variar muito e acaba por gerar muitas dúvidas, especialmente entre os iniciantes. E, nesse artigo, você vai descobrir as vantagens de se usar uma ou outra.

Primeiramente, vamos esclarecer quais unidades são relativas e absolutas, para que não haja nenhum tipo de confusão:

Unidades absolutas

• cm – centímetro
• in – polegada
• mm – milímetro
• pc – pica
• pt – point

Unidades relativas

• % – porcentagem
• em
• ex
• px – pixel

A unidade px é relativa a quê?

Muita gente acha, erroneamente, que px (pixel) é uma unidade absoluta, mas, na realidade, ela é uma unidade relativa. Um pixel nada mais é do que a menor unidade (quadradinho) que existe em uma tela, por isso, ela é considerada uma unidade relativa, já que trata da resolução da mesma.

Por exemplo: pense em um dispositivo construído com uma densidade de 100 dpi (pontos por polegada). Por definição padrão, um pixel é igual a um ponto no dispositivo citado. Logo, 1 pixel nesse caso equivale a 1/100 inch. Como, 1 inch equivale a 2,54 centímetros, podemos concluir que 1 pixel no dispositivo citado é igual a 0,254mm.

E a unidade “em”?

A unidade “em” já é um pouco mais simples, e é relativa ao tamanho da fonte do seletor na qual ela foi declarada. Por exemplo:

p{

font-size: 8pt;

line-height: 2em;

}

Ou seja, nesse caso, o line-height vai ser do tamanho de 16pt, que é 50% a mais do que a fonte normal do seletor.

Mas e se o desenvolvedor não tiver nenhuma font-size no seu seletor? Se ela for definida na raiz do documento (seletor body ou html), ela vai se referenciar ao tamanho da letra dos navegadores padrão (que, normalmente, é de 16px).

Qual unidade devo usar: EM ou PX?

A maior vantagem com relação ao px é a sua facilidade de uso. Com ele, o desenvolvedor consegue saber exatamente qual será o tamanho do seu texto ou onde aquele elemento irá ficar. O problema do px é que ele não oferece ao profissional a acessibilidade necessária às fontes.

Existem vários desenvolvedores que já estão acostumados com o uso de px em seus layouts de trabalho. Porém, ele possui certas desvantagens: Como o usuário consegue aumentar o tamanho da fonte pelo próprio navegador, ela pode ficar grande demais, o que acaba “quebrando” o layout. Já com outras unidades, como o em, esse tipo de coisa não acontece, mantendo a perfeição do layout no browser.

Apesar de ser ótima para manter o layout intacto, a desvantagem da unidade de medida em é que ela é muito difícil de ser utilizada. Para trabalhar bem com ela, é necessário prestar bastante atenção ao que ela vai se referenciar (pode ser ao font-size, ao pai, entre outros). Isso torna o seu uso mais difícil e inviável para muitos desenvolvedores, especialmente aqueles que estão apenas começando. Mas ela compensa muito mais, pois traz mais estabilidade ao layout criado.

E você? Qual unidade de medida prefere usar? E por que gosta mais dela do que das outras? Deixe um comentário!