Font-size no CSS, qual unidade usar?
Camilo Micheletto
Posted on July 28, 2024
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.
Posted on July 28, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 27, 2024