Conversor de PX para REM

O Conversor de PX para REM transforma valores de pixels em unidades rem ou em — e vice-versa — usando qualquer tamanho da fonte raiz que seu projeto realmente utilize. Cole um único valor ou uma escala tipográfica inteira, e você obterá os números convertidos, um bloco CSS pronto para copiar com os pixels originais preservados como comentários, uma régua que renderiza cada tamanho na escala real e uma prévia de como seus valores rem respondem quando um visitante aumenta o tamanho da fonte do navegador.

Fórmula de PX para REM

Converter entre pixels e rem exige apenas uma divisão — a única coisa que você precisa saber é o tamanho da fonte raiz do documento.

Com a raiz padrão do navegador de 16 px, temos 24px ÷ 16 = 1.5rem e 1.5rem × 16 = 24px. Se sua folha de estilos definir html { font-size: 62.5%; }, a raiz se torna 10 px e os mesmos 24 px equivalem a 2.4rem.

Tabela de conversão de PX para REM (raiz de 16px)

rem vs em: por que o aninhamento muda tudo

rem é medido em relação ao elemento raiz (html), portanto significa a mesma coisa em qualquer parte do documento. em é medido em relação ao tamanho da fonte calculado do elemento pai, então valores em idênticos se acumulam à medida que são aninhados. Este diagrama mostra o mesmo multiplicador de 1.5 aplicado em três níveis de profundidade, começando de uma raiz de 16 px:

A regra prática que a maioria das equipes adota: use rem para tamanhos de fonte, espaçamento do layout e breakpoints; use em deliberadamente para elementos que devem acompanhar o próprio componente, como o preenchimento interno de um botão ou o tamanho de um ícone ao lado do texto.

Por que usar rem em vez de px?

• Acessibilidade. Um visitante que define o tamanho padrão da fonte do navegador como 20 px verá todos os tamanhos baseados em rem crescerem proporcionalmente. Tamanhos codificados em px ignoram completamente essa preferência.
• Um único controle para o dimensionamento global. Altere o tamanho da fonte raiz em uma consulta de mídia e toda a sua escala tipográfica e o ritmo de espaçamento mudarão juntos — sem substituições por componente.
• Ritmo de espaçamento consistente. Expressar preenchimentos e margens em rem mantém o ritmo vertical ligado à escala tipográfica, em vez de deixá-los se afastarem.
• Compatível com tokens de design. Sistemas de design modernos (e a escala padrão do Tailwind) publicam tamanhos em rem, então converter seus valores px existentes facilita a entrega.

O truque de 62.5% para o tamanho da fonte raiz

Muitas equipes adicionam esta regra para que 1rem equivalha a 10 px, tornando a conversão mental trivial:

html { font-size: 62.5%; }  /* 16px × 0.625 = 10px */
body { font-size: 1.6rem; } /* volta para um 16px legível */

.card-title { font-size: 2.4rem; } /* 24px */
.card-body  { font-size: 1.4rem; } /* 14px */

Como 62.5% é uma porcentagem do padrão do navegador, e não um valor fixo em pixels, ele ainda respeita a preferência de tamanho da fonte do visitante. O ponto importante é redefinir body para aproximadamente 1.6rem; caso contrário, o texto padrão será exibido em 10 px. Defina o campo de tamanho da fonte raiz acima como 10 para converter com base nessa configuração.

rem em consultas de mídia

Dentro de uma consulta de mídia, rem é resolvido em relação ao tamanho de fonte raiz inicial do navegador — não ao tamanho da fonte html que você define no CSS. Portanto, @media (min-width: 48rem) é sempre 768 px, mesmo que sua folha de estilos declare html { font-size: 10px }. Isso torna os breakpoints em rem seguros e previsíveis, e é um dos poucos lugares onde em e rem se comportam de forma idêntica.

Quando você ainda deve usar px

• Bordas finíssimas e divisórias — uma borda de 1 px deve permanecer com 1 px; dimensioná-la produz linhas borradas de subpixel.
• Ativos de tamanho fixo — deslocamentos de sprites, deslocamentos precisos de sombras e imagens com tamanho intrínseco conhecido.
• Canvas e saída para impressão — quando uma medida física ou em pixels do dispositivo é realmente o que você quer dizer.

Como usar este conversor

1. Escolha uma direção: px → rem, rem → px, px → em ou em → px.
2. Insira seus valores: um número ou uma escala inteira separada por vírgulas ou espaços (até 20 por vez). Unidades finais, como 24px, são aceitas e ignoradas.
3. Defina o tamanho da fonte raiz: mantenha 16 para os padrões do navegador ou toque em um botão predefinido para 10 (truque de 62.5%), 12, 14, 18 ou 20.
4. Clique em Converter: leia a tabela de resultados, a régua de tamanhos reais, a prévia de acessibilidade e o bloco CSS.
5. Copie o CSS: um botão copia todas as declarações de font-size com o valor de pixel de origem mantido em um comentário.

Perguntas frequentes

Como converter px para rem?

Divida o valor em pixels pelo tamanho da fonte raiz. Com a raiz padrão do navegador de 16 px, 24 px ÷ 16 = 1.5rem. Para fazer o caminho inverso, multiplique o valor em rem pelo tamanho da fonte raiz: 1.5rem × 16 = 24 px.

Quantos px equivalem a 1rem?

1rem é igual ao tamanho da fonte raiz da página. Nos principais navegadores, o padrão é 16 px, então 1rem é 16 px, a menos que o elemento html ou as configurações do navegador do visitante alterem isso.

Qual é a diferença entre rem e em?

rem é sempre relativo ao tamanho da fonte raiz no elemento html, portanto 1.5rem tem o mesmo tamanho em qualquer parte do documento. em é relativo ao tamanho da fonte do próprio elemento pai, então elementos aninhados se acumulam: 1.5em dentro de outro 1.5em é renderizado com 2.25 vezes o tamanho base.

O que é o truque de 62.5% para o tamanho da fonte raiz?

Definir html { font-size: 62.5%; } faz com que a raiz tenha 10 px em vez de 16 px, então 1rem equivale a 10 px e a conversão mental fica trivial: 24 px são 2.4rem. Isso ainda acompanha a preferência de tamanho da fonte do navegador do visitante porque 62.5% é relativo, e não um valor absoluto em pixels.

Devo usar px ou rem para tamanhos de fonte?

Use rem para tamanhos de fonte, espaçamento e consultas de mídia, para que o layout cresça quando um visitante aumentar o tamanho padrão da fonte no navegador. Reserve px para valores que não devem ser dimensionados, como bordas finíssimas, divisórias de um pixel e alguns deslocamentos de sombra.

Os valores rem precisam ser números inteiros?

Não. Os navegadores lidam bem com valores rem fracionários e calculam tamanhos de subpixel internamente. Se preferir números mais limpos, escolha um tamanho de fonte raiz que divida sua escala uniformemente, como 10 px ou 8 px, ou use a opção de precisão decimal deste conversor.

rem funciona para padding, margin e consultas de mídia?

Sim. rem é válido em qualquer lugar onde o CSS aceite um comprimento, incluindo padding, margin, width, gap e border-radius. Em consultas de mídia, rem é resolvido em relação à raiz inicial de 16 px, e não ao seu tamanho de fonte html personalizado, então um breakpoint de 48rem é sempre 768 px.

Recursos adicionais

• Unidades de comprimento CSS - MDN
• Comprimentos relativos à fonte - Valores CSS do W3C