Softonic

Conversor de REM para PX

Etapa 1 / 2
Resultados

Arquivos CSS escritos por equipes modernas usam rem para tipografia, espaçamento e layout, de modo que toda a interface do usuário possa escalar quando um usuário aumenta o tamanho da fonte do navegador. Traduzir esses valores de volta para pixels para uma revisão de design é um pequeno, mas constante, imposto. Digite um valor rem e o conversor mostra o resultado em pixels no tamanho de fonte raiz escolhido (padrão 16 px, conforme a especificação do W3C). Altere o tamanho da raiz para combinar com o seu projeto e o valor em pixels é atualizado na hora.

Como converter rem para px

  1. 1

    Defina o tamanho da fonte raiz

    O padrão é 16 px (o padrão do CSS). Variantes comuns: 14 px (legado do Bootstrap 3), 15 px (legado do Tailwind), truque de 62,5% (10 px, então 1rem = 10px).

  2. 2

    Digite o valor rem

    Digite o valor rem que deseja converter, por exemplo `1.5`. Só o número é necessário.

  3. 3

    Leia o resultado em pixels

    O equivalente em pixels aparece na hora. Com raiz de 16 px: `1.5rem = 24px`.

  4. 4

    Consulte a referência

    A tabela de referência rápida abaixo lista valores rem comuns e o equivalente em pixels com raiz de 16 px.

rem vs em: por que as pessoas erram isso

em é relativo ao tamanho da fonte do elemento pai. rem é relativo ao tamanho da fonte do elemento raiz. Aninhe três componentes baseados em em e o texto começa a se acumular de forma imprevisível; rem permanece estável.

  • html { font-size: 16px; } → 1rem = 16px em qualquer lugar do documento
  • div.card { font-size: 14px; } → dentro do cartão, 1em = 14px, mas 1rem = 16px

Use rem para layout macro (escalas de espaçamento, gutters de grid, rampa de tipografia). Use em quando você quiser que algo, geralmente um border-radius ou tamanho de ícone, escale com o texto local.

O truque de 62,5%

html { font-size: 62.5%; }  /* 10 px */

Com isso, 1rem = 10px, então 2.4rem = 24px. A matemática se torna trivial (“rem é deslocado decimalmente uma casa”). O custo: alguns usuários definem um tamanho de fonte de navegador não padrão, e 62,5% de sua escolha pode ser muito pequeno. Se você enviar isso, dê ao corpo um tamanho como 1.6rem para que a linha de base ainda caia em 16 px.

Referência rápida com raiz de 16 px

rem px Uso típico
0.75 12 Pequenas legendas, rótulos
0.875 14 Pequeno texto do corpo
1 16 Padrão do corpo
1.125 18 Corpo enfatizado, H4
1.25 20 H3
1.5 24 H2
2 32 H1, título principal
3 48 Tipografia de exibição
4 64 Números grandes de herói

Respeite as configurações de acessibilidade do usuário

Os usuários podem aumentar o tamanho da fonte do navegador para legibilidade. Um layout construído com rem escala; um fixado com px não. Para layouts onde você se importa com a consistência visual (botões, ícones, pequenos controles), fique com rem, mas reserve px para bordas finas (1 px) e traços de ícone onde 1 px realmente significa 1 pixel de dispositivo.

Fórmula

px = rem × tamanho-da-fonte-raiz
rem = px / tamanho-da-fonte-raiz

Na raiz padrão do W3C de 16 px, 1rem = 16px e a conversão é linear.

Perguntas frequentes

16 px. Todos os principais navegadores têm como padrão 16 px, a menos que o usuário substitua nas preferências ou uma folha de estilo defina html { font-size: ... } explicitamente.

Sim. 0.0625rem na raiz de 16 px é 1px. Valores rem fracionários são comuns em sistemas de grade de 8 pontos onde a rampa é 0.25rem, 0.5rem, 0.75rem, etc.

Tailwind, Bootstrap 4+, Material Design 3 e a maioria dos sistemas de design modernos são baseados em rem porque respeitam as preferências de tamanho de fonte do usuário. CSS mais antigo (pré-2015) e algumas ferramentas de design têm como padrão px porque precedem a adoção generalizada de rem.

Este conversor foca em rem. em é relativo ao tamanho da fonte do elemento pai, não à raiz, então ele precisa também do tamanho do pai além do valor. Use um conversor de em dedicado para esse caso.

Não. O conversor apenas faz a conta (rem × tamanho da fonte raiz) e não guarda nenhum histórico dos valores que você digita.

Ferramentas relacionadas

Gerador de Cartão CSS

Crie o CSS de um contêiner de cartão: fundo, borda, raio dos cantos, espaçamento interno e sombra suave, com pré-visualização imediata e código para copiar e colar.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Visualizador de Markdown

Escreva Markdown e veja a renderização HTML atualizar ao vivo. Sintaxe com estilo GitHub, incluindo tabelas, listas de tarefas, blocos de código cercados e autolinks.

Gerador de Configuração Nginx

Gere blocos de servidor Nginx com TLS, HTTP/2, gzip, cache de navegador e regras de proxy reverso a partir de um formulário simples.

Ferramenta disponível em outros idiomas