As unidades `em` e `ex` são relativas ao tamanho da fonte. `ex` é a altura do "x" minúsculo, e `em` é simplesmente o "tamanho da fonte" (o nome da unidade vem historicamente de 'a largura do "M" maiúsculo', mas [essa definição não é usada no CSS][1]).

![Exemplo de ex][2]

Dessa forma, se você possui um elemento que precisa ser proporcional a um corpo de texto (digamos, uma caixa com texto dentro, de modo que o texto nunca saia da caixa quando a fonte aumenta ou sobre espaço quando a fonte diminui) então o `em` - ou mais raramente o `ex` - é indicado.

Já o `%` é proporcional às dimensões do elemento pai, de modo que se o que você quer é por exemplo que um elemento ocupe 80% do espaço disponível, e outro os 20% restantes, essa unidade é indicada. Há ainda as unidades `vw`, `vh`, `vmin` e `vmax` que são proporcionais à tela inteira (independentemente da hierarquia de elementos), e que [também podem ser usadas para especificar o tamanho da fonte][3] (não se pode definir o `font-size` em `%`).


  [1]: http://en.wikipedia.org/wiki/Em_%28typography%29#CSS
  [2]: http://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography%5FLine%5FTerms.svg/410px-Typography%5FLine%5FTerms.svg.png
  [3]: http://pt.stackoverflow.com/q/35450/215