Na verdade, não "é recomendado utilizar a unidade “em” ao invés de “px” para fontes". O fundamental é entender como funciona cada medida, para saber em que casos se aplica. Tem casos em que o `em` é mais interessante, tem casos em que o `px` é mais interessante, e o mesmo para cada uma das medidas. Até o momento, aparentemente nenhuma delas é conflitante no sentido de deixar a outra obsoleta. Se pensar em uma página com layou estático, uma vez definidas as medidas, elas só vão variar se houver alguma variação no cliente que for "renderizar" a página, mas sempre aparecerão da mesma forma no mesmo navegador, em princípio. Se pensar numa página com layout dinâmico, que se adapta à largura da tela (superficialmente apelidado de "layout responsivo", termo que por sinal, não tem um significado objetivo), e/ou onde o tamanho das fontes pode ser especificado diferentemente dependendo das quebras especificadas com `@media` ou JS, o uso de cada uma delas pode ter um efeito mais radical. Neste caso, se você quer os espaços e medidas sempre "fixos" em relação às imagens e aos device-pixels, provavelmente vai usar `px`. Se quiser que os espaços acompanhem a ampliação ou redução da fonte em cada medida, vai usar `em` ou `rem`, e talvez `%` em certos contextos. Estas não são regras, são exemplificações. Para saber a adequada para seu caso, precisa entender as diferenças: 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`][1] em tipografia na [Wikipedia][1] 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: http://pt.stackoverflow.com/questions/11048/qual-o-dpi-recomendado-para-imagens-utilizadas-em-websites E também as [especificações do w3c sobre os "pixels de referência"](http://www.w3.org/TR/CSS2/syndata.html#x39) <sup>(en)</sup>. 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][2]" e usa a ferramenta certa nos lugares e hora certos, com segurança. [1]: https://en.wikipedia.org/wiki/Em_(typography) [2]: http://meta.pt.stackoverflow.com/a/813/70