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?

Tabela da W3C que informa as unidades recomendadas, de uso ocasional e não recomendadas pra telas e dispositivos impressos

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.

declaração de 1rem substituindo o font-size de 100% no html

`rem` por exemplo, substitui a declaração de `font-size: 100%` no body e é relativa à configuração do usuário

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

Aba chrome://settings na seção Tamanho da fonte

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 */
}
Enter fullscreen mode Exit fullscreen mode

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.

Glifo unicode U+0030 que representa o caractere zero

A escala na foto representa a taxa de legibilidade de uma linha de texto pelo instituto [Baymard](https://baymard.com/blog/line-length-readability). Hoje é possível manter um texto nesses limites, inclusive usando `clamp(50ch, 100%, 75ch)` ou similares

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.


Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment

Your email address will not be published. Required fields are marked *

Discover more from Coursity

Subscribe now to keep reading and get access to the full archive.

Continue reading

Scroll to Top
Martins ad network.