Conversor de PX para REM

Divida o valor em píxeis pelo tamanho de fonte raiz: rem = px ÷ raiz. Com a raiz padrão do browser de 16px, 16px ÷ 16 = 1rem, 24px ÷ 16 = 1,5rem e 40px ÷ 16 = 2,5rem. Escreva qualquer valor em px no conversor acima e o campo rem atualiza instantaneamente — sem cálculos mentais. Para o truque dos 62,5% (raiz de 10px), basta dividir por 10: 24px = 2,4rem.

Multiplique o valor em rem pelo tamanho de 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 segue imediatamente. O conversor é totalmente bidirecional — introduza qualquer valor que conheça e os outros atualizam automaticamente.

1rem equivale ao tamanho de fonte raiz (html). Em todos os browsers principais — Chrome, Safari, Firefox, Edge — esse valor por omissão é 16px, pelo que 1rem = 16px, a não ser que a raiz tenha sido alterada. Se definir a raiz para 10px (truque dos 62,5%), 1rem passa a ser 10px. Os utilizadores podem também alterar o tamanho de texto padrão do seu browser nas definições, o que altera o equivalente 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). Este é um dos valores rem mais utilizados 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 é sempre 16 píxeis independentemente das configurações do utilizador ou do tamanho do ecrã. rem é relativo: é um múltiplo do tamanho de fonte do elemento raiz (html), pelo que 1rem = 16px por omissão, mas escala se o utilizador aumentar o tamanho de texto base do seu browser nas definições de acessibilidade. Isto torna os layouts baseados em rem mais acessíveis — o texto cresce proporcionalmente quando o utilizador solicita texto maior, enquanto o texto em px fica bloqueado e pode tornar-se difícil de ler.

px é fixo. rem é relativo ao tamanho de fonte raiz (html) — uma âncora consistente para toda a página. em é relativo ao tamanho de fonte do seu próprio elemento pai, acumulando-se quando os elementos estão aninhados: um pai a 20px com um filho a 1,5em dá 30px para o filho. Defina o mesmo filho a 1,5rem e ficará com 24px (1,5 × a raiz de 16px), independentemente 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 da acessibilidade. Quando alguém aumenta o tamanho de texto padrão do seu browser (uma necessidade de acessibilidade comum para utilizadores com deficiências visuais), todos os tamanhos de fonte baseados em rem escalam com isso, enquanto os valores em px ficam bloqueados. A diretriz 1.4.4 do WCAG 2.1 (Redimensionar Texto) exige que o texto seja redimensionável até 200% sem perda de funcionalidade — usar rem torna isto 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 raiz (html) para 62,5% — que com o padrão do browser de 16px equivale a 10px. Isto torna a aritmética rem trivialmente simples: 1,6rem = 16px, 2,4rem = 24px, 3,2rem = 32px. Cada valor rem mapeia de forma limpa para um múltiplo de 10. Mude o tamanho de fonte raiz para 10px usando o preset aqui e o conversor e a tabela de referência recalculam instantaneamente para ver o mapeamento limpo. A desvantagem é que o tamanho da raiz está a substituir o padrão do browser do utilizador, o que reduz ligeiramente 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 cada vez.

O Tailwind CSS utiliza unidades rem para a maioria dos valores de tamanho por omissão, com uma 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 face ao sistema baseado em rem do Tailwind.

Sim, totalmente. O conversor funciona inteiramente em JavaScript no seu browser — não há comunicação com servidores, chamadas a APIs nem dados enviados. Funciona offline após o carregamento da página. Os valores que introduz nunca saem do seu dispositivo. Pode adicioná-lo aos favoritos e usá-lo num voo, num túnel ou onde quer que esteja a programar sem acesso à internet. Nada é armazenado em qualquer servidor.

Escreva qualquer valor no campo Tamanho de Fonte Raiz — ou use os botões de preset para 16px (padrão do browser) ou 10px (truque dos 62,5%). Todas as conversões de rem, em e pt na tabela e na entrada ativa recalculam instantaneamente para corresponder à nova raiz. Se o seu CSS definir html { font-size: 18px; }, introduza 18 como raiz e todas as conversões serão precisas para a escala do seu projeto específico.