Conversor de PX para REM (e REM para PX)
Converta px para rem e rem para px instantaneamente. Altere o font-size raiz para adaptar ao seu projeto e veja o resultado em tempo real. Gratuito, sem cadastro.
Tabela de PX para REM (base 16px)
Valores de px comuns convertidos para rem, considerando o font-size raiz padrão de 16px.
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 64px | 4rem |
Dicas
- Por padrão 1rem equivale a 16px, mas usuários com baixa visão costumam aumentar o tamanho de texto padrão do navegador: valores em rem acompanham esse ajuste automaticamente, enquanto valores em px não.
- Os breakpoints de media queries costumam ser escritos em px por tradição, mas font-size, padding e margin são boas opções para usar rem, mantendo o equilíbrio geral do layout quando o usuário muda sua preferência de tamanho de texto.
- Algumas equipes definem html { font-size: 62.5%; } para que 1rem equivalha a 10px, facilitando o cálculo mental (1.6rem = 16px). Informe 10 como valor base acima para converter usando essa convenção.
- Uma convenção comum é usar rem para os valores de layout em nível de página e em para o espaçamento interno de um componente reutilizável, para que o componente escale conforme seu próprio font-size onde for usado.
Perguntas frequentes
Curiosidade — Como o rem chegou à especificação do CSS
A unidade rem foi adicionada ao módulo CSS Values and Units por volta de 2011. Antes disso, quase todos os sites dimensionavam texto e espaçamento com px ou em, e o em tinha um problema conhecido: como é baseado no font-size do elemento pai, aninhar elementos fazia o tamanho efetivo se acumular de formas difíceis de prever em layouts complexos.
O rem foi criado justamente para resolver esse problema, referenciando um único ponto de ancoragem sempre disponível: o elemento raiz, não importa o nível de aninhamento. Nos anos em que o Internet Explorer 9 ainda não suportava rem, era comum escrever primeiro um valor em px como alternativa e depois o valor em rem (font-size: 16px; font-size: 1rem;). Quando os principais navegadores passaram a suportá-lo, em meados da década de 2010, essa alternativa deixou de ser necessária.
Hoje, construir toda a escala tipográfica e de espaçamento de um site em torno do rem é uma prática comum de acessibilidade: permite que a página inteira se ajuste graciosamente quando um visitante aumenta o tamanho de texto do navegador, em vez de quebrar ou cortar conteúdo. Diretrizes como o WCAG (Web Content Accessibility Guidelines) recomendam explicitamente não depender apenas de unidades fixas para o tamanho do texto.