Converter px em rem Pixels ↔ Root em Grátis Online Seguro
Escreva um valor em px e leia-o de imediato em rem. A conta faz-se no seu navegador, nada é enviado para lugar nenhum, e aquilo de que o resultado depende está escrito mais abaixo em vez de ser presumido.
Nada é enviado
Tamanhos habituais — Converter px em rem
| px | rem |
|---|---|
| 8 | 0.5 |
| 10 | 0.625 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
| 64 | 4 |
De onde vêm estas unidades
O pixel do CSS não é o pixel do seu tela. Quando as telas deixaram de ter uma densidade previsível, uma página medida em pixels verdadeiros tornou-se uma página que encolhia à medida que as telas ficavam mais finos; redefiniu-se então o pixel CSS como um comprimento de referência: cerca de 1/96 de polegada, visto a uma distância cómoda de leitura. Todo o resto desta página assenta nisso. O em é mais velho do que a web — nos tipos de chumbo era a largura de um bloco fundido, chamado assim por causa do M maiúsculo — e em CSS significa o tamanho de letra em vigor, razão pela qual muda ao aninhar elementos. O rem foi acrescentado precisamente para escapar a isso: é o em do elemento raiz e nunca se compõe. O vw chegou com o desenho adaptativo: um centésimo da largura da janela, seja ela qual for.
Onde as encontra
Estas são as unidades de qualquer planilha de estilo. Os pixels dimensionam contornos, sombras e tudo o que não deve escalar; o rem dimensiona a gráfica, os espaçamentos e a disposição, de modo que uma única alteração na raiz redimensiona uma interface inteira; o em dimensiona o que deve seguir o seu próprio texto, como o enchimento de um botão; o vw dimensiona títulos e cabeçalhos que têm de preencher o tela em qualquer aparelho. Converter entre eles é a aritmética diária de transformar uma maquete entregue em pixels numa planilha de estilo que escala.
Perguntas frequentes
Porque é 16 px o ponto de partida habitual?
Porque é o tamanho de texto por padrão em todos os navegadores importantes, e uma planilha de estilo que não o substitui herda-o. Um rem equivale portanto a 16 px na definição por padrão, e daí vêm as conversões familiares: 0,5 rem são 8 px, 1,5 rem são 24 px. Se um usuário aumentou esse valor nas definições do navegador, esses mesmos valores em rem crescem com ele — que é precisamente para isso que servem.
Devo usar rem ou em?
Rem para tudo o que deva seguir a página no seu todo — escala tipográfica, espaçamentos, larguras de disposição — porque se mede a partir da raiz e nunca se acumula. Em para tudo o que deva seguir o texto em que se encontra: o enchimento de um botão, o espaço junto a um ícone, o avanço de uma citação. O erro comum é aninhar elementos dimensionados em em: 1,2 em dentro de 1,2 em torna-se 1,44, depois 1,73, até o texto no fundo da página ter o dobro do tamanho pretendido.
O resultado é exato?
Onde as duas unidades se definem uma pela outra com números inteiros, sim — a página informa isso acima do número, e o único arredondamento está em quantos dígitos se mostram. Onde a razão não tem decimal finita, a página mostra doze algarismos significativos e diz que a relação é aproximada, em vez de fingir o contrário.
Alguma coisa que escrevo sai do meu aparelho?
Não. A aritmética roda no seu navegador; nada é enviado, e nem sequer há servidor para o receber. Carregada uma vez, a página continua funcionando com a rede desligada.
Por que designers e desenvolvedores convertem px em rem
As ferramentas de design falam em pixels. Um mockup diz que o título tem 32 px, o vão entre seções tem 48 px, o botão tem 16 px de preenchimento. As folhas de estilos, bem escritas, falam em rem. O intervalo entre essas duas línguas é onde esta página fica: você digita um tamanho em pixels e o lê em rem, para que o número que você põe no CSS signifique o que o designer quis dizer. Converter px em rem é um ato pequeno, mas é feito centenas de vezes na vida de um site, e uma base errada transforma um layout cuidadoso num layout ligeiramente errado em toda parte ao mesmo tempo.
A razão para se importar com o rem é a acessibilidade e a flexibilidade. Um rem é um múltiplo do tamanho de fonte da raiz, que o navegador define como 16 px a menos que se diga outra coisa, e que o leitor tem liberdade de mudar nas suas configurações. Um layout escrito em rem, portanto, mantém a forma quando alguém com visão fraca aumenta o tamanho de texto padrão: texto, espaçamento e caixas crescem juntos. Um layout escrito em pixels não acompanha, e o leitor que pediu texto maior recebe letras maiores em caixas apertadas, ou nada. É por isso que quase todo guia de estilo moderno diz a mesma coisa: use rem para texto e espaçamento.
Esta página faz a aritmética no seu navegador. Nada é enviado, e aquilo de que a conversão depende, o tamanho da base, está escrito abaixo e fica num campo que você pode mudar, em vez de ser presumido pelas suas costas. Abaixo você encontra a fórmula, a tabela de tamanhos comuns, as razões pelas quais a base importa, as armadilhas que pegam quem converte px em rem com pressa e um breve guia para usar o resultado em folhas de estilos reais.
A fórmula e a base
rem é igual a px dividido pela base
A fórmula é uma divisão: rem = px ÷ base. Com a base usual de 16 px, um tamanho de 24 px vira 1,5 rem, 32 px viram 2 rem e 8 px viram 0,5 rem. A página mostra o resultado enquanto você digita, e mostra a base que usou, então a linha 24 px = 1,5 rem (16 px) diz exatamente o que foi presumido.
De onde vem o 16
A base começa em 16 px porque é isso que um navegador usa quando ninguém diz outra coisa. Não é uma lei da web; é o padrão do padrão, e se mantém estável há décadas. Se o seu CSS nunca toca no tamanho de fonte da raiz, 1 rem são 16 px para a maioria dos visitantes. Se toca, a base é o que você definir.
O truque dos 62,5% e por que as pessoas o usam
Algumas folhas de estilos definem o tamanho da raiz como 62,5%, o que faz 1 rem igual a 10 px num navegador padrão, de modo que 24 px são simplesmente 2,4 rem e a aritmética é fácil de fazer de cabeça. Funciona, mas tem um custo: a página inteira passa a depender dessa porcentagem, e qualquer componente que espere 16 como base sairá pequeno demais. Se o seu projeto faz isso, digite 10 no campo da base desta página, e todos os números combinarão com o seu CSS.
O que a conversão mantém e o que não consegue
Mantém a proporção
Um rem é o que for o tamanho de fonte da raiz, então um layout escrito em rem mantém a forma quando esse tamanho muda. Essa é toda a razão de escrevê-lo assim. Quando você converte px em rem, o número que obtém é a mesma proporção que o valor em pixels tinha na base que você escolheu, agora expressa de um jeito que escala.
Não consegue saber as configurações do seu leitor
O número depende inteiramente da base. Se o seu CSS define outro tamanho no elemento raiz, ou o leitor mudou o tamanho de texto padrão no navegador, o que muita gente faz e tem direito de fazer, então 1 rem não são 16 px para ele. O número da página só está certo para a base do campo. Isso não é um defeito da ferramenta, mas a natureza da unidade: ela é relativa, e uma unidade relativa não tem valor fixo para o qual converter.
Arredondamento
A divisão por 16 dá resultados limpos para muitos tamanhos comuns (16, 24, 32, 48, 64) e dízimas para outros (10 px são 0,625 rem; 13 px são 0,8125). A página dá quantos dígitos o número precisar, e você decide quantos manter na folha de estilos. Os navegadores lidam com decimais longos sem problema, mas um valor arredondado como 0,8125rem é mais fácil de ler e manter que um com dez dígitos.
Tamanhos comuns
A tabela no pé da página
Sob o conversor você encontra uma tabela de tamanhos comuns: 8 px são 0,5 rem, 10 px são 0,625, 12 px são 0,75, 14 px são 0,875, 16 px são 1, 18 px são 1,125, 20 px são 1,25, 24 px são 1,5, 32 px são 2, 48 px são 3 e 64 px são 4. São os tamanhos que mais aparecem em escalas tipográficas e sistemas de espaçamento, e tê-los à frente poupa uma conversão.
Uma escala construída em rem
Um hábito útil é escolher um pequeno conjunto de valores em rem e reutilizá-los: 0,5, 1, 1,5, 2, 3 e 4 para espaçamento, e 0,875, 1, 1,25, 1,5, 2 para texto. Os designers chamam isso de escala, e ela mantém um site visualmente consistente. Quando um mockup lhe dá um valor estranho como 22 px, use o conversor para ver que são 1,375 rem e depois decida se arredonda para o valor mais próximo da sua escala.
Como converter px em rem aqui
Digite o valor em pixels
Digite o tamanho em pixels no primeiro campo. Decimais são aceitos, então 13,5 px funciona tão bem quanto 14.
Confira a base
Deixe em 16 se o seu CSS não muda o tamanho da raiz. Mude se mudar. O resultado se atualiza enquanto você digita.
Copie o valor em rem
Leia o número e use-o no seu CSS, com a unidade escrita depois: font-size: 1.5rem. Não esqueça a unidade, já que um número solto significa outra coisa na maioria das propriedades.
De onde vêm essas unidades
O pixel do CSS não é o pixel da sua tela
Quando as telas deixaram de ter uma densidade previsível, uma página medida em pixels reais passou a ser uma página que encolhia à medida que as telas ficavam mais nítidas. Então o pixel do CSS foi redefinido como um comprimento de referência: cerca de 1/96 de polegada visto a uma distância confortável de leitura. Tudo o mais nesta página se constrói sobre isso. O em é mais antigo que a web: nos tipos de metal era a largura de um bloco fundido, com o nome da letra M maiúscula, e no CSS significa o tamanho de fonte em vigor, e é por isso que muda conforme você aninha elementos. O rem foi acrescentado para escapar exatamente disso: é o em do elemento raiz e nunca se acumula.
Por que o rem existe
Antes do rem, os desenvolvedores dimensionavam tudo em em ou porcentagens, e os elementos aninhados se multiplicavam: uma lista dentro de uma lista dentro de uma lista encolhia ou crescia a cada nível. O rem lhes deu uma referência fixa, a raiz, e eliminou o acúmulo. Se você quer comparar os dois, converta px em em e veja como o mesmo valor em pixels depende do elemento em que está.
Onde você encontra o rem na prática
Texto
O texto do corpo costuma ser 1 rem, os títulos de 1,25 a 3 rem, as letras miúdas de 0,75 a 0,875 rem. Escrevê-los em rem permite que um leitor amplie a página inteira mudando uma só configuração do navegador.
Espaçamento e layout
Margens, preenchimentos e vãos em rem mantêm o espaço em branco proporcional ao texto. Quando o texto cresce, o espaço em volta dele também cresce, e o layout continua equilibrado em vez de apertar letras maiores nas caixas antigas.
Media queries
Os pontos de quebra escritos em em ou rem respondem ao tamanho de texto do leitor, então um layout passa à forma estreita mais cedo para quem ampliou o texto. É um refinamento que vale conhecer, embora os pixels continuem comuns nos pontos de quebra.
O que deixar em pixels
Bordas finíssimas, sombras de caixa e ícones finos muitas vezes ficam melhores em tamanhos fixos de pixels, porque uma borda de 0.0625rem que cresce para 0.1rem com texto grande não ajuda ninguém. Use rem para o que deve escalar e pixels para o que não deve.
Armadilhas ao converter px em rem
Esquecer que a base nem sempre é 16
Se um projeto define html { font-size: 62.5% }, ou usa um tamanho de raiz fluido, o fator é outro. Confira a folha de estilos antes de confiar num número de qualquer conversor, inclusive este.
Converter o próprio tamanho da raiz
Se você define o tamanho da raiz em pixels, a configuração do navegador do leitor é sobrescrita e o benefício do rem se perde. Defina a raiz como porcentagem, ou deixe-a em paz, para que a preferência do usuário seja respeitada.
Usar rem dentro de um componente que define o próprio tamanho de fonte
O rem sempre se refere à raiz, e não ao componente. Um botão com tamanho de fonte de 14 px e preenchimento de 1rem tem um preenchimento que não acompanha o texto do próprio botão. Se você quer um espaçamento que acompanhe o texto do elemento, esse é o trabalho do em.
Misturar unidades sem um plano
Uma folha de estilos que usa px numa margem, rem na seguinte e em numa terceira é difícil de raciocinar. Escolha uma regra: rem para texto e espaçamento, pixels para bordas e sombras, e mantenha-a.
Perguntas que as pessoas fazem antes de converter
Quantos rem são 16 px?
Um, num navegador padrão. Dezesseis divididos pela base de dezesseis.
O rem é melhor que o px?
Para texto e espaçamento, é a melhor escolha na maioria dos projetos, porque respeita as configurações do leitor. Os pixels continuam certos para o que não deve escalar.
Por que o meu resultado difere de outro site?
Provavelmente uma base diferente. Confira o campo: algumas ferramentas presumem 10, outras 16, outras 14. Esta página mostra a base ao lado do resultado.
Preciso arredondar?
Não. Os navegadores aceitam decimais longos. Arredonde só por legibilidade.
O meu número é enviado?
Não. A aritmética roda no seu navegador e nada é enviado a lugar nenhum.
Como volto?
Com rem em px, que multiplica em vez de dividir.
Escolhendo bem ao converter px em rem
Decida uma base para o projeto e mantenha-a
Seja qual for a sua escolha, faça dela uma decisão e escreva-a na documentação do projeto. Uma equipe que discorda sobre a base produz componentes que não se encaixam.
Converta na fase de design, e não no último momento
Se você converte px em rem ao ler o mockup, constrói a escala no design e nota os valores estranhos cedo. Se faz isso no fim, descobre-os como uma pilha de números inconsistentes.
Considere também as unidades de viewport
Para títulos que devem preencher a tela, px em vw expressa um tamanho como uma fração do viewport. Ele escala de modo diferente do rem, e os dois muitas vezes se combinam.
Hábitos que facilitam converter px em rem
Guarde uma tabela de conversão na cabeça
Com uma base de 16, alguns pontos de apoio cobrem a maior parte do trabalho: 4 px são 0,25 rem, 8 px são 0,5, 12 px são 0,75, 16 px são 1, 24 px são 1,5 e 32 px são 2. Quando um mockup lhe dá um valor entre eles, você pode estimar antes de converter px em rem na página, e usar o conversor só para confirmar. Depois de algumas semanas você saberá a tabela sem olhar.
Deixe o sistema de design fazer o trabalho
Se a sua equipe mantém tokens de design, como spacing-2 ou font-lg, guarde-os em rem uma só vez e deixe todo mundo se referir aos nomes. Assim ninguém precisa converter px em rem de novo, e uma mudança na escala é feita num só lugar. O conversor é a ferramenta que você usa ao escrever os tokens, e não ao usá-los.
Escreva o valor em pixels num comentário
Uma linha como padding: 1.25rem; /* 20px */ custa alguns caracteres e poupa ao próximo desenvolvedor pegar uma calculadora. Também registra que base você presumiu, o que ajuda se o tamanho da raiz mudar depois.
Teste com uma configuração do navegador alterada
A prova de que uma página foi construída em rem é que ela sobrevive a um tamanho de texto padrão maior. Mude a configuração no seu navegador, recarregue e olhe. Os componentes que quebram são aqueles em que algo ficou em pixels ou em que uma altura fixa cortou o texto.
Conversores relacionados
A mesma família de ferramentas cobre as conversões vizinhas. Para voltar aos pixels, use rem em px. Para tamanhos relativos ao elemento, há px em em e em em px, e para tamanhos relativos à tela, px em vw e vw em px. Se o seu trabalho inclui cores além de tamanhos, HEX em RGB, RGB em HEX e HEX em HSL cuidam das notações da folha de estilos.
Um exemplo resolvido
Digamos que um mockup dê o título de um cartão com 28 px, um preenchimento de cartão de 20 px e um vão de 12 px entre cartões, e o seu projeto use a base padrão de 16 px. Você digita 28 e lê 1,75 rem, digita 20 e lê 1,25 rem, digita 12 e lê 0,75 rem. Na folha de estilos você escreve font-size: 1.75rem, padding: 1.25rem e gap: 0.75rem. Um visitante que aumenta o tamanho de texto do navegador para 20 px vê o mesmo cartão, escalado em um quarto: o título tem 35 px, o preenchimento 25 px e o vão 15 px, tudo em proporção. Se você tivesse escrito pixels, o título teria ficado em 28 e o cartão teria parecido errado.
Uma lista de conferência rápida
Antes de converter
Descubra a base que o seu CSS usa. Decida quais tamanhos devem escalar e quais não.
Durante a conversão
Digite o valor em pixels, confira a base mostrada ao lado do resultado e copie o número em rem com a unidade.
Depois de converter
Teste a página com um tamanho de texto padrão maior no navegador e procure caixas que não comportam mais o texto.
Erros comuns
Presumir que 1 rem sempre são 16 px
Só são quando ninguém mudou o tamanho da raiz, e alguns leitores mudaram. Escreva o layout de modo que funcione também em outros tamanhos.
Definir o tamanho da raiz em pixels
Isso sobrescreve a escolha do leitor. Use uma porcentagem, ou não defina.
Converter tudo
Nem todo tamanho deve escalar. Deixe bordas e sombras em pixels.
Seus números ficam no seu dispositivo
O cálculo acontece localmente. Seus valores são usados pelo seu próprio navegador e nada é enviado a lugar nenhum. Não há nada a apagar depois nem conta a criar. Esse é o jeito simples de converter px em rem.
Resumo
Para converter px em rem aqui, digite o tamanho em pixels e leia-o em rem na hora, usando a fórmula rem = px ÷ base. A base começa em 16 px, o padrão de um navegador, e você pode mudá-la para combinar com o seu CSS. A conversão mantém a proporção: um layout escrito em rem mantém a forma quando o tamanho de fonte da raiz muda. Não consegue saber as configurações do seu leitor, então o número só está certo para a base do campo. Os tamanhos comuns da tabela sob o conversor, de 8 px a 0,5 rem até 64 px a 4 rem, poupam repetir a aritmética. Nada é enviado.