# 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 %.

- Endereço oficial: https://pradev.com.br/conversor-px-rem
- Categoria: Front-end e design
- Tipo: Conversor
- Atualizado em: 2026-10-01
- Autor: Leonardo Gaertner (https://pradev.com.br/sobre)
- Preço: grátis, sem cadastro. O processamento acontece no navegador de quem usa.

## 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

```text
24px = 1.5rem
14px = 0.875rem
1.25rem = 20px
12pt = 16px
```

## 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.

## Fontes

- [W3C: CSS Values and Units (rem, em, px e pt)](https://www.w3.org/TR/css-values-4/#lengths)

## Ferramentas relacionadas

- [Conversor de Cores HEX RGB HSL](https://pradev.com.br/conversor-de-cores): Converta cores entre HEX, RGB, HSL, OKLCH, HWB, HSV e CMYK, com seletor de cores e os nomes do CSS. Grátis, direto no navegador.
- [Gerador de Lorem Ipsum](https://pradev.com.br/gerador-de-lorem-ipsum): Gere texto Lorem Ipsum por parágrafos, frases ou palavras, com ou sem tags <p>, para preencher layouts e protótipos. Grátis e sem cadastro.
- [Formatador CSS](https://pradev.com.br/formatador-css): Formate CSS, SCSS e Less online: indentação, espaços e ponto e vírgula padronizados, com aviso de erro de sintaxe. Grátis, no navegador.
- [Minificador CSS](https://pradev.com.br/minificador-css): Minifique CSS online: remove espaços e comentários, encurta cores e zeros e junta regras repetidas. Mostra quanto o arquivo diminuiu. Grátis.
- [Gerador de Paleta a partir de HEX](https://pradev.com.br/gerador-de-paleta-a-partir-de-hex): Gere uma escala de tons de 50 a 950 e combinações (complementar, análogas, tríade) a partir de uma cor. Exporta para CSS e Tailwind.
- [Qual é a Tecla](https://pradev.com.br/qual-e-a-tecla): Aperte uma tecla e veja event.key, event.code, keyCode e os modificadores do JavaScript. Útil para atalhos de teclado e jogos.