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).
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 fontetambém podem ser usadas para especificar o tamanho da fonte (não se pode definir o font-size
em %
).