Quando utilizar rem, em ou pixel

Quando começamos a estudar desenvolvimento web, principalmente a os conceitos de CSS e utilização de unidades de medidas é normal que surjam algumas dúvidas quanto a utilização das 3 principais que nos são apresentadas: px, rem e em.

Minhas dúvidas começaram a surgir quando comecei a estudar e criar componentes no ReactJS. Nem sempre é tão claro quando devemos preferir uma unidade a outra, então aqui vou deixar uma breve explicação acerca do conceito de cada unidade e o melhor momento para utilizar cada uma.

O que é a dimensão Px

É importante deixar claro inicialmente que o pixel que utilizamos em CSS não é exatamente igual ao pixel físico. O CSS define o que podemos chamar de pixel referência, que mede o tamanho de um pixel em uma tela de 96dpi. Quando especificamos a unidade pixel em um projeto, o agente que irá usar o valor atribuído fará o reescalonamento para sua unidade que corresponda ao pixel de referência.

Além disso, o pixel é uma unidade absoluta e não escalável. A mudança do seu valor não afeta outros valores de unidade absolutas, ou seja, o valor do pixel continua imutável mesmo após configurações do usuário.

O que é rem

Diferente do pixel, o rem é uma unidade escalável e relativa, ele varia de acordo com a dimensão root do seu navegador (por padrão essa unidade é 16px), na maior parte das vezes 1rem = 16px. Podendo variar se o tamanho da fonte raiz for alterado.

Abaixo você consegue ver que o tamanho da fonte raiz do chrome está configurada para 16px.

Para fazer conversões de pixel para rem, você pode calcular manualmente fazendo uma divisão básica:

Para criar um elemento com tamanho 32px dividimos 32px/16px = 2rem. Ou você pode utilizar aplicações prontas que realizem essa conversão:

Aqui uma aplicação simples desenvolvida por mim para conversão de px para rem ou vice-versa - https://pixeltorem.netlify.app/

A grande pergunta é, se o rem é basicamente um modelo que converte pixel para outra escala, qual a diferença no código que ele tem? Se o usuário não muda seu tamanho de fonte raiz, não existe diferença pois o pixel e o rem terão valor idêntico. Mas para aqueles que alteram o tamanho da raiz para melhor acessibilidade todos os elementos dimensionados em rem iriam mudar proporcionalmente.

É importante lembrar que quando o zoom é utilizado em um navegador, o pixel é dimensionado corretamente, mas a imprevisibilidade das predefinições do usuário nos obriga a utilizar metodologias que abranjam todas as variações de configuração.

Pequena dica sobre uso de rem

Podemos utilizar um pequeno macete para facilitar o uso do rem e sua conversão. Consiste em mudar o valor do font-size do html para 62,5%, que seria = 10px e alterando o valor do body para 16px novamente.

html {
  font-size: 62.5%; //10px
}

body {
  font-size: 1.6rem; //16px
}

dessa forma 1rem = 10px, fazer a conversão torna-se bem mais simples já que basta dividir o valor em pixel por 10 e se obterá o valor em rem.

O que é em

O em também é uma unidade dinâmica, porém sua referência não é o valor raiz do navegador, de acordo com o w3Schools o em é igual ao valor calculado da propriedade font-size do elemento no qual ela é usada, na maior parte das vezes pode ser o próprio pai do elemento. Um breve exemplo: um elemento com font-size 2rem (32px se considerarmos o valor padrão do root) possui um filho com font-size de 1em, então o valor do filho será igual a 32px, já que o valor referência neste caso é o pai.

Quando usar cada uma?

pixel - Principalmente em ajustes finos, ou pequenas margens. Voce pode usar pixel para definir a espessura de uma borda por exemplo, um ajuste fino na hora de posicionar um elemento com posicionamento absoluto. Nada que quando alterado o root de um navegador quebre seu layout.

rem - Você pode usar rem em todo o seu projeto, ele é ótimo para manter acessível e adaptável, utilize ferramentas que te auxiliem na formatação. No VSCode por exemplo voce possui o px to rem que pode facilitar muito a vida de conversão. Uma dica também é sempre que colocar uma dimensão em rem, comente na frente a quantos pixels aquele valor equivale para futuras alterações do código

body {
font-size: 1rem; //16px
}

em - É uma ótima alternativa de se utilizar em preenchimentos, alturas de linhas e margens. Um exemplo prático é uma section com elementos de texto, utilizar o em para dimensionar as alturas das linhas tornará a exibição do elementos mais dinâmica frente a uma possível mudança de exibição do layout.

Comece a praticar o uso das 3 unidades em seus projetos sempre que puder, e verifique como ele se comporta com a mudança do root size. Seu código fica muito mais elegante e seu projeto muito mais bonito.