Font-size no CSS, qual unidade usar?

lixeletto

Camilo Micheletto

Posted on July 28, 2024

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.

💖 💪 🙅 🚩
lixeletto
Camilo Micheletto

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