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

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

A conversão serve ao ler a folha de estilos de outra pessoa e querer saber quanto mede na realidade um espaçamento escrito como 0,75em. A resposta depende do sítio do documento onde esse espaçamento está, e é isso que distingue o em das restantes unidades relativas.

O pai não tem de medir 16 px. Dentro de um cartão ou de uma tabela costuma ter 14 px, num título de secção 20 px ou mais, por isso o campo aceita qualquer valor de 1 a 200.

Mais abaixo encontra uma tabela com 26 valores em três tamanhos do pai, a tabela da acumulação por aninhamento e a regra sobre quando recorrer ao em e quando ao rem. O caminho inverso cabe ao conversor de píxeis para em.

A fórmula tem uma só operação: píxeis = em × tamanho de letra do elemento pai. Esse tamanho é a font-size do elemento dentro do qual o seu se encontra, e se ninguém o alterou o navegador usa 16 px.

Exemplo com um espaçamento de 1,25em: com um pai de 16 px sai 1,25 × 16 = 20 píxeis. O mesmo valor dentro de um cartão composto a 14 px dá 17,5 píxeis, e num título de 20 px sobe para 25.

Uma regra merece atenção. Na propriedade font-size o em refere-se ao pai, mas em qualquer outra propriedade do mesmo elemento – em padding, margin ou width – refere-se ao tamanho de letra desse elemento [2]. Um elemento com font-size: 1.5em e padding: 1em com um pai de 16 px tem texto de 24 px e igualmente 24 px de preenchimento.

A unidade rem calcula-se da mesma forma, mas conta sempre a partir do elemento html e dá por isso o mesmo resultado em todo o documento: é a tarefa do conversor de rem para píxeis. Esses mesmos 16 píxeis valem 12 pontos tipográficos na composição, do que trata o conversor de pontos para píxeis.

O em mede-se face ao pai, e o pai tem por sua vez outro pai. Quando a mesma declaração font-size: 1.25em se repete em níveis sucessivos de aninhamento, cada nível multiplica o resultado do anterior. Ao fim de seis níveis, de 16 píxeis saem mais de 61.

Vê-se sobretudo em listas aninhadas, em menus com submenus e em fios de comentários, porque aí a estrutura cria os níveis sozinha. A tabela abaixo mostra cada passo junto ao cálculo, para que a origem de cada número fique à vista.

Daí a regra prática: o em encaixa onde um valor deva seguir o tamanho de texto do seu contexto mais próximo – o espaço à volta do texto de um botão, a indentação de uma lista, a largura de um campo de formulário. Para os tamanhos de texto de um sítio inteiro, o rem serve melhor, porque conta a partir da raiz do documento e dá sempre o mesmo valor por mais fundo que o elemento esteja.

Se procura precisamente essa previsibilidade, o cálculo cabe ao conversor de rem para píxeis, e uma medida da maqueta escrita em rem ao conversor de píxeis para rem.