O "em":
O em
reflete a medida da fonte corrente em pixels. É melhor do que px
? Não, na verdade é um complemento.
O que vale mesmo é saber qual usar no caso concreto. Estas unidades de medidas existem para serem usadas conforme são necessarias.
Um exemplo de uso:
.exemplo {
font-size: 20px;
border-radius: .5em;
padding-bottom: 2em;
}
Neste caso, a curva da borda terá 10px, e o padding-bottom
40px.
Vantagem? Neste caso, basta mudar o tamanho da fonte, que o resto dos elementos vai acompanhar proporcionalmente.
Um outro exemplo:
.exemplo {
font-size: 20px;
line-height: 1.5em;
}
Assim, teremos espaçamento 1,5 entre linhas.
Nas versões mais velhas do IE só conseguíamos ampliar as fontes se elas fossem especificadas em em
s ou com <font size=
.
Veja um pouco mais sobre o em
em tipografia na Wikipedia
O "rem":
O em
tinha um problema intrínseco: quando você definia um tamanho de fonte em em
s, a referência de tamanho era a do elemento superior, o que causava uma certa confusão, dependendo de como os elementos eram apresentados em relação aos outros.
Para resolver o problema, à partir do CSS3 foi implementado o rem
, muito similar ao em
, mas que toma sempre por base o elemento raíz da página. Assim, a referência vai ser sempre a fonte do html
, e não do elemento superior.
O "px":
Pixel é a abreviação de Picture Element, e se refere aos pontinhos que compõe as imagens na tela, e é a origem da unidade px
.
As imagens, pela própria natureza, têm suas medidas de largura e altura em px
, e a área útil da tela e da página do browser também são medidas nativamente em px
. Esta é a medida usual para especificar @media
queries.
Usualmente os px
do CSS correspondem aos pixels físicos do dispositivo, e esta ainda é a regra na maior parte dos casos.
No entanto, isso não é mais uma certeza absoluta: com as telas de alta definição, e o fato das decisões de mercado serem tomadas por Comitês, e não gente que realmente usa os padrões, em alguns casos o px
pode não corresponder necessariamente ao pixel do dispositivo físico, como nos displays de alta densidade. Veja a questão a seguir:
Qual o DPI recomendado para imagens utilizadas em websites?
E também as especificações do w3c sobre os "pixels de referência" (en).
A porcentagem (%):
A porcentagem, assim como o em
, também é relativa, mas em unidades absolutas, proporcional ao elemento em si, e não à fonte diretamente.
Exemplos:
.exemplo {
font-size: 20px;
line-height: 150%;
}
Assim, teremos espaçamento 1,5 entre linhas, como no exemplo anterior, mas usando %
. Notar que apesar de estarmos usando um elemento cujo tamanho aparentemente depende da fonte, a porcentagem é relativa ao tamanho natural do bloco, e não das letras em si (mas de qualquer forma, corresponde a UMA linha do bloco, no caso de blocos de texto).
H1 {
width: 50%;
}
Um cabeçalho com metade do que seria a largura total.
Qual usar?
Depende da situação. Não tem um "melhor", nem "certo e errado". Depende da intenção desejada. Se você está usando @media
para fazer layouts para vários dispositivos, e gosta de ter controle preciso sobre o resultado, não há problema nenhum em definir tudo em pixels, o que é uma técnica boa para que o resultado seja exatamente o que você espera.
Tem alguns elementos que vão ser usados em parágrafos com diferentes fontes, proporcionalmente? Use o em
, pois você terá a certeza que o elemento vai ser proporcional ao texto.
O ideal é saber bem as diferenças, pois assim você não fica limitado às "boas-práticas" e usa a ferramenta certa nos lugares e hora certos, com segurança.