Devemos usar
em
epx
pois é o que está na spec da W3C ?
Devemos usarrem
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 tiver18px
, o1em
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 ofont-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.