Conversor de px para rem

Este conversor transforma px em rem e o contrário, além de em, pt e %. Com a base padrão dos navegadores, de 16px, 24px são 1.5rem e 14px são 0.875rem. Você pode mudar o tamanho da fonte da raiz, para projetos que usam outra base, e do elemento pai, que é a referência do em e do %.

Atualizado em · Por Leonardo Gaertner

Resultado

24px = 1.5rem

Tabela de px para rem (base 16px)

pxrempt
1px0.0625rem0.75pt
2px0.125rem1.5pt
4px0.25rem3pt
8px0.5rem6pt
10px0.625rem7.5pt
12px0.75rem9pt
14px0.875rem10.5pt
16px1rem12pt
18px1.125rem13.5pt
20px1.25rem15pt
24px1.5rem18pt
28px1.75rem21pt
32px2rem24pt
36px2.25rem27pt
40px2.5rem30pt
48px3rem36pt
56px3.5rem42pt
64px4rem48pt
72px4.5rem54pt
80px5rem60pt
96px6rem72pt

rem é relativo à fonte do elemento raiz (16px por padrão nos navegadores); em e % são relativos à fonte do elemento pai. 1pt = 4/3 px.

Achou um resultado errado ou tem uma sugestão? Avise por e-mail.

Como usar

  1. Digite o valor e escolha as unidades de origem e de destino.
  2. Se o seu projeto muda o font-size do html, ajuste a fonte da raiz.
  3. Copie o valor pronto para o CSS ou consulte a tabela.

Como funciona

O rem é relativo ao tamanho da fonte do elemento raiz (o html), que nos navegadores é 16px por padrão. Por isso, rem = px ÷ 16: 24px são 1.5rem. Se a pessoa aumentar a fonte padrão do navegador para 20px, tudo o que estiver em rem cresce junto, o que é bom para a acessibilidade.

O em e o % são relativos à fonte do elemento pai, então mudam conforme onde estão. Já o pt é uma medida de impressão: o CSS fixa 96px por polegada e 72pt por polegada, então 1pt = 4/3 px e 12pt = 16px.

Exemplos com base de 16px

24px = 1.5rem

14px = 0.875rem

1.25rem = 20px

12pt = 16px

Fonte: W3C: CSS Values and Units (rem, em, px e pt)

Perguntas frequentes

Devo usar rem ou px?

Para tamanhos de fonte, rem: ele respeita a fonte padrão que a pessoa escolheu no navegador. Para bordas finas e detalhes que não devem crescer, px funciona bem. Muitos projetos também usam rem em espaçamentos, para a página crescer de forma proporcional.

E o truque de html { font-size: 62.5% }?

Ele faz 1rem valer 10px, o que facilita a conta. Funciona, mas obriga a redefinir a fonte do body e pode confundir bibliotecas que contam com 16px. Se usar, ajuste a fonte da raiz para 10 nesta ferramenta.

Qual a diferença entre rem e em?

O rem sempre se refere à raiz, então 1rem é igual em qualquer parte da página. O em se refere ao pai: dentro de um elemento com fonte de 20px, 1em vale 20px, e um em dentro de outro em se multiplica.

Outras ferramentas que podem ajudar

Ver tudo em Front-end e design