Converta píxeis para em com qualquer tamanho do elemento pai
Com a predefinição do navegador, 14 píxeis são 0,875em e 18 píxeis são 1,125em. Escreva a medida da maqueta, ajuste o tamanho de letra do elemento pai e leve o resultado diretamente para a folha de estilos. 24 px, por exemplo, são 1,5em com base 16.
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].
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 três lugares onde se usa o em. 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 podem dar 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 diferentes medidas 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 |
Onde usar em e onde usar 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 testados[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 para Windows, de 2003 a 2019[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 falha no Outlook para Windows |
| 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 |
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 converter pixels em em?
Passar a maqueta a código
O design dá 24 píxeis de espaçamento e a folha de estilos deve receber 1,5em.Um modelo de correio
O rem falha no Outlook para Windows, 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
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: · 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.
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. Num cartão com texto de 14 px são cerca de 0,8571em, e com um pai de 20 px, 0,6em.
É 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.
Posso usar em num modelo de correio?
Sim, em todos os programas testados. A unidade rem fica nos 69,05 por cento de suporte e não funciona no Outlook para Windows, 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 indicam os tamanhos de texto e as medidas dos elementos em píxeis ou em pontos, e não na 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.