O "em" é uma unidade escalável usada em mídia Web. O valor em é baseado na largura da letra M maiúscula. Este valor será igual ao font-size definido na página ou o padrão do navegador (provavelmente 16px) caso este não tenha sido definido em lugar algum.

Exemplo 1:

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */

Se o valor padrão do navegador para font-size é de 16px, 62.5% disso são 10px, então 1em equivale a 10px. E por ser uma unidade escalável, 2.4em é 2.4x 10px (24px), bem como 1.4em é 14px. Um dos problemas de se usar em com tamanhos de fonte é seu efeito cascata, que força o desenvolvedor a ficar pra sempre definindo regras nos seletores filhos para resetá-los de volta a 1em. Além disso, o dimensionamento de fontes com em é composto. Uma lista dentro de uma lista não tem 14px e sim 20px[contexto requerido]. Adentre mais um nível e a fonte passa a medir 27px.

Exemplo 2:

 12px text 


    
 12px text
        

            
 9px text 
        
    

Esses problemas podem ser contornados declarando em qualquer elemento filho que este use 1em, evitando o efeito cascata indesejado. CSS3 agora tem o rem que previne esse comportamento.

REM é um acrônimo para Root EM. Unidades REM permitem a você definir um valor principal no elemento HTML e então usar nos elementos subseqüentes valores relativos à essa unidade principal. A unidade rem também é escalável, mas em relação a elementos específicos na página, sem afetar os outros elementos

Exemplo 1:

html { font-size: 62.5%; } 
 body { font-size: 1.4rem; } /* =14px */
 h1   { font-size: 2.4rem; } /* =24px */

Todos os browsers recentes suportam unidades REM. Para browsers que não a suporta temos que usar como fallback opção em pixels (px):

Exemplo 1:

 html { font-size: 62.5%; } 
 body { font-size: 14px; font-size: 1.4rem; } /* =14px */
 h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

No segundo exemplo (com HTML) alterar a definição para (garantido que os elementos filhos permaneçam com 12px):

Exemplo 1:

p, li
{
  font-size: 12px;
  font-size: 0.75rem;
}