As unidades `em` e `ex` são relativas ao tamanho da fonte. `ex` é a altura do "x" minúsculo, e `em` é a largura do "M" maiúsculo <sup>[*citation needed*]</sup>.

![][1]

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][2] (não se pode definir o `font-size` em `%`).


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