Conversor de PX para REM
Converta px em rem e rem em px com a base que você quiser, com tabela pronta das medidas mais usadas. Explica por que rem respeita o tamanho de fonte escolhido no navegador e o que muda entre em e rem.
A conta acontece no seu navegador, com a base que você escolher. Nada é enviado nem salvo.
O padrão de todo navegador é 16. Mexa aqui só se a sua folha de estilo redefine o font-size da raiz.
16px em rem
1rem
font-size: 1rem;1rem em px
16px
Com base de 16 px. Trocar a base muda os dois lados ao mesmo tempo.
Tabela de conversão na base 16 px
As medidas que mais aparecem em folha de estilo. Clique numa linha para levá-la para os campos acima.
| Pixels | Rem | Como escrever | Ação |
|---|---|---|---|
| 1px | 0.0625 | 0.0625rem | |
| 2px | 0.125 | 0.125rem | |
| 4px | 0.25 | 0.25rem | |
| 8px | 0.5 | 0.5rem | |
| 10px | 0.625 | 0.625rem | |
| 12px | 0.75 | 0.75rem | |
| 14px | 0.875 | 0.875rem | |
| 16px | 1 | 1rem | |
| 18px | 1.125 | 1.125rem | |
| 20px | 1.25 | 1.25rem | |
| 24px | 1.5 | 1.5rem | |
| 28px | 1.75 | 1.75rem | |
| 32px | 2 | 2rem | |
| 36px | 2.25 | 2.25rem | |
| 40px | 2.5 | 2.5rem | |
| 48px | 3 | 3rem | |
| 56px | 3.5 | 3.5rem | |
| 64px | 4 | 4rem | |
| 72px | 4.5 | 4.5rem | |
| 80px | 5 | 5rem | |
| 96px | 6 | 6rem |
Em, rem e px: qual usar em cada caso
| Unidade | Relativa a | Onde ela é a melhor escolha |
|---|---|---|
| rem | font-size do html | Tipografia, entrelinha, espaçamento entre blocos e largura máxima de coluna. Vale o mesmo em qualquer lugar da página e cresce com a preferência do leitor. |
| em | font-size do próprio elemento | Espaçamento interno de um componente que deve acompanhar o tamanho do texto dele, como o padding de um botão. Cuidado com o acúmulo em elementos aninhados. |
| px | Nada, é absoluta em CSS | Borda fina, sombra, traço e qualquer detalhe que não deve crescer com a fonte. Evite em tamanho de texto. |
A conta em si é sempre a mesma divisão, mas o motivo de fazê-la não é estético. Um leitor com baixa visão que aumenta a fonte do navegador para 24px vê um layout inteiro em rem crescer junto e continuar proporcional. Um layout em px ignora a preferência dele, e o texto continua do tamanho que o desenvolvedor decidiu, o que é exatamente o que a WCAG pede que não aconteça.
Para converter px em rem, divida o valor em pixels pela base rem da página, que por padrão é 16px. Então 16px é 1rem, 24px é 1.5rem e 12px é 0.75rem. Para voltar, multiplique pela mesma base. A conversão existe porque o rem acompanha o tamanho de fonte que o leitor escolheu no navegador.
Como funciona a conversão
O rem é uma unidade relativa ao font-size do elemento raiz do documento, o html. Todo navegador nasce com esse valor em 16px, e é por isso que a tabela de conversão mais usada é a da base 16. Quando uma folha de estilo redefine o font-size da raiz, a base muda e todos os valores em rem da página mudam junto: o campo de base desta página existe para reproduzir esse cenário.
O ponto que costuma passar despercebido é que essa base não é uma constante do navegador, e sim uma preferência do leitor. Quem tem dificuldade de leitura aumenta o tamanho padrão nas configurações, e o valor da raiz sobe. Medida em rem cresce proporcionalmente; medida em px fica onde está. Essa é a razão de existir da conversão, e o motivo de ela aparecer em praticamente todo guia de acessibilidade.
Para converter cores, calcular contraste ou gerar clamp() fluido, use a suíte de ferramentas CSS, que também converte em, vw e vh. Para formatar a folha de estilo depois, o formatador de código.
Fórmula
rem = px / base
px = rem × base
base padrão = 16px (font-size do elemento html)
Base: especificação CSS Values and Units do W3C (definição das unidades rem e em) e o critério 1.4.4 da WCAG 2.2, sobre redimensionamento de texto.
Limitações
- A conversão pressupõe a base que você informar. Se a página real redefine o
font-sizeda raiz por media query, ela tem mais de uma base, e cada faixa de largura precisa da sua própria conta. - Dentro de media query,
emeremse referem ao tamanho inicial da fonte no navegador, e não ao font-size que a sua folha de estilo aplicou aohtml. A tabela desta página não descreve esse caso. - O
emdepende do contexto de cada elemento e se acumula em componentes aninhados, então não existe tabela fixa de em: o valor da coluna em da suíte de CSS vale para um pai com a mesma base informada. - Os resultados são arredondados em quatro casas decimais. Valores que não dividem exato (como 15px na base 16, que dá 0.9375rem) aparecem completos, mas frações mais longas seriam cortadas.
Calculadoras relacionadas
Conversão auditável, com o fator de conversão à vista
Atualizado em . Fontes: CSS Values and Units (W3C) / WCAG 2.2 critério 1.4.4 / MDN Web Docs.
Processamento local: esta ferramenta roda no seu navegador e nada é enviado a servidores automaticamente.
Referências técnicas
- W3C, CSS Values and Units Module Level 4Técnica
- W3C, Understanding WCAG 2.2 critério 1.4.4 Resize TextTécnica
- MDN Web Docs, unidades de comprimento em CSSTécnica
- W3C, CSS Fonts Module Level 4Técnica
Links externos para o que foi consultado na construção desta página, com a natureza de cada fonte identificada. O conteúdo delas pode mudar sem aviso; em caso de divergência, vale sempre a fonte primária.
Perguntas frequentes
Quanto é 16px em rem?
Com a base padrão de 16px, 16px é exatamente 1rem. A conta é uma divisão: o valor em px dividido pela base rem da página. Por isso 8px vira 0.5rem, 24px vira 1.5rem e 32px vira 2rem. Se a sua folha de estilo redefine o font-size do elemento html, troque a base no campo desta página e a tabela inteira se ajusta.
Qual é a diferença entre em e rem?
Os dois são relativos, mas a referência é diferente. O rem é sempre relativo ao font-size da raiz do documento, o elemento html, então 1.5rem vale a mesma coisa em qualquer lugar da página. O em é relativo ao font-size do próprio elemento, ou do pai quando aplicado a outra propriedade, então o valor muda conforme onde ele está. Em componentes aninhados, o em se acumula: 0.9em dentro de 0.9em dá 0.81 do tamanho original, que é o efeito de texto encolhendo sozinho a cada nível.
Por que usar rem em vez de px?
Porque rem respeita o tamanho de fonte que a pessoa escolheu no navegador. Quem tem baixa visão costuma aumentar esse valor nas configurações; um texto definido em px ignora a escolha e continua do mesmo tamanho, enquanto um texto em rem cresce junto. É uma questão de acessibilidade, não de estilo: é o que sustenta o critério 1.4.4 da WCAG, que pede que o conteúdo possa ser ampliado até 200% sem perder informação nem funcionalidade.
A base rem é sempre 16px?
É o padrão de todo navegador, mas não é uma garantia. A pessoa pode mudar esse valor nas configurações, e é justamente aí que o rem prova o seu valor. O que não se deve fazer é forçar html { font-size: 62.5% } para que 1rem vire 10px: essa técnica antiga transforma a preferência do usuário em uma conta de porcentagem sobre um valor que você supôs, e ainda quebra se alguém aumentar a fonte.
Devo converter tudo para rem, inclusive bordas?
Não. Borda de 1px, sombra fina e detalhe de traço costumam ficar melhor em px, porque não são texto e não precisam crescer junto com a fonte. Rem é para o que acompanha a leitura: tamanho de fonte, entrelinha, espaçamento interno, margem entre blocos, largura máxima de coluna. Media query também merece cuidado: em media query, tanto em quanto rem se referem ao tamanho inicial da fonte, e não ao font-size do html.
Como converter rem de volta para px?
Multiplique pelo valor da base. Com base 16, 1.25rem é 20px e 0.875rem é 14px. Nesta página os dois sentidos ficam ligados: digitar de um lado atualiza o outro, e trocar a base recalcula os dois ao mesmo tempo.