Font-size no CSS, qual unidade usar?

Devemos usar em e px pois é o que está na spec da W3C ?
Devemos usar rem pq é o que tá na boca do povo ?
Devemos usar o que o coração mandar?

Provavelmente você já deve ter visto em algum artigo ou aula essa tabela da W3C, muitas pessoas se baseiam nela pra indicar em e px como unidades a se utilizar quando se trata de font-size no CSS. Por mais que seja da W3C, essa documentação é de janeiro de 2010, um ano antes da definição formal da unidade rem.

A unidade relativa

O que buscamos em uma unidade CSS pra texto é uma entre duas características:

• Ela ser relativa à configuração do usuário
• Ela ser relativa ao font-size

Ser relativo à é a definição de uma unidade que o valor não é fixo, mas calculado à partir das características do documento ou definições da pessoa usuária.

rem, em, ch e ex são tamanhos relativos à configurações da fonte em diferentes formas.

rem

rem é relativo ao tamanho da fonte das configurações do seu navegador / OS

Você pode testar como cada unidade reage à mudança das configurações do navegador digitando chrome://settings na barra de busca

O rem ser relativo ao tamanho da fonte definida no :root (mesma instância do que html, só que com mais especificidade) permite que as fontes “reajam” a essas configurações, mas também permite criar elementos que precisam ser relativos à alterações de fonte pelo usuário ou OS. Nesse caso, px potencialmente irá escalar também, mas quais unidades escalam dependem da configuração e consistência de comportamento entre navegadores – desses, o rem tem um ótimo suporte pra zoom e escala de fonte pelo usuário.

Ainda tô em busca de estudos mais detalhados sobre isso, aceito indicações

em

em é relativo ao font-size do próprio elemento ou do elemento pai mais próximo. font-size é uma característica hereditária, logo se o elemento pai tiver 18px, o 1em do elemento filho será 18px. Isso pode diminuir a previsibilidade do font-size de elementos aninhados.

Pensando em um container com font-size de 32px que contém um botão com font-size de 1.5em

.button-container { font-size: 32px;
} .button { font-size: 1.5em; /* 32 * 150% (ou 1.5) = 48px */
}

Como essa unidade tem uma relatividade contextual, é difícil prever quando o font-size de um container pai pode afetar a base do font-size do elemento filho.

Ser relativo ao font-size do elemento ou do pai pode ser útil pra casos em que o componente precisa reagir proporcionalmente ao tamanho da fonte, num botão por ex:

• O padding pode ser proporcional à fonte
• O width/height de um ícone (svg) pode ser proporcional à fonte

Usar em no padding pode ser potencialmente ruim pra acessibilidade pois pode aumentar de forma imprevisível o espaço entre os elementos em grande escala, como definir o font-size do navegador como “Large” ou aplicar um zoom de 200%.

No Codepen abaixo eu demonstro um botão em que seu padding “reage” ao tamanho da fonte. Ao editar pra usar rem o crescimento não proporcional na minha opinião é menos agradável aos olhos.

ch

ch é uma unidade relativa à largura do glifo (U+0030) do caractere ‘0’ da familia de fonte do elemento. Uma unidade relativa à um glifo específico pode ser usada pra definir uma largura de um elemento baseado na sua quantidade estimada de caracteres.

ex

ex é relativo à altura do caractere x minúsculo
ex representa a altura do x da primeira família de fonte disponível no sistema pro elemento aplicado.
Tal como em ele leva em consideração a altura de um glifo e pode aumentar sua escala de forma mais precisa que em em alguns casos, como na Gecko/Mozilla.

Vale ressaltar que dessas unidades, a única que realmente se baseia na largura dos caracteres do tipo é ch, as restantes se basearão na altura.

Não existe “melhor”

O uso das unidades relativas diz menos sobre “o que é melhor” ou o “que é recomendado”, mas sobre entender as relações com a interação do usuário, user-agent e layout e criar estratégias que computem com base nessas informações, layouts estáticos são valores pré-definidos, layouts responsivos são representados por equações de primeiro ou segundo grau em que precisamos definir as relações com base no resultado pretendido.