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.
Converta píxeis para em com qualquer tamanho do elemento pai
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.
Loading tool editor...
PUBLICIDADE
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.
PUBLICIDADE
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.
PUBLICIDADE
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 |
PUBLICIDADE
Quando vai precisar desta conversão?
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
Explorar outros conversores de unidades
pt para pxrem para pxem para pxcm para pxmm para pxcm para polegadaspolegadas para cmmm para polegadaspolegadas para mmmilhas para kmkm para milhasmetros para péspés para metrospolegadas para péspés para polegadaslibras para onçasonças para librasml para onçasonças para mllitros para galõesgalões para litroskg para libraslibras para kgkg para gramasgramas para kgkg para stonestone para kgpolegadas para pxpés para pxpaicas para pxmetros para pxHEX para RGBRGB para CMYKbytes para KBKB para bytesKB para MBMB para KBMB para GBGB para MBKB para GBGB para KBGB para TBTB para GBKB para TBTB para KBUnix para dataDEC para BINDEC para HEXMbps para MB/s
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. 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.