Conversor PX para REM
Para converter px em rem, divida o valor em pixels pelo tamanho da fonte raiz: rem = px / raiz. Com a raiz padrão do navegador, de 16px, 24px / 16 = 1.5rem. Mude a base abaixo – 14px para o Ant Design, 10px para o truque dos 62,5 % – e os valores rem e em acompanham; já o valor em pontos acompanha os pixels, porque 1px é sempre 0,75pt.
O campo em pressupõe que o elemento herda o tamanho de fonte base indicado acima. No CSS, em é resolvido em relação ao tamanho de fonte do próprio elemento – e ao do elemento pai quando você o usa na própria propriedade font-size.
Conversão em lote: cole CSS ou uma lista de valores em px
Cada valor em px é reescrito em rem com base no tamanho de fonte base acima.
Como converter px em rem?
A fórmula é rem = px / tamanho da fonte raiz e, no sentido inverso, px = rem x tamanho da fonte raiz. Só conta o tamanho de fonte do elemento html raiz, por mais aninhado que o elemento esteja, e é isso que torna a aritmética em rem previsível. Com a raiz padrão de 16px: 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem e 40px = 2.5rem.
Não arredonde o resultado. 15px são exatamente 0.9375rem com raiz de 16px; arredondar para 0.94rem leva o tamanho renderizado a 15.04px e quebra o alinhamento de uma grade. Os navegadores calculam comprimentos subpixel e os ajustam à grade de pixels do dispositivo ao pintar, então copie o valor exato que o conversor fornece. O conversor imprime até seis casas decimais: exatas em raízes que dividem sem resto, como 16px e 10px, e com precisão de um milionésimo de rem quando não dividem, como 14px.
Tabela px para rem com raiz de 16px, 14px e 10px
O mesmo valor em pixels vira três valores rem diferentes conforme a raiz definida pelo seu projeto, por isso esta tabela traz os três, além do equivalente em pontos (o CSS define 1px como 1/96 de polegada e 1pt como 1/72, logo 1px = 0.75pt). As colunas de 16px e 10px são exatas. Com raiz de 14px a divisão quase nunca é exata, então esses valores são arredondados para quatro casas decimais e marcados com o sinal de aproximação; o conversor acima mostra mais dígitos.
| Pixels | rem (raiz 16 px) | rem (raiz 14 px) | rem (raiz 10 px) | Pontos |
|---|---|---|---|---|
| 1px | 0.0625rem | ≈0.0714rem | 0.1rem | 0.75pt |
| 2px | 0.125rem | ≈0.1429rem | 0.2rem | 1.5pt |
| 4px | 0.25rem | ≈0.2857rem | 0.4rem | 3pt |
| 8px | 0.5rem | ≈0.5714rem | 0.8rem | 6pt |
| 10px | 0.625rem | ≈0.7143rem | 1rem | 7.5pt |
| 12px | 0.75rem | ≈0.8571rem | 1.2rem | 9pt |
| 14px | 0.875rem | 1rem | 1.4rem | 10.5pt |
| 16px | 1rem | ≈1.1429rem | 1.6rem | 12pt |
| 18px | 1.125rem | ≈1.2857rem | 1.8rem | 13.5pt |
| 20px | 1.25rem | ≈1.4286rem | 2rem | 15pt |
| 24px | 1.5rem | ≈1.7143rem | 2.4rem | 18pt |
| 28px | 1.75rem | 2rem | 2.8rem | 21pt |
| 32px | 2rem | ≈2.2857rem | 3.2rem | 24pt |
| 36px | 2.25rem | ≈2.5714rem | 3.6rem | 27pt |
| 40px | 2.5rem | ≈2.8571rem | 4rem | 30pt |
| 48px | 3rem | ≈3.4286rem | 4.8rem | 36pt |
| 64px | 4rem | ≈4.5714rem | 6.4rem | 48pt |
| 80px | 5rem | ≈5.7143rem | 8rem | 60pt |
| 96px | 6rem | ≈6.8571rem | 9.6rem | 72pt |
px, rem ou em: qual unidade usar?
A divisão prática: rem para tudo o que deve acompanhar o tamanho de texto do leitor, em para valores que precisam acompanhar o tamanho de fonte do próprio elemento e px apenas onde um comprimento precisa permanecer fisicamente fixo. A coluna de exemplo pressupõe raiz de 16px e elemento pai de 16px.
| Unidade | Relativa a | 20px equivale a | Melhor para | Acompanha o tamanho de texto do leitor |
|---|---|---|---|---|
| px | Nada: é absoluta (1px = 1/96 de polegada) | 20px | Bordas de um pixel, anéis de foco, ícones de tamanho exato | Não |
| rem | O tamanho de fonte do elemento html raiz | 1.25rem | Tamanhos de fonte, espaçamentos, breakpoints, escalas tipográficas inteiras | Sim |
| em | O tamanho de fonte do próprio elemento (o do pai ao definir font-size) | 1.25em | Preenchimento que precisa crescer junto com o rótulo que envolve | Sim |
| % | O valor do elemento pai para aquela propriedade | 125% | Larguras fluidas e árvores antigas de font-size | Sim (font-size) |
Devo usar px ou rem para preenchimento, margens e bordas?
Use rem para preenchimentos e margens que devem respirar quando o texto cresce: preenchimento de botões, respiro dos cartões, espaçamento de seções, intervalos de grade. Para linhas finas, fique com px. Uma borda de 1px é um pixel independente do dispositivo, bem nítido, enquanto essa mesma borda escrita como 0.0625rem pode ser arredondada para zero ou ficar borrada em certos níveis de zoom, e o mesmo vale para anéis de foco e separadores de 2px. Por isso a conversão em lote acima deixa os valores de 1px e 2px intactos por padrão e reescreve todo o resto.
As media queries são o outro lugar em que rem se paga. Dentro de uma media query, rem é resolvido em relação ao tamanho de fonte inicial do navegador, e não à sua regra html: um breakpoint de 48rem equivale a 768px para quem usa o padrão e cresce para quem aumentou o tamanho do texto. Breakpoints em px nunca se movem.
Como converter px em rem no Figma, no VS Code e no Tailwind?
O Figma mede em px, mas o Dev Mode consegue gerar rem: abra as configurações do Inspect, escolha «Set unit scale» e informe o tamanho de fonte raiz (por padrão, 1rem = 16px). Extensões do VS Code como o cssrem convertem pelo autocompletar e expõem a raiz como configuração (cssrem.rootFontSize, 16 por padrão), então confira se ela bate antes de confiar no resultado em um projeto de 14px. Para um arquivo inteiro, cole-o no campo de conversão em lote acima e defina a base antes. A escala padrão do Tailwind já é baseada em rem com raiz de 16px: uma unidade de espaçamento é 0.25rem (4px), então 16px é 4, 24px é 6 e 40px é 10.
Fontes
Sobre Conversor PX para REM
Este conversor de px para rem responde a uma única pergunta: no CSS, o que um valor em pixels do seu arquivo de design se torna com o tamanho de fonte raiz que o seu projeto realmente usa? Mova o controle da base – 16px é o padrão do navegador, 14px é o do Ant Design, 10px é o antigo truque dos 62,5 % – e todos os valores rem e em da página são recalculados a partir dela, de modo que você nunca precisa lembrar para qual base um número foi escrito.
A base a digitar é a que a sua folha de estilos define no elemento html – não no body, nem o tamanho de fonte do componente que você está estilizando. Se nenhuma regra a define, vale o padrão do navegador: 16px, a menos que o leitor o tenha aumentado. No DevTools, selecione o nó html e leia o font-size computado; esse número é o divisor de toda a folha. Os quatro botões de framework o preenchem para Tailwind, Bootstrap, Material UI e Ant Design.
O diferencial aqui é o modo em lote: cole uma folha de estilos, um despejo de especificações do Figma ou uma lista simples de números e receba a versão em rem com a contagem do que mudou, pronta para copiar ou baixar em CSV. Abaixo da ferramenta você encontra a fórmula nos dois sentidos, uma tabela de 1px a 96px com três raízes e os equivalentes em pontos, uma tabela comparativa de unidades e dez perguntas respondidas a fundo.
Casos de uso
Como usar
Defina o tamanho de fonte base (raiz): 16px é o padrão do navegador, 14px corresponde ao Ant Design e 10px dá o truque dos 62,5 %.
Digite o valor em pixels no campo Pixels. Os campos rem, em e pt se atualizam enquanto você digita.
Ou faça o caminho inverso: informe um valor em rem e veja o tamanho em pixels que ele produz na raiz atual.
Toque em qualquer valor da tabela rápida de 8px a 96px para carregá-lo, ou consulte a tabela completa para raízes de 16px, 14px e 10px.
Cole um bloco CSS inteiro na conversão em lote para reescrever todos os valores em px de uma vez, mantendo as bordas de 1px e 2px.
Copie a declaração CSS gerada ou baixe os pares px/rem convertidos em CSV para a entrega ao time de design.
Dicas Pro
- Defina primeiro o tamanho de fonte base: ele comanda todos os valores rem e em da página (os campos, os botões rápidos e a conversão em lote), então mudar para uma raiz de 14px reescreve todos de uma vez.
- Deixe as bordas de 1px e 2px em px. Bordas subpixel podem ser arredondadas para zero em certos níveis de zoom, e é por isso que o modo em lote as ignora por padrão.
- pt não depende da raiz: 24px são 18pt tanto com base de 16px quanto de 10px, por isso o campo Pontos não se mexe quando você move o controle.
- O modo em lote é executado de novo sempre que você move o controle da base, então dá para ver a mesma folha de estilos com raiz de 16px e de 14px sem colá-la duas vezes.
- Recorra a em apenas quando um valor precisar acompanhar o tamanho de fonte do próprio elemento, como o preenchimento de um botão em torno do rótulo, e mantenha o resto em rem para que nada se acumule.
Perguntas frequentes
Divida o valor em pixels pelo tamanho da fonte raiz: rem = px / raiz. A raiz padrão do navegador é 16px, então 24px / 16 = 1.5rem e 10px / 16 = 0.625rem. Para rem, só importa o tamanho de fonte do elemento raiz, por mais aninhado que o elemento esteja, e é exatamente isso que torna a conta previsível em toda uma folha de estilos.
Com a raiz padrão de 16px, 1rem = 16px, 1.5rem = 24px e 2rem = 32px; aqui se multiplica em vez de dividir: px = rem x raiz. Se a raiz for de 14px, como no Ant Design, 1rem cai para 14px e 1.5rem passa a 21px. Um número em rem não significa nada sem a sua raiz, então informe sempre a base ao lado.
Um tamanho de fonte em px ignora o tamanho de texto que o leitor escolheu no navegador: quem definiu 20px como padrão continua recebendo os seus 14px fixos. rem é medido em relação a essa configuração, então todos os tamanhos escalam juntos. O critério de sucesso 1.4.4 da WCAG 2.2 espera que o texto sobreviva a uma ampliação de 200 %, e uma escala tipográfica em rem consegue isso sem uma única media query extra.
rem é sempre relativo ao tamanho de fonte do elemento html raiz. em é relativo ao tamanho de fonte do elemento em que é escrito, exceto dentro da própria propriedade font-size, onde é resolvido em relação ao tamanho de fonte do elemento pai. É por isso que tamanhos de fonte aninhados se acumulam: 0.9em dentro de 0.9em dentro de 0.9em resulta em 0.729 do original. rem nunca se acumula, e por isso é a escolha mais segura para escalas tipográficas e espaçamentos de layout.
Use rem para preenchimentos e margens que devem respirar quando o texto cresce: preenchimento de botões, respiro dos cartões, espaçamento de seções. Fique com px para linhas finas: uma borda de 1px permanece nítida, enquanto o equivalente em rem pode ser arredondado para zero ou ficar borrado em certos níveis de zoom. É exatamente por isso que a conversão em lote desta página deixa os valores de 1px e 2px em px por padrão.
Fique com 16px, a menos que um framework obrigue a outra coisa, porque é o padrão do navegador. O Ant Design adota uma raiz de 14px. O truque dos 62,5 % define html { font-size: 62.5% } para que 1rem = 10px e a conta vire px / 10: 24px são 2.4rem. Ele continua acompanhando a configuração do leitor – 62,5 % de um padrão de 20px são 12.5px – mas depois você precisa definir body { font-size: 1.6rem }, ou cada parágrafo é renderizado a 10px, e componentes de terceiros feitos para uma raiz de 16px ficam pequenos demais. As três raízes estão na tabela acima.
Leia o valor no inspetor e divida pela sua raiz: um título de 28px é 1.75rem com raiz de 16px, e uma legenda de 12px é 0.75rem. O Dev Mode também pode escrever rem por você: abra as configurações do Inspect ao lado da lista de linguagens, escolha «Set unit scale» e informe o tamanho de fonte raiz (por padrão, 1rem = 16px). Cole um bloco exportado inteiro no campo de conversão em lote acima para reescrever todos os valores de uma vez.
Sim, e normalmente é melhor. Dentro de uma media query, rem é resolvido em relação ao tamanho de fonte inicial do navegador, e não à sua regra html, então um breakpoint de 48rem equivale a 768px no padrão e cresce para leitores que ampliaram o texto. em se comporta da mesma forma ali. Breakpoints escritos em px ficam fixos, independentemente do que o leitor escolher.
Não. Os navegadores calculam comprimentos subpixel e os ajustam aos pixels do dispositivo ao pintar, então 0.9375rem é renderizado exatamente como 15px com raiz de 16px. Arredondar para 0.94rem leva o valor a 15.04px, e esse erro se acumula ao longo de uma grade ou de um ritmo vertical. Copie o valor exato que o conversor imprime e deixe o ajuste com o navegador.
O CSS define 1px como 1/96 de polegada e 1pt como 1/72, logo 1px = 0.75pt e 16px = 12pt; é essa a proporção por trás da coluna de pontos na tabela. O dp do Android é um sistema à parte, em que 1dp = 1px a 160 dpi, e é por isso que um espaçamento Material de 16dp acaba perto de 16px na web, e não em uma conversão para rem.