Conversor de PX para REM para EM – Calculadora Gratuita de Unidades CSS

Conversor de unidades PX, REM e EM

Um conversor de px para rem e em converte um comprimento CSS entre pixels (px), em raiz (rem) e em, usando um tamanho de fonte raiz e um tamanho de fonte do elemento pai definidos pelo usuário. As três unidades são as formas mais comuns de dimensionar texto e espaçamento em CSS, a linguagem usada para estilizar páginas da web.

O que são px, rem e em?

Um pixel (px) é uma unidade fixa. Uma caixa definida com 200px de largura permanece com 200px de largura, independentemente do tamanho de fonte usado pela página.

Um rem ("root em") é uma unidade que se ajusta ao tamanho da fonte do elemento raiz da página, normalmente a tag <html>. Os navegadores costumam definir esse tamanho de fonte padrão como 16px, a menos que o site o altere. Se o tamanho da fonte raiz for 16px, então 1rem equivale a 16px.

Um em é uma unidade que se ajusta ao tamanho da fonte do elemento em que é usada. Quando o em define o próprio font-size, ele é medido em relação ao tamanho da fonte herdado do elemento pai, o elemento que o contém. Se um elemento pai tem font-size: 20px, então font-size: 1em dentro desse pai equivale a 20px. O conversor usa esse caso baseado no elemento pai.

A principal diferença entre rem e em é aquilo em relação ao qual cada um é medido. O rem sempre considera o elemento raiz. O em considera o tamanho da fonte do próprio elemento ou o herdado, de modo que seu valor pode mudar a cada nível de aninhamento.

Como calcular px para rem

Para converter pixels em rem, divida o valor em pixels pelo tamanho da fonte raiz:

rem = px ÷ tamanho da fonte raiz

Exemplo

Com o tamanho de fonte raiz padrão de 16px, 24px é convertido em:

24 ÷ 16 = 1,5rem

Se um site definir o tamanho da fonte raiz como 10px (um truque comum, feito definindo html { font-size: 62.5%; }, pois 62,5% de 16px é 10px), os mesmos 24px se tornarão:

24 ÷ 10 = 2,4rem

Como calcular rem para px

Para fazer a conversão inversa, multiplique o valor em rem pelo tamanho da fonte raiz:

px = rem × tamanho da fonte raiz

Com uma raiz de 16px, 1.5rem é convertido novamente em 1,5 × 16 = 24px.

Como calcular px para em

Para converter pixels em em, divida o valor em pixels pelo tamanho da fonte do elemento pai:

em = px ÷ tamanho da fonte do pai

Exemplo

Se o tamanho da fonte do elemento pai for 20px, então 24px será convertido em:

24 ÷ 20 = 1,2em

Como calcular em para px

Multiplique o valor em em pelo tamanho da fonte do pai:

px = em × tamanho da fonte do pai

Com um pai de 20px, 1.2em é convertido novamente em 1,2 × 20 = 24px.

Como calcular rem para em e em para rem

Como rem e em usam tamanhos de fonte diferentes como referência, a conversão entre eles requer tanto o tamanho da fonte raiz quanto o tamanho da fonte do pai:

em = rem × (tamanho da fonte raiz ÷ tamanho da fonte do pai)

rem = em × (tamanho da fonte do pai ÷ tamanho da fonte raiz)

Exemplo

Com um tamanho de fonte raiz de 16px e um tamanho de fonte do pai de 20px, 2rem é convertido em:

2 × (16 ÷ 20) = 1,6em

Se os tamanhos de fonte raiz e do pai forem iguais, 1rem será sempre igual a 1em.

Quando cada unidade é útil

Pixels funcionam bem para detalhes que não devem mudar de tamanho, como uma borda de 1px ou um ícone de largura fixa.

Rem é comum para espaçamento e tipografia que devem permanecer consistentes em toda a página. Como sempre se refere ao tamanho da fonte raiz, um valor em rem não muda, independentemente do nível de aninhamento do elemento. Isso também faz com que layouts baseados em rem se ajustem automaticamente quando o usuário aumenta o tamanho de fonte padrão do navegador, o que ajuda pessoas com baixa visão.

Em funciona bem dentro de um único componente independente, como um botão, no qual o preenchimento deve variar junto com o tamanho da fonte do próprio botão. Um problema comum do em é que ele se acumula: se vários elementos aninhados usarem font-size: 1.2em, cada nível multiplica o anterior, fazendo os tamanhos de fonte crescerem mais rapidamente do que o pretendido.

Após três níveis, o texto terá crescido cerca de 73%, e não 20%, como um desenvolvedor poderia esperar de uma única regra 1.2em.

Como usar o conversor

1. Insira um valor no campo de pixels, rem ou em.
2. Os outros dois campos são atualizados automaticamente.
3. Defina o tamanho da fonte raiz de acordo com o elemento <html> do projeto (16px por padrão na maioria dos navegadores).
4. Defina o tamanho da fonte do elemento pai de acordo com o tamanho da fonte do elemento dentro do qual um valor em rem ou em ficaria.
5. Use o botão de cópia ao lado de um campo para copiar seu valor.

A ferramenta também mostra os três valores lado a lado, para que seus tamanhos relativos possam ser comparados visualmente.

Perguntas frequentes

Qual é a diferença entre rem e em? O rem sempre se refere ao tamanho da fonte do elemento raiz. O em se refere ao tamanho da fonte do elemento em que é usado, que, no caso do próprio font-size, é o tamanho herdado do elemento pai. Um valor em rem permanece o mesmo em toda a página; um valor em em pode mudar conforme o nível de aninhamento do elemento.

Por que os navegadores usam 16px como tamanho de fonte padrão? O tamanho de 16px é o padrão usual de texto nos principais navegadores, e as pessoas podem alterá-lo nas configurações do navegador. As diretrizes de acessibilidade web pedem que o texto possa ser redimensionado em até 200 por cento sem perda de conteúdo ou funcionalidade. Dimensionar o texto em rem permite que a página acompanhe o padrão escolhido pelo leitor.

O que é o truque de 62,5%? Definir html { font-size: 62.5%; } transforma o tamanho de fonte raiz padrão de 16px em 10px, pois 62,5% de 16 é 10. Isso simplifica os cálculos com rem, porque 1,6rem equivale a 16px e 2,4rem equivale a 24px.

Valores em px, rem e em podem ser negativos? Sim, nas propriedades que aceitam comprimentos negativos, como margens ou transformações CSS. O preenchimento (padding) não pode ser negativo em CSS: valores negativos de padding são inválidos, então os navegadores os ignoram.

Todo valor em pixels deve ser convertido para rem? Não necessariamente. Bordas e outros detalhes finos geralmente são mantidos em pixels, pois raramente precisam acompanhar a escala do tamanho da fonte e podem parecer irregulares em larguras menores que um pixel. Rem é adequado para espaçamento e tipografia que devem acompanhar a preferência de tamanho de fonte do usuário.

A escolha da unidade afeta o desempenho da página? Não. Os navegadores convertem todo comprimento CSS para o mesmo valor interno durante o layout, portanto px, rem e em são renderizados com a mesma rapidez. A escolha entre eles afeta a manutenibilidade e a acessibilidade, não a velocidade.

Referências

1. World Wide Web Consortium (W3C). CSS Values and Units Module Level 4. CSS Values and Units Nível 4, comprimentos relativos à fonte — o em equivale ao tamanho de fonte computado do elemento (o tamanho herdado quando usado em font-size); o rem equivale à unidade em do elemento raiz.
2. Mozilla. font-size, MDN Web Docs. MDN: font-size — sem tamanho de fonte definido nos ancestrais, 1em equivale ao padrão do navegador, geralmente 16px.
3. W3C Web Accessibility Initiative. Understanding Success Criterion 1.4.4: Resize Text. WCAG 2,1 Understanding 1.4.4 — o texto pode ser redimensionado em até 200 por cento sem perda de conteúdo ou funcionalidade.
4. World Wide Web Consortium (W3C). CSS Box Model Module Level 4. CSS Box Model Nível 4 — valores negativos para as propriedades de preenchimento (padding) são inválidos.