3 mentiras que te contaram sobre quando usar as unidades em, rem ou px no CSS 🤬
Tags: webdev, css, beginners, braziliandevs
Published: 2023-12-05 03:53:50

Artigos sobre o tema são abundantes, mas desinformação sobre ele também é, e ela vem sido indiscriminadamente reproduzida. Meias verdades, equívocos e explicações rasas podem significar retrocessos pro desenvolvimento pessoal, mas também pra aplicações em produção.

## Sumário

- [rem é mais acessível](#rem)
- [rem é melhor que em](#em)
- [px e outras unidades absolutas são ruins](#px)
- [Referências](#ref)

<br />

---

<br />

## `rem` é mais acessível <a id="rem" href="#rem">&#128279;</a>
<small>TL;DR - pra tamanho de fontes é mesmo, já pra outras coisas...</small>

`rem` ou _root font-size_ é *relativa* ao tamanho de fonte base da folha de estilos do _user-agent_ que **geralmente** é `16px` porém depende do dispositivo:

| Dispositivo / Navegador | font-size padrão |
| --- | --- |
| Opera Mini 4.5 | 13px |
| Palm webOS 2.0 & webOS TouchPad | 14px |
| Opera Mini 7 | 17px |
| AOL 9 | 20px |
| Cybook Odyssey (leitor de e-book) | 21px |
| Blackberry 6.0 | 22px |
| NetFront NX | 23px |
| Kindle 3*| 26px |
<small>Tabela transcrita e traduzida [do artigo "People don't change the default 16px font size in their browser (You wish!)"](https://nicolas-hoizey.com/articles/2016/03/02/people-don-t-change-the-default-16px-font-size-in-their-browser/#default-font-size-in-browsers-is-always-16px) do Nicolas Hoizey.</small>

&nbsp;

Vemos por ai **diversas** postagens que vão se resumir a dizer que `rem` é uma unidade responsiva - o que não só é mentira, como leva as pessoas a fazerem coisas assim:

```css
@media (max-width: 42rem) {
  /* resto do código */
}
```

Isso cria uma _media query_ que reage à largura do site **relativa ao tamanho da fonte do user-agent**. Isso significa que quando a pessoa usuária mudar a configuração de fonte do navegador pra poder enxergar melhor os textos ([e elas mudam](https://nicolas-hoizey.com/articles/2016/03/02/people-don-t-change-the-default-16px-font-size-in-their-browser/#default-font-size-in-browsers-is-always-16px))

![Print das configurações do Google Chrome em que o tamanho da fonte está sendo alterado de médio pra grande](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2q2ozoklu15t6dqhpf3h.png)

&nbsp;

O _breakpoint_ que você esperava que fosse 672px (42 * 16), agora só é ativado quando a tela tiver 840px de largura. [Algumas pessoas](https://zellwk.com/blog/media-query-units/) defendem que esse comportamento é o ideal, trazendo uma grande perca de previsibilidade na declaração dos _breakpoints_.

Na dúvida:

<figure>

<img alt="Should this value scale up as the user increases their browser's default font size? This question is the root of the mental model I use. If the value should increase with the default font size, I use rem. Otherwise, I use px" src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sntt897reab82iofigxj.png"/>

<figcaption>Esse valor deve aumentar à medida que o usuário aumenta o tamanho da fonte padrão do navegador? Esta questão é a raiz do modelo mental que utilizo. Se o valor aumentar com o tamanho da fonte padrão, eu uso rem. Caso contrário, eu uso px. - <a href="https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/#the-sixtwofive-trick-13">The Surprising Truth About Pixels and Accessibility - Josh W. Comeau</a>

  </figcaption>
</figure>

&nbsp;

> 💡 A tradução foi escrita pelo André Menezes ([deMenezes](https://dev.to/demenezes)) nesse artigo que recomendo demais se você quiser ler outro _take_ sobre esse mesmo tópico.


{% embed https://dev.to/demenezes/valores-absolutos-e-relativos-em-css-quando-usar-px-e-rem-5fpa %}

<br />

---

<br />

## `rem` é melhor que `em` <a id="em" href="#em">&#128279;</a>
<small>TL;DR - `em` tem seus próprios casos de uso que `rem` não conseguiria substituir</small>

**Sempre** desconfiem de afirmações como "x coisa é melhor que y", geralmente elas partem de um ponto de vista limitado ou pessoal e contribuem em nada pra com quem lê.

O `em` é relativo ao `font-size` do pai quando utilizado no `font-size` e relativo ao `font-size` dele mesmo quando utilizado em outros lugares como `height` e `width`. Se utilizado indiscriminadamente pode causar problemas indesejados com elementos aninhados:

```html
<p style="font-size: 10px">
  <!-- font-size === 15px -->
  <span style="font-size: 1.5em">
    Teste 1.5em
    <!-- font-size === 30px -->
    <span style="font-size: 2em">
      Teste 1.5em
    </span>
  </span>
</p>
```
&nbsp;

> 📖 Esse artigo (apesar de eu não concordar com a conclusão que ele chega) explica de uma forma bem simples porquê o `em` existe, que problemas ele resolvia e o que motivou a criação do `rem`- [R.I.P. REM, Viva CSS Reference Pixel! por Gion Kunz, em inglês](https://mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/)

&nbsp;

Porém o modelo mental que mais favorece o uso do `em` é **usá-lo quando você precisa que algo cresça junto com o tamanho da fonte**. No caso de uso abaixo, quando você aumenta o `font-size` do botão, o `padding` aumenta **proporcionalmente**, permitindo que o botão permaneça com o mesmo aspecto independente do tamanho. O mesmo funciona com ícones, gaps e coisas similares.

{% codepen https://codepen.io/camilo-micheletto/pen/PomgzVB %}

<br />

---

<br />

## `px` e outras unidades absolutas são ruins <a id="px" href="#px">&#128279;</a>
<small>TL;DR - _skill issue_ </small>

Ou "evite usar pixeis" - mas evite **onde** exatamente? Com pouco direcionamento do que fazer, acabamos por chutar unidades CSS sem testar ela em diferentes casos de uso, fazendo nosso layout quebrar de maneiras inimagináveis.

`px` são incríveis pra definir **limites**, pois na maioria das vezes não faz sentido o limite de algo ser relativo. Com _breakpoints_, `max-width`, `min-height` e outros similares.

Outro uso é definir o tamanho de coisas que não vão mudar com o contexto, como o caso de alguns `border-radius` ou `box-shadow`. Se não faz sentido aquela propriedade ser relativa a algo, não a faça relativa.

<br />

---

<br />

Se vai ter algo como regra, tenha não chutar. Cada coisa tem seu caso de uso, fazer de forma consciente significa também testar de forma consciente e garantir a qualidade da aplicação.

Acessibilidade é importante e nenhuma DX vale abrir mão dela. Se seu produto só pode ser usado por algumas pessoas, ou ele não está pronto, ou é só um produto ruim.

<br />

---

<br />

## Referências <a id="ref" href="#ref">&#128279;</a>

[People don't change the default 16px font size in their browser (You wish!) por Nicolas Hoizey (em inglês)](https://nicolas-hoizey.com/articles/2016/03/02/people-don-t-change-the-default-16px-font-size-in-their-browser/#default-font-size-in-browsers-is-always-16px)
Esse artigo busca sanar aquele pensamento de que não tem problema se declarar fontes com `px` pois a pessoa usuária média não redimensiona a fonte.

[Responsive Type and Zoom por Adrian Roseli (em inglês)](https://adrianroselli.com/2019/12/responsive-type-and-zoom.html)
Esse artigo explica como o uso de técnicas de tipografia responsiva pode ser ruim pra acessibilidade.

[Addressing Accessibility Concerns With Using Fluid Type por Maxwell Barvian (em inglês)](https://www.smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type/)
Já esse artigo aborda a matemática por detrás da tipografia fluida e te ensina a acertar em uma que seja acessível.

[PX, EM or REM Media Queries? por Zell Liew (em inglês)](https://zellwk.com/blog/media-query-units/)
Defende a opinião de que `em` e `rem` são boas unidades em media queries e que o "delay" que mexer no root font-size causa é uma feature e não um bug.

[The Surprising Truth About Pixels and Accessibility por Josh Comeau (em inglês)](https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/#bonus-rem-quality-of-life-12)
Esse artigo trás uma visão mais lúcida sobre as qualidades do pixel e quando e onde usá-lo.

[JSBin de teste de REM](https://output.jsbin.com/fesoba)
Possibilita visualizar como um container em `px` e outro em `rem` se comportam quando o usuário muda o font-size.

[WCAG - Technique C14](https://www.w3.org/WAI/WCAG22/Techniques/css/C14)
Técnica suficiente em relação ao [critério de sucesso 1.4.4 - Resize text.](https://www.w3.org/WAI/WCAG22/Understanding/resize-text)

[R.I.P. REM, Viva CSS Reference Pixel! por Gion Kunz (em inglês)](https://mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/)
Explica sobre reference pixel, a história do `em` e do `rem` e trás uma visão interessante (que eu não concordo) do uso do pixel.

[Valores absolutos e relativos em CSS: quando usar px, % e rem por André Menezes](https://dev.to/demenezes/valores-absolutos-e-relativos-em-css-quando-usar-px-e-rem-5fpa)
Uma visão super bacana do uso dessas três propriedades.