Converter em em px Em ↔ Pixels Grátis Online Seguro

Por que você converte em em px

Uma folha de estilos diz margin-bottom: 0.75em em um título, padding: 0.4em 0.9em em um botão e line-height de 1.3em em um bloco de texto. São valores bons e flexíveis, e quase impossíveis de visualizar. Quantos pixels tem essa margem? O preenchimento do botão corresponde aos 6 px e 14 px do arquivo de design? Para descobrir, você converte em em px: multiplica pelo tamanho de fonte a que o em se refere e lê a resposta na unidade que as ferramentas de design usam. É uma pergunta que os desenvolvedores fazem quando revisam código, conferem uma versão com o mockup, depuram um problema de espaçamento ou entregam um componente pronto a alguém que pensa em pixels.

O em é a unidade mais traiçoeira do CSS para converter, porque não tem valor fixo. Um em é o tamanho de fonte em vigor onde o valor é usado ou, para a própria propriedade font-size, o do elemento pai. Assim, 1,5 em pode ser 24 px em um lugar e 36 px em outro, na mesma folha de estilos, pela mesma regra. Por isso o conversor não adivinha. Ele pede o tamanho de fonte a que o em se refere, mostra-o ao lado da resposta e calcula com ele. Se você não souber o tamanho, as seções abaixo explicam como encontrá-lo no navegador.

O cálculo acontece no seu navegador e nada é enviado. Abaixo você encontra a fórmula, como achar a base certa, o que a conversão mantém e o que não consegue manter, como os valores em em aninhados se multiplicam, quando os desenvolvedores precisam converter em em px e alguns hábitos que mantêm compreensível uma folha de estilos baseada em em.

A fórmula e a base

px é igual a em multiplicado pelo tamanho da fonte

A fórmula é uma única multiplicação: px = em × base. Com uma base de 16 px, 1,5 em viram 24 px, 0,75 em viram 12 px e 2 em viram 32 px. A página imprime a base ao lado do resultado, então uma linha como 1,5 em = 24 px (16 px) diz exatamente o que foi suposto. Se o tamanho de fonte do elemento é 20 px, digite 20, e 1,5 em viram 30 px.

Encontrando a base no navegador

Abra as ferramentas do desenvolvedor, selecione o elemento e olhe o tamanho de fonte calculado. Esse é o número a digitar no campo da base para qualquer propriedade que não seja font-size. Para o próprio font-size, selecione o elemento pai e leia o tamanho calculado dele. Leva alguns segundos e elimina a adivinhação por completo.

Quando você não pode ver a página

Se você está lendo código sem a página, siga a cadeia de tamanhos de fonte para cima a partir do elemento: o próprio font-size, se tiver um, senão o do pai, e assim até a raiz, que é 16 px a menos que a folha de estilos ou o leitor tenha mudado isso. Onde um tamanho vem em em, multiplique ao longo da cadeia. É tedioso, e é por isso que a maioria das equipes se fixa no rem para os tamanhos de fonte.

O que a conversão mantém e o que não consegue

Mantém a proporção em relação ao texto

O resultado é o tamanho em pixels que o em representa na base que você digitou. Escrito em em, um espaço ou um tamanho acompanha o texto a que pertence, e a conversão mostra quanto isso dá para um tamanho de texto em particular.

Não consegue dar uma resposta única para a página

Este é o ponto que pede cuidado: o em é relativo ao tamanho de fonte do próprio elemento ou, no caso do font-size, do pai, e não da raiz. Assim os mesmos 1,5 em são 24 px dentro de um elemento de 16 px e 36 px dentro de um de 24 px, e em dentro de em se multiplica. O número na página está certo para a base no campo e para mais nada. Se você quer um número que valha em todo lugar, é para isso que serve o rem. Para comparar os dois, converta rem em px e veja como uma unidade relativa à raiz permanece fixa.

Arredondamento

Multiplicar por uma base inteira dá resultados exatos para a maioria dos valores. Se a base é decimal, por exemplo 13,5 px, um valor como 1,2 em dá 16,2 px. Os navegadores lidam com pixels fracionários, mas quando você precisa de pixels inteiros, para uma borda fina ou um ícone em uma grade, arredonde de propósito e confira como fica.

Como os valores em em aninhados se multiplicam

Uma lista dentro de uma lista

Pegue uma página cujo texto do corpo é 16 px. Uma lista tem font-size: 0.875em, que são 14 px. Os itens dentro dela também têm font-size: 0.875em, que são 14 × 0,875 = 12,25 px. Uma lista dentro de um item faz isso de novo: 10,7 px. Em três níveis de profundidade o texto fica minúsculo, e ninguém decidiu que devia ser assim. Quando você converte em em px para um componente e a resposta parece pequena demais, o aninhamento é a primeira coisa a conferir.

Subindo pela cadeia

Para saber o tamanho real em pixels de um em aninhado, multiplique a base por cada valor no caminho de descida: 16 × 0,875 × 0,875 = 12,25. O conversor faz um passo por vez. Para uma cadeia, converta o primeiro valor, use a resposta como base do segundo e continue. É a mesma aritmética que o navegador executa.

Como impedir que se acumule

Use rem para os tamanhos de fonte, de modo que cada tamanho se refira à raiz, e deixe o em para o espaçamento, de modo que preenchimentos e margens acompanhem o texto do próprio elemento. Nessa combinação nada se acumula, e os valores em em que você converte são sempre relativos a um tamanho de fonte que dá para ler de imediato.

Valores comuns

A tabela no pé da página

A página inclui uma tabela com os valores em pixels a que correspondem os números comuns em em, na base que você definiu: 0,5 em são 8 px, 0,625 são 10, 0,75 são 12, 0,875 são 14, 1 são 16, 1,125 são 18, 1,25 são 20, 1,5 são 24, 2 são 32, 3 são 48 e 4 são 64. Na base padrão, são os mesmos números do rem. Mude a base e a tabela muda junto, o que é um bom jeito de ver o que o em realmente faz.

Experimente duas bases lado a lado

Digite 1,5 com base 14, depois com base 20. Você obtém 21 e 30 pixels. Essa é toda a diferença entre em e rem em um só experimento: o mesmo número, dois elementos, dois tamanhos.

Como converter em em px aqui

Digite o valor em em

Informe o tamanho em em no primeiro campo. Decimais são aceitos, então 0,714 funciona tão bem quanto 1.

Defina o tamanho de fonte a que o em se refere

Digite o tamanho de fonte do elemento, ou do pai dele se a propriedade for font-size. Se você não tem certeza, deixe 16 e trate o resultado como uma aproximação.

Leia o valor em pixels

A resposta aparece na hora, com a base mostrada ao lado. Copie-a para as suas anotações ou compare-a com o arquivo de design.

De onde vêm essas unidades

O em

O em é mais antigo que a web. Na tipografia de metal era a largura de um bloco fundido, com o nome tirado do M maiúsculo, e os tipógrafos ainda falam em travessões em e espaços em. No CSS ele significa o tamanho de fonte em vigor, e é por isso que muda conforme você aninha elementos.

O pixel e o rem

Quando os monitores 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. Por isso o pixel CSS foi redefinido como um comprimento de referência: cerca de 1/96 de polegada visto a uma distância de leitura confortável. O rem foi acrescentado para escapar do acúmulo do em: é o em do elemento raiz e nunca se multiplica. Se você trabalha com os dois, converta px em em para ir no outro sentido.

Quando os desenvolvedores convertem em em px

Conferindo uma versão com o arquivo de design

Um designer entrega um arquivo em pixels, e o código está em em. Para conferir se a página corresponde, você converte em em px usando o tamanho de fonte de cada componente. Um botão com um rótulo de 14 px e preenchimento de 0.714em 1.429em deve resultar em 10 px e 20 px, e se o design diz 12 e 24, um dos dois está errado.

Depurando espaçamento

Quando um vão parece grande ou pequeno demais, a causa costuma ser um valor em em que se refere a uma fonte maior ou menor do que você esperava. Convertê-lo com o tamanho de fonte calculado do elemento diz de imediato se o problema é a aritmética.

Lendo código desconhecido

As folhas de estilo herdadas estão cheias de valores em em cujos tamanhos em pixels você precisa reconstruir. Converter um punhado dos principais, com as bases certas, dá a você um mapa do design.

Escrevendo documentação e testes

Quem testa uma página descreve o que vê em pixels. Um desenvolvedor que diz que o preenchimento é 0,9em significa pouco para um testador; 12,6 px significa algo. Converter faz os dois lados se entenderem.

Armadilhas ao converter em em px

Usar a base errada

O erro mais comum. Para font-size, use o tamanho do pai; para todas as outras propriedades, o do próprio elemento. Confira a propriedade antes de digitar a base.

Esquecer um pai em em

Se o tamanho do pai está ele mesmo em em, você precisa seguir a cadeia. Use o valor calculado das ferramentas do desenvolvedor para encurtar o caminho.

Supor que a tela mostra os mesmos pixels

Um pixel CSS não é um pixel do dispositivo. Em uma tela de alta densidade, um pixel CSS pode ser dois ou três pixels do dispositivo. A conversão dá pixels CSS, a unidade que as ferramentas de design e a folha de estilos compartilham.

Tomar a resposta por uma promessa

Se o leitor aumenta o texto ou o componente é reutilizado com outro tamanho de fonte, os pixels mudam, como é esperado. O número convertido descreve uma situação, não todas.

Perguntas que as pessoas fazem antes de converter

Quantos pixels tem 1 em?

Tantos quanto o tamanho de fonte em vigor: 16 px para o texto comum do corpo no padrão, 24 px dentro de um elemento de 24 px.

Quantos pixels têm 2 em?

O dobro do tamanho de fonte em vigor. Em 16 px são 32 px.

Por que o meu navegador mostra algo diferente?

O tamanho de fonte real do elemento é diferente da base que você digitou. Leia o tamanho de fonte calculado nas ferramentas do desenvolvedor.

Em é a mesma coisa que rem?

Não. O em é relativo ao elemento, o rem à raiz.

O meu número é enviado?

Não. A aritmética roda no seu navegador e nada é enviado a lugar nenhum.

Como volto?

Com px em em, que divide em vez de multiplicar.

Hábitos que mantêm compreensível uma folha de estilos em em

Comente a base

Uma linha como padding: 0.75em 1.25em; /* 12px 20px at 16px */ custa alguns caracteres e poupa ao próximo leitor uma conversão. Ela registra a base que você supôs.

Defina o tamanho de fonte uma vez por componente

Defina o tamanho de fonte do componente no elemento raiz dele e refira-se a ele com em lá dentro. A base passa a ser a mesma para todo valor do componente, e você pode converter em em px com confiança.

Deixe o em para o espaçamento, o rem para o texto

É a divisão em que a maioria das folhas de estilo se fixa, e ela mantém a aritmética simples. Para tamanhos relativos à tela, px em vw e vw em px são as ferramentas.

Teste com outro tamanho de texto

Aumente o tamanho de texto padrão no navegador e olhe a página. Se o espaçamento acompanha o texto, os valores em em estão funcionando. Se não, algo ficou em pixels.

Um método para os casos difíceis

Trabalhe de fora para dentro

Quando um componente está bem fundo dentro de outros e seus valores em em parecem confusos, comece no elemento mais externo cujo tamanho você conhece e vá para dentro, convertendo um nível por vez. Anote cada tamanho em pixels à medida que avança. Depois de dois ou três níveis a cadeia inteira está no papel, e você vê exatamente de onde vem um número surpreendente. Leva um minuto e substitui uma hora de adivinhação.

Decida se vale simplificar

Se você precisa converter em em px por quatro níveis para entender um layout, a folha de estilos está lhe dizendo algo. Considere passar os tamanhos de fonte para rem, de modo que cada um se refira à raiz, e deixar só o espaçamento em em. A página ficará igual e será muito mais fácil de ler no ano que vem.

Conversores relacionados

A mesma família de ferramentas cobre as conversões vizinhas. Para voltar ao em, use px em em. Para tamanhos relativos à raiz, há px em rem e rem em px, e para tamanhos relativos à tela, px em vw e vw em px. Para as cores da mesma folha de estilos, HEX em RGB e RGB em HEX tratam das notações.

Um exemplo resolvido

Digamos que você esteja revisando um componente de botão. O rótulo é 14 px, o CSS diz padding: 0.714em 1.429em e um vão de 0.5em entre um ícone e o rótulo. Você digita 14 como base, depois 0,714 e lê 10 px, 1,429 e lê 20 px, 0,5 e lê 7 px. O arquivo de design diz 10, 20 e 8. Dois de três coincidem, então você olha o vão: 8 px em uma base de 14 seriam 0,571 em, e alguém arredondou para 0,5. Você levanta a questão na revisão, e a correção é um único número.

Uma lista de verificação curta

Antes de converter

Encontre o tamanho de fonte a que o em se refere, nas ferramentas do desenvolvedor ou na cadeia de tamanhos de fonte do código.

Durante a conversão

Digite o valor em em, defina a base e leia os pixels, observando a base mostrada ao lado do resultado.

Depois de converter

Compare com o arquivo de design. Se os números diferem, confira a base antes de suspeitar do código.

Erros comuns

Usar 16 sem conferir

Só está certo quando o tamanho de fonte do elemento é 16 px.

Confundir em com rem

Eles se parecem e se comportam de modo diferente. Use a página certa para cada um.

Esquecer que o em se acumula

Um valor dentro de um elemento aninhado é relativo a um tamanho que você pode não ter visto. Siga a cadeia.

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 e nenhuma conta a criar. Esse é o jeito simples de converter em em px.

Resumo

Para converter em em px aqui, digite o tamanho em em e o tamanho de fonte a que ele se refere, e leia o resultado em pixels na hora, usando a fórmula px = em × base. A conversão mantém a proporção em relação ao tamanho de fonte em vigor onde o valor é usado. Ela não consegue dar uma única resposta para uma página: o em é relativo ao próprio elemento, ou ao pai no caso do font-size, então os mesmos 1,5 em são 24 px dentro de um elemento de 16 px e 36 px dentro de um de 24 px, e em dentro de em se multiplica. Para um número que valha em todo lugar, use rem. Nada é enviado.