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

Por que você converte px em em

O em é a unidade relativa mais antiga do CSS e a que mais causa discussões. Você tem um tamanho em pixels de um arquivo de design, 20 px de preenchimento num botão, 14 px de espaço ao lado de um ícone, 36 px para um título, e quer em em, para que acompanhe o texto a que pertence. Quando você converte px em em, faz uma pergunta específica: que múltiplo do tamanho de fonte atual é este? A resposta depende de um número que a página não pode adivinhar, o tamanho de fonte em vigor onde o valor é usado, então o conversor põe esse número num campo e o usa às claras.

A razão para escrever tamanhos em em é que o que pertence ao texto deve crescer com o texto. O preenchimento dentro de um botão deve ser maior quando o rótulo do botão é maior. O vão entre um ícone e sua legenda deve se alargar quando a legenda se alarga. A margem inferior de um título deve continuar em proporção com o título. Em todos esses casos o valor em pixels está errado assim que o tamanho de fonte muda, e o valor em em está certo em qualquer tamanho. Esse é todo o argumento a favor do em, e é forte.

O cálculo acontece no seu navegador, e nada é enviado. Abaixo você encontra a fórmula, a razão de o em exigir mais cuidado que o rem, a armadilha do aninhamento que produz tamanhos surpreendentes, os lugares em que o em é a unidade certa e um método para escolher entre em e rem numa folha de estilos real.

A fórmula e a base

em é igual a px dividido pelo tamanho de fonte

A fórmula é uma divisão: em = px ÷ base. Com uma base de 16 px, um valor de 24 px vira 1,5 em, 8 px viram 0,5 em e 20 px viram 1,25 em. A página mostra a base ao lado do resultado, como em 24 px = 1,5 em (16 px), para que você veja o que foi presumido. A aritmética é a mesma do rem. O significado é diferente.

O que é a base

Para o rem, a base é o tamanho de fonte do elemento raiz. Para o em, é o tamanho de fonte do elemento onde o valor é usado ou, para a própria propriedade font-size, o do pai. É por isso que o em não tem uma única resposta: o mesmo valor de folha de estilos significa tamanhos em pixels diferentes em lugares diferentes. Se você está convertendo um preenchimento para um botão cujo texto tem 14 px, digite 14 como base. Se está convertendo uma margem para um título de 32 px, digite 32.

O padrão quando você não sabe

Se você só quer um número aproximado, deixe a base em 16, o tamanho do texto comum num navegador que ninguém alterou. O resultado está certo para um bloco de texto normal e dá uma noção da proporção mesmo que o elemento tenha outro tamanho.

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

Mantém a proporção com o texto

O resultado é a proporção em relação ao tamanho de fonte em vigor onde o valor é usado. Escrito em em, um espaço cresce e encolhe com o texto ao lado, e é exatamente assim que o espaçamento em torno das palavras deve se comportar.

Não consegue dar um número para a página inteira

Este é o ponto que pede cuidado. O em é relativo ao tamanho de fonte do próprio elemento, ou, para o font-size, ao do pai, e não ao da raiz. Então não há uma resposta única para uma página: 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 da página está certo para a base do campo e para mais nada. Se você quer um número que valha em toda parte, é para isso que serve o rem. Para comparar, converta px em rem e veja como o mesmo valor em pixels se comporta.

Arredondamento

A divisão por 16 dá valores limpos para muitos tamanhos e dízimas para outros. Um valor como 0,8125 em serve numa folha de estilos, mas você pode preferir arredondar para 0,8 ou 0,85 se o tamanho exato não importar. Mantenha o número completo onde a precisão conta.

A armadilha do aninhamento

Como o em se acumula

Suponha que uma lista tenha font-size: 0.875em e seus itens tenham font-size: 0.875em também. A lista tem 87,5% do pai. Cada item tem 87,5% da lista, que são cerca de 76,6% do pai. Uma lista aninhada dentro de um item encolhe de novo, para cerca de 67%. Depois de três níveis o texto está muito pequeno, e ninguém escreveu isso de propósito. É isso que se quer dizer ao afirmar que o em se acumula.

Por que importa quando você converte px em em

Se você converte um valor em pixels para em no font-size, a base que deve usar é o tamanho de fonte do pai, e não o do próprio elemento. Muitos erros vêm de usar a errada. Para outras propriedades, como padding e margin, a base é o tamanho de fonte do próprio elemento. A regra é fácil de dizer e fácil de esquecer: o font-size olha para cima, todo o resto olha para si.

Como evitar surpresas

Use em para o espaçamento que acompanha o texto e rem para os tamanhos de fonte. Assim os tamanhos de fonte nunca se acumulam, porque se referem à raiz, e o espaçamento ainda acompanha o próprio texto. É a combinação a que a maioria das folhas de estilos modernas chega.

Tamanhos comuns

A tabela no pé da página

Sob o conversor há uma tabela de tamanhos comuns na base que você definiu: 8 px são 0,5 em, 10 px são 0,625, 12 px são 0,75, 14 px são 0,875, 16 px são 1, 18 px são 1,125, 20 px são 1,25, 24 px são 1,5, 32 px são 2, 48 px são 3 e 64 px são 4. Numa base de 16, são os mesmos números do rem, e é por isso que as pessoas confundem os dois. A diferença está no que o 16 representa.

Mudando a base para combinar com o elemento

Se você define a base como 14 para um botão pequeno, a tabela muda: 14 px agora são 1 em, 7 px são 0,5 em e 21 px são 1,5 em. Experimente, e verá como um preenchimento de 1,5 em tem um tamanho em pixels diferente num botão de 14 px e num de 18 px, e por que isso é útil.

Como converter px em em aqui

Digite o valor em pixels

Digite o tamanho em pixels no primeiro campo. Decimais são aceitos.

Defina o tamanho de fonte a que o em se refere

Digite o tamanho de fonte do elemento, ou do pai dele se você está convertendo um font-size. Se tiver dúvida, deixe 16 e trate o resultado como uma aproximação.

Copie o valor em em

Use o número no seu CSS com a unidade, como em padding: 1.25em. Um número sem unidade não é válido para a maioria das propriedades.

De onde vêm essas unidades

O em nos tipos de metal

O em é mais antigo que a web. Nos tipos de metal era a largura de um bloco fundido, com o nome da letra M maiúscula, e era a unidade natural do espaço horizontal na linha impressa. Os tipógrafos ainda falam de travessões em e espaços em. No CSS a ideia sobrevive de forma mais solta: um em é o tamanho da fonte atual.

O pixel e o rem

O pixel do CSS é um comprimento de referência de cerca de 1/96 de polegada visto a uma distância confortável de leitura, e não um ponto na sua tela. O rem foi acrescentado para dar aos desenvolvedores uma unidade relativa que nunca se acumula: é o em do elemento raiz. Entre eles, pixel, em e rem cobrem as três necessidades: tamanho fixo, tamanho relativo ao texto e tamanho relativo à página.

Onde o em é a escolha certa

Preenchimento dentro de botões e campos de formulário

Um botão com padding: 0.5em 1em fica igual em proporção em qualquer tamanho de texto. Aumente o rótulo e o botão inteiro cresce junto, que é o que se quer de um componente que pode ser usado numa barra de ferramentas e num banner de destaque.

Espaçamento ao lado de ícones

Um ícone seguido de uma legenda precisa de um vão que escale com a legenda. Uma margem de 0,4em faz isso; uma margem de 6px não.

Margens em torno de títulos e parágrafos

O ritmo vertical num documento é mais fácil de manter quando o espaçamento entre parágrafos está em em, já que acompanha o tamanho do parágrafo. A margem de um título em em continua em proporção quando o título muda de tamanho em pontos de quebra diferentes.

Media queries

Os pontos de quebra escritos em em respondem ao tamanho de texto do leitor, então o layout passa à forma estreita mais cedo para quem ampliou o texto. Nas media queries, o em se refere ao padrão do navegador e não a algum elemento, então não se acumula.

Armadilhas ao converter px em em

Usar a base errada

O erro mais comum. Para o font-size, use o tamanho do pai; para todo o resto, o do próprio elemento. Confira que propriedade você está convertendo antes de digitar a base.

Esquecer que o pai também pode estar em em

Se o tamanho de fonte do pai está ele mesmo em em, você precisa seguir a cadeia para cima para saber o tamanho verdadeiro. Quando uma folha de estilos fica complicada, passe os tamanhos de fonte para rem e guarde o em para o espaçamento.

Esperar um número para um componente inteiro

Um componente que contém textos de tamanhos diferentes não tem um único valor em em para as suas partes. Converta cada parte contra a própria base.

Misturar em e rem na mesma propriedade

Um preenchimento de 1rem ao lado de uma margem de 1em é legal e muitas vezes confuso. Escolha uma regra, como rem para tamanhos de fonte e em para espaçamento, e mantenha-a.

Perguntas que as pessoas fazem antes de converter

Quantos em são 16 px?

Um, se o tamanho de fonte em vigor é 16 px. Se o tamanho de fonte do elemento é 20 px, então 16 px são 0,8 em.

O em é melhor que o rem?

Nenhum é melhor. O rem é melhor para tamanhos de fonte e para o layout global. O em é melhor para o espaçamento que deve acompanhar o próprio texto.

Por que o meu preenchimento está maior que o esperado?

Porque é relativo ao tamanho de fonte do elemento, que pode ser maior do que você supôs. Confira o tamanho de fonte calculado nas ferramentas de desenvolvedor do navegador.

Posso usar decimais?

Sim. Valores como 0,625em e 1,333em são normais.

O meu número é enviado?

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

Como volto?

Com em em px, que multiplica em vez de dividir.

Escolhendo bem ao converter px em em

Decida a que o valor pertence

Se pertence ao texto, o em é o certo. Se pertence à página, como a largura de uma coluna ou o vão entre seções, o rem ou uma unidade de viewport é mais adequado. Px em vw expressa um tamanho como uma fração da largura da tela.

Escreva a intenção num comentário

Uma linha como padding: 0.75em 1.25em; /* 12px 20px at 16px */ torna o raciocínio visível. Quando o tamanho de fonte mudar depois, você saberá o que os números pretendiam ser.

Mantenha o tamanho de fonte do componente num só lugar

Defina o tamanho de fonte no elemento raiz do componente e deixe tudo dentro se referir a ele. Assim os valores em em lá dentro significam a mesma coisa em todo o componente, e você pode converter px em em contra uma única base.

Bons hábitos ao converter px em em

Converta px em em um componente por vez

Não tente converter px em em para uma folha de estilos inteira de uma vez. Pegue um único componente, como um cartão ou um botão, decida o tamanho de fonte dele e converta cada um dos seus valores de espaçamento contra esse tamanho. Quando o componente estiver pronto, teste-o em dois ou três tamanhos de texto. Depois passe ao seguinte.

Use uma calculadora para os valores estranhos, não para os redondos

Valores como 8, 16 e 24 pixels convertem em números de em arrumados numa base de 16. Valores estranhos como 22 ou 13 dão decimais longos. Ao converter px em em nesses casos, decida se o design realmente precisa do número exato ou se o valor de em redondo mais próximo serviria igualmente bem. Os designers muitas vezes aceitam arredondar, e uma folha de estilos arrumada é mais fácil de manter.

Guarde um registro da base

Um breve comentário ao lado de cada valor em em, dizendo qual era a base, ajuda a próxima pessoa. Se alguém mudar depois o tamanho de fonte do componente, saberá que o espaçamento o acompanha por projeto e não por acaso. Escrever isso uma vez vale o tempo que leva.

Compare com o equivalente em rem

Se você não tem certeza de que em ou rem serve a um valor, converta px em em e em rem e pergunte o que deve acontecer quando o tamanho do texto mudar. Se o valor deve acompanhar o texto do próprio elemento, fique com o em. Se deve acompanhar a página, fique com o rem.

Conversores relacionados

A mesma família de ferramentas cobre as conversões vizinhas. Para voltar aos pixels, use em em px. 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 HEX em HSL cuidam das notações.

Um exemplo resolvido

Digamos que o rótulo de um botão tenha 14 px e o design dê ao botão 10 px de preenchimento vertical e 20 px de preenchimento horizontal. Você digita 14 como base, 10 e lê 0,714 em, digita 20 e lê 1,429 em. Na folha de estilos você escreve padding: 0.714em 1.429em. Quando o mesmo botão é usado num destaque com um rótulo de 18 px, o preenchimento passa a 12,9 px e 25,7 px, em proporção. Se você tivesse escrito 10px e 20px, o botão teria ficado magro em volta do texto maior.

Uma lista de conferência rápida

Antes de converter

Decida a que propriedade o valor pertence e descubra o tamanho de fonte ao qual ele deve ser relativo.

Durante a conversão

Digite o valor em pixels e a base certa e copie o número em em com a unidade.

Depois de converter

Mude o tamanho de fonte do componente no navegador e confira se o espaçamento acompanha. Procure valores em em aninhados que se acumulam.

Erros comuns

Usar o tamanho da raiz como base para o preenchimento

Isso é trabalho do rem. O em se refere ao tamanho de fonte do próprio elemento.

Usar em para todos os tamanhos de fonte

Os tamanhos de fonte em em aninhados se acumulam e surpreendem. Use rem para tamanhos de fonte.

Arredondar para um número visualmente arrumado mas errado

1,43 não é o mesmo que 1,5 quando multiplicado por uma fonte grande. Mantenha dígitos suficientes.

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

Resumo

Para converter px em em aqui, digite o tamanho em pixels e o tamanho de fonte ao qual ele é relativo e leia o resultado na hora, usando a fórmula em = px ÷ base. A conversão mantém a proporção em relação ao tamanho de fonte em vigor onde o valor é usado. Não consegue dar uma resposta única para uma página: o em é relativo ao tamanho de fonte do próprio elemento, ou ao do pai no 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 toda parte, use rem. Nada é enviado.