Qual unidade de medida utilizar: Pixel, EM ou REM?

Postado em por Wolmir Cezer Garbin em Front-end | 187 Visualizações
Última atualização em:

Neste post vai explicar o que é cada unidade de medida css e o que é melhor utilizar entre Pixel, EM ou REM em seus projetos

Todo mundo tem algo para vender, AnuncieOn.com o melhor site de anúncios grátis de todo o Brasil. ABRIR

É comum usar Pixel para determinar tamanhos em páginas web. Mas, hoje, tem formas melhores? O que é melhor utilizar em seus projetos, Pixel, EM ou REM?

Antes de falar sobre o que usar é interessante entender o que é cada um.


Unidade em Pixel (px)

A únidade em Pixel ou simplesmente px é a mais antiga unidade de médida utilizada para css.

É possível utilizar pixels para definir a largura ou largura de elementos, espessura de borda, tamanho de texto e outras.

Pixels é uma médida fácil de usar, principalmente por não ser uma médida variável.

Se medir o tamanho de pixels em uma imagem, é muito fácil transcrever o mesmo tamanho em pixels para o css.


Veja um exemplo:

p {
    font-size: 14px;
}
.retangulo {
    width: 300px;
    height: 20px;
    border: 2px solid #555;
}

E no HTML:

<div class="retangulo">
    <p>Este é um texto dentro de um retângulo</p>
</div>

Unidade em EM

A unidade de medida EM, está relacionada a letra M, onde o tamanho base dessa unidade deriva da largura da letra M em maiúscula.

O tamanho EM é um tamanho variável, por isso é necessário fazer algumas contas para conseguir o tamanho necessário. Para entender nada melhor que partir para um exemplo.

Calculando EM

A fórmula para calcular valores EM é esta: target ÷ context = result.

Onde: target: é o valor do próprio elemento. context: é o contexto onde o elemento está inserido. result: é o valor em EM

Primeiro exemplo

Vamos pegar um exemplo prático. Veja o código HTML abaixo:

<body>
	<p>Um texto aqui</p>
</body>

No CSS temos:

body {
    font: 14px verdana, arial, tahoma, sans-serif;
}
p {
    font-size: 18px;
}

Aplicando a fórmula para manter o mesmo tamanho da fonte em EM, temos:

18px / 14px = 1.28em

Logo, podemos alterar o CSS do p para:

p {
    font-size: 1.28em;
}

Segundo exemplo

Agora que entendemos como funciona, vamos ver um segundo exemplo. Este vai permitir entender melhor a segunda unidade de medida. Considere o HTML:

<body>
	<div>
	<p>Um texto aqui</p>
</div>
</body>

No CSS temos:

body {
    font: 14px verdana, arial, tahoma, sans-serif;
}
div {
    font-size: 20px;
}
p {
    font-size: 18px;
}

Agora, vamos calcular para transformar o valor de p em EM. Aplicando a fórmula temos:

18px / 20px = 0.9em

Note que pegamos o valor de 20px pois sempre precisamos calcular com base no contexto, neste caso a div.

Mas para que ao mudar o valor de body, todos os elementos sejam alterados, precisamos mudar também o valor da div para EM. Aplicando a fórmula temos:

20px / 14px = 1.42em

Ficando assim:

body {
    font: 14px verdana, arial, tahoma, sans-serif;
}
div {
    font-size: 1.42em;
}
p {
    font-size: 0.9em;
}

Sendo assim, podemos alterar todos os tamanhos alterando apenas o tamanho da fonte no body para diferentes dispositivos.

Unidade em REM

Perceba que ficar calculando o valor para todos os elementos é bastante trabalhoso, ainda mais quando se tem várias tags e classes que contenham tamanhos, já que sempre precisamos calcular com base no contexto. Porém se o valor do contexto (context da fórmula) fosse sempre o mesmo, o trabalho seria bem menor.

Pensando neste aspecto, foi criado a unidade de medida REM. O R de REM se refere a ROOT, ou seja sempre do body. Assim do segundo exemplo ficariam assim, para p e para div respectivamente:

p : 18px / 14px = 1.28em div : 20px / 14px = 1.42em

E o CSS final:

body {
    font: 14px verdana, arial, tahoma, sans-serif;
}
div {
    font-size: 1.42em;
}
p {
    font-size: 1.28em;
}

Note que neste caso, o valor de div foi desconsiderado, para o cálculo foi usado apenas o valor de 14px que corresponde ao valor de body.

Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.


Wolmir Cezer Garbin

Wolmir Cezer Garbin


Sou formado em Desenvolvimento de Sistemas para Internet pela faculdade Mater Dei e Pós graduado em Desenvolvimento de sistemas em Java pela UTFPR. Trabalho a mais de 9 anos com desenvolvimento em Java, Android e Web utilizando as principais tecnologias do mercado. Atuo como professor na faculdade Mater Dei, programador na Garbo Software e criador do Receitas de Código.

Ver mais

FIQUE POR DENTRO

Receba as novidades todo mês em seu e-mail!

Apoiadores


Publique seu post no Receitas de Código

Agora você pode publicar seu post no Receitas de Código e compartilhar seu conhecimento com muitas pessoas!

Quero publicar