Conversor de PX para EM

Esta ferramenta converte valores em pixels (px) para unidades em no CSS. Diferente do rem, a unidade em é relativa ao font-size do próprio elemento pai (ou o mais próximo), então a conversão sempre depende do contexto onde você a coloca. Defina o tamanho da fonte base para corresponder ao seu elemento pai real, digite um valor em pixels e o equivalente em em aparece na hora, pronto para copiar na sua folha de estilos.

Com a base padrão de 16px, 16px = 1em. Altere o tamanho da fonte base nas configurações para combinar com o contexto do pai onde o valor será usado.

Quando Usar EM

Dimensionamento de Componentes

Crie botões, selos e cartões cujo preenchimento e espaçamento escalam juntos ao alterar o font-size do componente.

Espaçamento Autoescalável

Vincule margens e preenchimentos ao tamanho do texto local para que uma única mudança de font-size redimensione todo o bloco proporcionalmente.

Ritmo Tipográfico

Expresse altura de linha, espaçamento entre letras e recuo em relação à fonte atual para um ritmo vertical consistente.

Como Converter PX para EM

1

Defina o Tamanho da Fonte do Pai

Informe o font-size do elemento pai no campo Tamanho da Fonte Base (padrão 16px). É contra esse valor que cada resultado em em é calculado.

2

Digite um Valor em Pixels

Certifique-se de que a aba de unidade px esteja selecionada e digite o valor em pixels a converter. O equivalente em em é atualizado conforme você digita.

3

Leia o Resultado

O valor em em aparece na hora no painel de resultados, ao lado dos equivalentes em rem e px para comparação rápida. Ajuste as casas decimais conforme a precisão que precisar.

4

Copie para o seu CSS

Clique no botão de copiar ao lado do resultado em em e cole direto na sua folha de estilos, sem divisões manuais.

A fórmula: em = px ÷ font-size do pai. Por exemplo, 24px ÷ 16px = 1.5em.

EM vs REM: Saiba a Diferença

Ambas são unidades relativas, mas referenciam coisas diferentes. A distinção principal é o acúmulo: os valores em se acumulam ao aninhar elementos, enquanto o rem sempre aponta para a raiz.

EM

Relativo ao pai

Baseado no font-size do pai mais próximo
Acumula entre elementos aninhados
Ótimo para componentes autônomos
O contexto altera o valor calculado

REM

Relativo à raiz

Baseado no font-size da raiz (html)
Nunca acumula — sempre previsível
Ótimo para layout e tipografia globais
Mesmo valor em toda a página

Atenção ao acúmulo. Se um pai está em 1.25em e um filho também usa 1.25em, o filho é renderizado a 1.25 × 1.25 = ~1.56× o tamanho do avô. Sempre confirme contra qual contexto pai o seu valor em é resolvido.

Conversões Comuns de PX para EM

Valores de referência com um pai de 16px. Altere a base na ferramenta para recalcular em qualquer outro contexto.

Pixels	EM (pai 16px)	Uso típico
12px	`0.75em`	Legendas, letras miúdas
14px	`0.875em`	Texto secundário, rótulos
16px	`1em`	Texto base do corpo
20px	`1.25em`	Parágrafos de destaque, subtítulos
24px	`1.5em`	Títulos de seção
32px	`2em`	Títulos de página

Perguntas Frequentes

O que é exatamente o tamanho da fonte do pai nesta ferramenta?

É o font-size do elemento ao qual o seu valor em será relativo. O navegador calcula em contra o font-size do ancestral mais próximo, então preencha este campo com o valor que esse pai tem no seu CSS real. O padrão de 16px corresponde ao valor padrão típico do navegador para o body.

Como px é convertido para em?

Divida o valor em pixels pelo tamanho da fonte do pai: em = px ÷ pai. Com um pai de 16px, 24px vira 1.5em. A ferramenta faz a conta na hora e deixa você controlar quantas casas decimais aparecem.

Devo usar em ou rem?

Use em quando quiser que o dimensionamento escale com o componente local — por exemplo, um preenchimento que cresce com o texto do botão. Use rem para layout e tipografia globais, onde quer um valor previsível em toda a página. Muitos projetos combinam os dois.

Por que meus valores em parecem se multiplicar ao aninhar?

É o acúmulo. Como cada em é relativo ao seu pai, aninhar elementos que definem um font-size em em multiplica o efeito. Se você precisa de valores que permaneçam constantes não importa quão profundo seja o aninhamento, use rem.

A conversão é feita no meu navegador?

Sim. O cálculo roda inteiramente no cliente enquanto você digita. Nada é enviado a um servidor, então funciona na hora e offline depois que a página carrega.