Devemos usar
emepxpois é o que está na spec da W3C ?
Devemos usarrempq é 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, o1emdo 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
emno 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-sizedo 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.
Top comments (4)
Muito bom, cara. Parabéns!
Gostei que começou com a pedrada:
"Por mais que seja da W3C, essa documentação é de janeiro de 2010, um ano antes da definição formal da unidade rem."
Hahahah
Pooo eu vi uma pessoa beeeem importante pra quem é junior cagar uma regra sobre isso usando W3C num curso até re recente (mais do que esse documento), não pude deixar de dar meus centavos
Ótimo artigo cara, parabéns. ❤️
Obrigado kingo!