Conversor de PX para REM

Divida o valor em pixels pelo tamanho da fonte raiz: rem = px ÷ raiz. Com o padrão de 16px do navegador, 16px ÷ 16 = 1rem, 24px ÷ 16 = 1,5rem e 40px ÷ 16 = 2,5rem. Digite qualquer valor em px no conversor acima e o campo rem atualiza na hora — sem precisar calcular de cabeça. Para o truque dos 62,5% (raiz de 10px), basta dividir por 10: 24px = 2,4rem.

Multiplique o valor rem pelo tamanho da fonte raiz: px = rem × raiz. Com a raiz padrão de 16px, 1rem × 16 = 16px, 1,5rem × 16 = 24px e 0,875rem × 16 = 14px. Edite o campo rem no conversor e o campo px se atualiza imediatamente. O conversor é totalmente bidirecional — insira o valor que você conhece e os demais se calculam automaticamente.

1rem equivale ao tamanho de fonte do elemento raiz (html). Em todos os principais navegadores — Chrome, Safari, Firefox, Edge — o padrão é 16px, então 1rem = 16px, a não ser que a raiz tenha sido alterada. Se você definir a raiz como 10px (truque dos 62,5%), 1rem passa a valer 10px. Os usuários também podem alterar o tamanho de texto padrão do navegador nas configurações, o que muda o valor de 1rem para eles — é por isso que rem é melhor do que px para tamanhos de fonte acessíveis.

0,875rem equivale a 14px com a raiz padrão de 16px (0,875 × 16 = 14). Esse é um dos valores rem mais usados em frameworks CSS — a classe text-sm do Tailwind CSS é 0,875rem (14px). Com uma raiz de 10px (truque dos 62,5%), 0,875rem equivaleria a 8,75px.

px é uma unidade absoluta e fixa — 16px são sempre 16 pixels, independente das configurações do usuário ou do tamanho da tela. rem é relativo: é um múltiplo do tamanho de fonte do elemento raiz (html), então 1rem = 16px por padrão, mas escala se o usuário aumentar o tamanho de texto base do navegador nas configurações de acessibilidade. Isso torna layouts em rem mais acessíveis — o texto cresce proporcionalmente quando o usuário solicita textos maiores, enquanto texto em px fica travado e pode ficar pequeno demais para ler.

px é fixo. rem é relativo ao tamanho de fonte do elemento raiz (html) — uma âncora consistente para a página toda. em é relativo ao tamanho de fonte do próprio elemento pai, então ele se acumula com o aninhamento: um pai a 20px com um filho a 1,5em resulta em 30px para o filho. Defina o mesmo filho como 1,5rem e ele terá 24px (1,5 × a raiz de 16px), independente do pai. Com uma raiz de 16px e sem aninhamento, 16px, 1rem e 1em são todos iguais — a diferença só aparece quando os tamanhos de fonte dos elementos pai mudam.

rem é melhor para tamanhos de fonte do ponto de vista de acessibilidade. Quando alguém aumenta o tamanho de texto padrão do navegador (uma necessidade comum para usuários com deficiência visual), todos os tamanhos de fonte em rem escalam junto, enquanto valores em px permanecem fixos. A diretriz 1.4.4 da WCAG 2.1 (Redimensionamento de Texto) exige que o texto seja redimensionável até 200% sem perda de funcionalidade — usar rem torna isso muito simples. Use px apenas para elementos que não devem escalar, como bordas de 1px ou ícones de tamanho fixo.

O truque dos 62,5% define o tamanho de fonte do elemento raiz (html) como 62,5% — o que, com o padrão de 16px do navegador, equivale a 10px. Isso torna a aritmética com rem extremamente simples: 1,6rem = 16px, 2,4rem = 24px, 3,2rem = 32px. Cada valor rem mapeia de forma limpa para um múltiplo de 10. Selecione o preset de raiz 10px aqui e o conversor e a tabela de referência recalculam na hora para que você veja o mapeamento limpo. A desvantagem é que seu tamanho raiz passa a sobrescrever o padrão do navegador do usuário, o que reduz levemente a acessibilidade.

Com a raiz padrão de 16px: 10px = 0,625rem, 12px = 0,75rem, 13px = 0,8125rem, 14px = 0,875rem, 16px = 1rem, 18px = 1,125rem, 20px = 1,25rem, 24px = 1,5rem, 28px = 1,75rem, 32px = 2rem, 40px = 2,5rem, 48px = 3rem. A tabela de referência na ferramenta lista todos os valores comuns e permite copiar cada um com um único clique — mais rápido do que calcular manualmente toda vez.

O Tailwind CSS usa unidades rem para a maioria dos valores de tamanho por padrão, com raiz de 16px. A escala de espaçamento do Tailwind: 1 unidade = 0,25rem = 4px. Assim, space-4 = 1rem = 16px, space-6 = 1,5rem = 24px, space-8 = 2rem = 32px. Para tipografia: text-sm = 0,875rem (14px), text-base = 1rem (16px), text-lg = 1,125rem (18px), text-xl = 1,25rem (20px), text-2xl = 1,5rem (24px). Este conversor permite verificar rapidamente qualquer valor px personalizado em relação ao sistema rem do Tailwind.

Sim, completamente. O conversor roda inteiramente em JavaScript no seu navegador — sem comunicação com servidor, sem chamadas de API e sem upload de dados. Funciona offline depois que a página for carregada. Os valores que você digita nunca saem do seu dispositivo. Você pode favoritar e usar em um avião, num túnel ou onde quer que esteja programando sem acesso à internet. Nada é armazenado em nenhum servidor.

Digite qualquer valor no campo Tamanho de Fonte Raiz — ou use os botões de preset para 16px (padrão do navegador) ou 10px (truque dos 62,5%). Toda conversão de rem, em e pt na tabela e no campo ativo recalcula na hora para corresponder à sua nova raiz. Se o seu CSS define html { font-size: 18px; }, insira 18 como raiz e todas as conversões serão precisas para a escala do seu projeto específico.