px Dev

Conversor PX ↔ REM / EM

Converta pixels para REM e EM e vice-versa com base configurável. Tabela de referência com os tamanhos mais usados em CSS. Essencial para web.

Tamanho base (root font-size): px

Pixels (px)

REM

EM (assumindo pai = raiz)

Tabela de referência (base 16px)

px	rem	pt (aprox.)

REM vs EM vs PX

px: tamanho absoluto, não escala com preferências do usuário.

rem: relativo ao elemento raiz (html). Escalável. Recomendado para tipografia acessível.

em: relativo ao elemento pai. Útil para padding e margin proporcionais ao texto local.

Converta px para rem e em

Unidades relativas como rem e em deixam o layout mais acessível e fácil de escalar, e por isso são o caminho do CSS moderno. O problema é que a maioria de nós ainda raciocina em pixels. Este conversor cobre essa distância: você digita o valor em px e recebe o equivalente em rem e em, ou faz o caminho contrário.

Como a conversão depende do tamanho de fonte base, que costuma ser 16px, deixamos essa base configurável para que o número bata com o que está no seu projeto. Há também uma tabela de referência com os tamanhos mais comuns, boa para consulta rápida enquanto você monta a folha de estilos.

O cálculo todo acontece no navegador. Serve bem a quem desenvolve web e quer migrar para unidades relativas sem refazer divisão de cabeça a cada medida.

Perguntas frequentes

Por que rem e em mostram sempre o mesmo número aqui?

Porque o conversor parte do princípio de que o elemento pai tem o mesmo tamanho de fonte da base informada. Na página real, rem sempre aponta para a raiz, enquanto em aponta para o pai imediato e se acumula: dentro de um bloco com 0,5em, um filho com 0,5em termina em um quarto do tamanho da raiz. Para casos aninhados, coloque o tamanho do pai no campo de base.

Devo trocar a base de 16px por 10px, como muita gente recomenda?

A base de 16px é o que praticamente todo navegador entrega por padrão. O truque que faz 1rem valer 10px funciona quando você escreve 62,5% no elemento raiz, porque a porcentagem continua acompanhando o tamanho que o leitor escolheu nas preferências. Fixar 10px em pixel é o que anula esse ajuste e prejudica quem aumenta a fonte. Se adotar 62,5%, digite 10 no campo de base.

A coluna pt da tabela serve para impressão?

Ela usa a relação fixa do CSS, na qual 1px equivale a 0,75pt, já que a especificação define 96px e 72pt por polegada. Isso ajuda a aproximar tamanhos vindos de editor de texto ou de arquivo de design. Só que a conta ignora a base configurada e o zoom da tela, então trate a coluna como referência, não como medida física no papel.

Ferramentas Relacionadas

📐

Calculadora de Clamp CSS

Gere valores CSS clamp() para tipografia e espaçamentos fluidos. Informe os tamanhos mínimo/máximo e as larguras de viewport — o resultado é o clamp() pronto para colar no CSS.

📐

Conversor de Unidades CSS

Converta entre px, em, rem, %, pt, vh, vw para valores comuns de design — base 16 px configurável. Tudo no navegador.

⏳

Gerador de Loader CSS

Crie spinners e loaders em CSS puro com 8 estilos (anel, pontos, pulso, barras, etc.). Ajuste cor, tamanho e velocidade. Sem libs, sem GIFs. Tudo no navegador.

Conversor de Case

Converta texto entre camelCase, PascalCase, snake_case, SCREAMING_SNAKE_CASE, kebab-case, dot.case, Title Case e outros formatos com um clique. Ideal para renomear variáveis e campos de API.

📐

Escala Tipográfica

Gera uma escala tipográfica harmônica baseada em razão (1.125, 1.25, 1.333, 1.5, 1.618). Saída em rem, px e CSS clamp.

🎬

prefers-reduced-motion CSS

Gera snippet CSS @media (prefers-reduced-motion: reduce) para desativar animações.