Pixels para Ems

Tabela de Conversão para CSS


Os valores de em na tabela assumem que a configuração padrão do navegador de tamanho de fonte a 16px não foi alterada. Assumem também que o <body> tem o tamanho da fonte definida para 1em ou 100%.

px font-size em equivalente * Arredondado para 3dp 1px em ems Notas
11 0.689 * 0.091
12 0.750 0.083
13 0.814 * 0.077
14 0.875 0.071
15 0.938 * 0.067
16 1.000 0.063 Tamanho padrão do navegador
17 1.064 * 0.059
18 1.125 0.056
19 1.188 * 0.053
20 1.250 0.050
21 1.313 * 0.048
22 1.375 0.046
23 1.438 * 0.044
24 1.500 0.042
25 1.563 * 0.040
26 1.625 0.039
27 1.688 * 0.037
28 1.750 0.036
29 1.813 * 0.035
30 1.875 0.033

Fórmula para calcular o em equivalente para qualquer valor de pixel necessário

1 ÷ tamanho de fonte do parent (px) × px desejado = em equivalente

Exemplo: 770px de largura, layout elástico centrado utilizando CSS e ems

Nota: Pressupondo que o tamanho de fonte padrão do navegador se mantém em 16px. Selector body{} definido para font-size:1em;. Usando a fórmula*: 1 ÷ 16 × 770 = 48.125em

CSS:

body{
font-size:1em;
text-align:center;
}

div{
width:48.125em;
margin;0 auto;
}

HTML:

<html>
<body>

<div>
…
</div>

</body>
</html>