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. O botão Usar de cada linha leva a medida 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.
Em resumo
Para converter px em rem, divida o valor pela base, que é o font-size do elemento html. Todo navegador vem com 16 px, então 16px é 1rem, 24px é 1.5rem e 14px é 0.875rem. Para voltar, multiplique pela mesma base: 1.25rem são 20px.
O motivo de usar rem é o leitor que aumenta a letra. Se a pessoa sobe a fonte padrão do navegador para 20 px, uma medida de 1.5rem passa de 24 para 30 px, e uma escrita como 24px continua igual. O critério 1.4.4 da WCAG 2.2 (W3C, versão de 12 de dezembro de 2024) pede texto que possa ser ampliado até 200% sem perder conteúdo nem função.
Três situações pedem cuidado. Se a folha de estilo redefine o font-size do html, troque a base no campo acima e as 21 linhas da tabela se refazem. O em não tem tabela fixa, porque depende da fonte do próprio elemento e se acumula em componentes aninhados. E dentro de media query, em e rem seguem a fonte inicial do navegador: @media (min-width: 48em) começa em 768 px. Os resultados têm até quatro casas decimais, e nada sai do navegador.
Outras ferramentas de frontend e interface
- Conversor de cores e contraste CSSConverta cores HEX, RGB e HSL, calcule contraste WCAG, gere CSS clamp() e converta px, rem, em, vw e vh no navegador. Suíte frontend 100% local.
- Teste de velocidadeMeça download, upload, ping, jitter e a latência com a rede cheia. Veja se a conexão aguenta chamada de vídeo, 4K e jogo online, e quanto do plano contratado chegou.
- Cronômetro onlineCronômetro online com centésimos e voltas: parcial, total, a volta mais rápida e a mais lenta, cópia para planilha e CSV, tela cheia e atalhos de teclado. Mede pelo relógio interno do navegador e não atrasa com a aba em segundo plano.
- Horário de BrasíliaRelógio com a hora certa de Brasília, sincronizado pelo servidor. Mostra quanto o relógio do seu celular ou computador está adiantado ou atrasado e a hora nos quatro fusos do Brasil.
- Meu IPVeja o seu endereço IP público, o país do acesso, a versão do TLS e do HTTP e o que a sua conexão revela, com o horário da consulta na tela. A leitura vem do próprio valorfinal.com.br, sem serviço de terceiro.
- Gerador de QR CodeGere QR Code grátis de link, WhatsApp, Pix, Wi-Fi, texto, e-mail, telefone, SMS e contato, escolha cor, margem e tamanho e baixe em PNG ou SVG. O código é estático: não expira e não passa por servidor.
Todas as ferramentas, por tarefa, estão em ferramentas de tecnologia online.
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.
Coloque esta ferramenta no seu site, de graça
Tem site, blog ou loja virtual? Esta ferramenta tem uma versão para incorporar: você copia um código e cola no seu HTML. Sem cadastro, sem mensalidade e sem limite de acessos, e ela roda no navegador de quem visita o seu site.
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
- W3C, Media Queries Level 4, seção de unidadesTé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.
Incorpore esta calculadora no seu site (grátis)
Copie e cole o código no seu site. A calculadora se atualiza sozinha. O crédito ao ValorFinal vem junto do código e a gente agradece quem mantém, mas ele é opcional: pode remover sem perder o widget. O link sai com rel="nofollow", ou seja, não transfere autoridade de busca para a gente.
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. A conta vale para qualquer propriedade escrita em rem, de margem a largura de coluna, sempre com a mesma base da raiz.
Quanto é 10px, 12px e 14px em rem?
Na base padrão de 16 px, 10px é 0.625rem, 12px é 0.75rem e 14px é 0.875rem. São tamanhos comuns de texto pequeno, como legenda, nota e rodapé. A conta é sempre a mesma divisão pela base: 14 dividido por 16. Se a página usa html { font-size: 62.5% }, com a fonte padrão do navegador a base vira 10 px, e o mesmo 14px passa a ser 1.4rem. A tabela desta página traz as 21 medidas mais comuns já convertidas.
Quanto vale 1rem se a pessoa aumentar a fonte do navegador?
Vale o tamanho que ela escolheu, desde que a página não fixe o font-size do html em px. Com a fonte padrão, 1rem são 16px. Se a pessoa sobe a fonte para 24 px nas configurações, 1rem passa a valer 24px, e um título de 1.5rem vai de 24 para 36px. Uma medida escrita em px não muda nada. Se a folha de estilo declara html { font-size: 16px }, a escolha do leitor é ignorada e o rem perde a vantagem que justificava usá-lo.
Rem funciona dentro de media query?
Funciona, com uma diferença. A especificação Media Queries do W3C diz que em e rem, dentro de @media, seguem o valor inicial da fonte, definido pelo navegador ou pela preferência do usuário, e não o font-size que a folha de estilo aplicou ao html. Com a fonte padrão, @media (min-width: 48em) começa em 768 px de largura. Se a pessoa aumentou a fonte para 20 px, o mesmo ponto passa para 960 px, e o layout de tela estreita vale por mais tempo, justamente para quem lê com letra maior.
O que é o campo Base rem nesta página?
É o font-size do elemento html da página que você está construindo, em px. O padrão de todo navegador é 16, e a página abre com ele. Mude só se a sua folha de estilo redefine a raiz, por exemplo com html { font-size: 18px }: aí 1rem vale 18px e 27px vira 1.5rem. Ao trocar a base, os dois campos e a tabela inteira se recalculam. O campo aceita qualquer valor acima de zero e até 200 px; fora disso, a página avisa e continua usando 16.
O que é a coluna Como escrever da tabela?
É o valor em rem já no formato de CSS, pronto para copiar: 1rem em vez de 1.0000rem, e 0.75rem com o zero à esquerda. Os zeros que sobram no fim são cortados, e a conta usa no máximo quatro casas decimais, o suficiente para 15px virar 0.9375rem sem perder precisão. O botão Usar, na mesma linha, leva a medida para os campos de cima, onde aparece a declaração font-size com botão de copiar.