Converta píxeis para em com qualquer tamanho do elemento pai

Última revisão do conteúdo: 2026-08-08

Com a predefinição do navegador, 24 píxeis são 1,5em e 14 píxeis são 0,875em. Escreva a medida da maqueta, ajuste o tamanho de letra do elemento pai e leve o resultado diretamente para a folha de estilos.

Pixels

Tamanho de fonte pai

para

Para que serve converter píxeis para em?

O píxel passa a em com uma única divisão: o número de píxeis a dividir pelo tamanho de letra do elemento pai. Com a predefinição do navegador esse pai tem 16 px, pelo que 24 píxeis dão 1,5em e 14 píxeis dão 0,875em. A unidade em refere-se ao tamanho de texto do elemento que a contém [1].

É o sentido mais frequente no dia a dia. A maqueta chega com medidas em píxeis, porque é assim que os programas de design contam, e a folha de estilos escreve-se em em para que a medida siga o tamanho de texto do seu lugar no layout.

O resultado traz quatro casas decimais, porque com um pai de 16 px um único píxel é exatamente 0,0625em e os tamanhos de texto produzem números como 0,875 ou 1,125.

Mais abaixo encontra uma tabela com 30 medidas em três tamanhos do pai, uma tabela de oito situações com a resposta sobre qual unidade escolher e dois lugares onde o em ganha ao rem. O caminho inverso cabe ao conversor de em para píxeis.

Como calcular píxeis para em à mão? Fórmula e exemplo

A fórmula tem uma só operação: em = píxeis ÷ tamanho de letra do elemento pai. É a inversa da multiplicação que transforma em em píxeis.

Exemplo com um espaçamento de 20 px: com um pai de 16 sai 20 ÷ 16 = 1,25em. A mesma medida dentro de um cartão composto a 14 px dá cerca de 1,4286em, e num título de 20 px dá exatamente 1em.

As medidas de uma maqueta dão muitas vezes frações: 18 píxeis são 1,125em, 22 píxeis são 1,375em e 30 píxeis são 1,875em. As três são exatas e assim se escrevem na folha de estilos.

Se uma medida deve dar o mesmo resultado em todo o documento independentemente do aninhamento, esse mesmo píxel escreve-o em rem o conversor de píxeis para rem. A diferença entre as duas unidades é esclarecida pela tabela na página do conversor de em para píxeis.

Quantos em valem as medidas mais comuns em píxeis?

Valor em píxeis	Pai 16 px (predefinido)	Pai 14 px (cartão)	Pai 20 px (título)
1 px	0,0625 em	0,0714 em	0,05 em
2 px	0,125 em	0,1429 em	0,1 em
4 px	0,25 em	0,2857 em	0,2 em
6 px	0,375 em	0,4286 em	0,3 em
8 px	0,5 em	0,5714 em	0,4 em
10 px	0,625 em	0,7143 em	0,5 em
12 px	0,75 em	0,8571 em	0,6 em
13 px	0,8125 em	0,9286 em	0,65 em
14 px	0,875 em	1 em	0,7 em
15 px	0,9375 em	1,0714 em	0,75 em
16 px	1 em	1,1429 em	0,8 em
18 px	1,125 em	1,2857 em	0,9 em
20 px	1,25 em	1,4286 em	1 em
21 px	1,3125 em	1,5 em	1,05 em
22 px	1,375 em	1,5714 em	1,1 em
24 px	1,5 em	1,7143 em	1,2 em
26 px	1,625 em	1,8571 em	1,3 em
28 px	1,75 em	2 em	1,4 em
30 px	1,875 em	2,1429 em	1,5 em
32 px	2 em	2,2857 em	1,6 em
36 px	2,25 em	2,5714 em	1,8 em
40 px	2,5 em	2,8571 em	2 em
44 px	2,75 em	3,1429 em	2,2 em
48 px	3 em	3,4286 em	2,4 em
56 px	3,5 em	4 em	2,8 em
64 px	4 em	4,5714 em	3,2 em
72 px	4,5 em	5,1429 em	3,6 em
80 px	5 em	5,7143 em	4 em
96 px	6 em	6,8571 em	4,8 em
128 px	8 em	9,1429 em	6,4 em

Os três tamanhos do pai cobrem três situações: 16 px é a predefinição do navegador, 14 px encontra-o em cartões e tabelas de interface, e 20 px num título de secção.

Onde é que o em ganha ao rem?

O primeiro lugar é a media query. Dentro de uma media query o navegador resolve as unidades relativas face ao valor inicial do tamanho de letra e não face ao que colocou no elemento html: a especificação diz expressamente que as unidades nunca assentam em resultados de declarações [2]. Um ponto de rutura escrito como 48em comporta-se assim de forma previsível mesmo num projeto que altera o tamanho de letra base.

O segundo lugar são os modelos de correio. A unidade em funciona em todos os programas do conjunto de testes [3], ao passo que o rem fica nos 69,05 por cento de suporte e não funciona em nenhuma versão testada do Outlook, nem no Windows nem no macOS [4]. Num modelo de correio decide, portanto, o programa de quem recebe.

O terceiro lugar é um componente que deva escalar por inteiro junto com o seu texto. Dê a um botão font-size: 1.125em e escreva o preenchimento e o arredondamento em em: uma única alteração do tamanho de texto faz crescer o botão inteiro em proporção.

Nos restantes casos – tamanhos de texto e escala de espaçamento de um sítio inteiro – pesa mais a previsibilidade do rem. A tabela abaixo detalha oito situações concretas, e a conversão nesse sentido cabe ao conversor de píxeis para rem.

Que unidade escolher em cada situação?

Situação	Unidade	Porquê
Tamanho de texto de títulos e parágrafos	rem	O resultado mantém-se igual em todo o documento, independentemente do aninhamento
Espaço à volta do texto de um botão	em	O preenchimento segue o texto do botão, uma alteração escala o elemento inteiro
Indentação de uma lista aninhada	em	A indentação deve crescer junto com o texto desse nível da lista
Ponto de rutura numa media query	em	O navegador conta do valor inicial do tamanho de letra, não do elemento html
Medidas num modelo de correio	em	Suportado em todos os programas testados, ao passo que o rem cai no Outlook
Espessura do contorno e sombra	px	Um filete deve continuar a ser um filete seja qual for o tamanho de texto
Escala de espaçamento no design system	rem	Uma alteração do tamanho de letra base desloca todo o layout de uma vez
Largura máxima de uma coluna de texto	em	O comprimento da linha mede-se em caracteres, a largura segue o texto da coluna

Oito situações que voltam em qualquer projeto de interface, com a unidade e o motivo da escolha.

O píxel e o em lado a lado

Característica	px	em
Ponto de referência	Nenhum, é um valor absoluto	Tamanho de letra do elemento pai
Valor predefinido	1 px = 1/96 de polegada	1em = 16 px
Com aninhamento	Sempre o mesmo valor	Acumula-se em cada nível
Reação às definições de quem lê	Mantém-se igual	Escala com elas
Onde é indicado	Maquetas, programas de design, ficheiros de imagem	Folhas de estilos, modelos de correio
Uso habitual	Contornos, sombras, filetes	Espaço à volta do texto, indentação, ponto de rutura

Quando vai precisar desta conversão?

Passar a maqueta a código
O design dá 24 píxeis de espaçamento e a folha de estilos deve receber 1,5em. É o percurso mais frequente no trabalho com interfaces.
Um modelo de correio
O rem cai no Outlook, pelo que as medidas relativas se escrevem em em. O conversor passa os píxeis da maqueta a valores prontos.
Um ponto de rutura do layout
Um 48em comporta-se de forma previsível, porque dentro de uma media query o navegador conta do tamanho de texto predefinido.
Um componente com um só parâmetro
O preenchimento e o arredondamento de um botão escritos em em crescem com o seu texto: uma declaração altera todo o tamanho.

Converter Pixels para outras unidades

px para pt px para rem px para cm px para mm px para polegadas px para pés px para paicas px para metros

Fontes

CSS Values and Units Module Level 4 — W3C
Media Queries Level 4 – Units — W3C
CSS unit: em — Can I email
CSS unit: rem — Can I email

Todos os valores das tabelas foram calculados a partir das definições das unidades e verificados aritmeticamente antes da publicação. Os dados históricos e os nomes das unidades locais assentam nas fontes indicadas acima.

Última revisão do conteúdo: 8 de agosto de 2026 · escrito e verificado pela equipa Arteon

Perguntas frequentes

Quantos em é 1 píxel?

Com o pai predefinido de 16 px um píxel é 0,0625em. Dentro de um cartão composto a 14 px esse mesmo píxel dá cerca de 0,0714em, e num título de 20 px dá 0,05em.

Como se convertem px para em?

Divida o número de píxeis pelo tamanho de letra do elemento pai. Com os 16 px predefinidos sai 24 ÷ 16 = 1,5em. O conversor acima faz essa divisão para qualquer tamanho do pai de 1 a 200 px.

Quantos em são 24 px?

1,5em com um pai de 16 px, cerca de 1,7143em com 14 px e 1,2em com 20 px. O valor 1,5em é um tamanho comum de título de secção.

Quantos em são 14 px?

0,875em com o pai predefinido de 16 px. Dentro de um cartão cujo texto já mede 14 px, a mesma medida é exatamente 1em.

Quantos em são 16 px?

1em com o pai predefinido de 16 px. Com um pai de 14 px sai cerca de 1,1429em, e com 20 px sai 0,8em.

Quantos em são 12 px?

0,75em com um pai de 16 px. É o menor tamanho de texto em uso corrente nas interfaces: abaixo disso a leitura torna-se incómoda.

É preciso arredondar o resultado em em?

Valores como 0,875 ou 1,125em escrevem-se tal e qual. O navegador calcula-os com exatidão, ao passo que arredondar para 0,88em deslocaria a medida uma fração de píxel. Ao dividir por 14 saem dízimas periódicas e aí bastam quatro casas.

Que unidade convém numa media query?

O em. Dentro de uma media query o navegador resolve as unidades relativas face ao valor inicial do tamanho de letra e não face ao valor colocado no elemento html, pelo que um ponto de rutura escrito como 48em se comporta de forma previsível mesmo num projeto que altera o tamanho de letra base.

O em funciona nos modelos de correio?

Sim, em todos os programas do conjunto de testes. A unidade rem fica nos 69,05 por cento de suporte e não funciona em nenhuma versão testada do Outlook, por isso as medidas relativas dos modelos de correio se escrevem em em.

É preciso passar toda a folha de estilos a em?

O espaço à volta do texto, as indentações de listas e as larguras de coluna sim, porque devem seguir o texto do seu contexto. Os tamanhos de texto e a escala de espaçamento de um sítio inteiro saem melhor em rem, e contornos, sombras e filetes ficam em píxeis.

Que diferença há entre em e rem na mesma medida?

A mesma declaração 1,5em dá um resultado diferente em cada nível de aninhamento, porque conta a partir do pai. A declaração 1,5rem dá 24 píxeis em todo o documento, porque conta a partir do elemento html. Para medidas que devam ser iguais em toda a parte, a escolha recai no rem.

Os programas de design mostram valores em em?

O Figma, o Photoshop e o Illustrator contam em píxeis ou em pontos e não têm a unidade em. Uma medida da maqueta converte-se à parte: com este conversor ou lendo o valor calculado no separador Computed das ferramentas de programador.

Ajude-nos a melhorar as nossas ferramentas

Tem uma ideia para uma função, encontrou um erro ou quer propor outra ferramenta? Escreva-nos, respondemos em menos de 24 horas.