39

Vejo que alguns sites ao definir o font-size utilizam a unidade em, em uma breve pesquisa eu li que é recomendado usar em em fontes por ser melhor do que a unidade px.

Afinal, qual seria a unidade certa ao definir o tamanho da fonte e por que?

3 Respostas 3

53
+50

Na verdade, não "é recomendado utilizar a unidade “em” ao invés de “px” para fontes". O fundamental é entender como funciona cada medida, para saber em que casos se aplica.

Tem casos em que o em é mais interessante, tem casos em que o px é mais interessante, e o mesmo para cada uma das medidas. Até o momento, aparentemente nenhuma delas é conflitante no sentido de deixar a outra obsoleta.

Se pensar em uma página com layou estático, uma vez definidas as medidas, elas só vão variar se houver alguma variação no cliente que for "renderizar" a página, mas sempre aparecerão da mesma forma no mesmo navegador, em princípio.

Se pensar numa página com layout dinâmico, que se adapta à largura da tela (superficialmente apelidado de "layout responsivo", termo que por sinal, não tem um significado objetivo), e/ou onde o tamanho das fontes pode ser especificado diferentemente dependendo das quebras especificadas com @media ou JS, o uso de cada uma delas pode ter um efeito mais radical.

Neste caso, se você quer os espaços e medidas sempre "fixos" em relação às imagens e aos device-pixels, provavelmente vai usar px. Se quiser que os espaços acompanhem a ampliação ou redução da fonte em cada medida, vai usar em ou rem, e talvez % em certos contextos.

Estas não são regras, são exemplificações. Para saber a adequada para seu caso, precisa entender as diferenças:

O "em":

O em reflete a medida da fonte corrente em pixels. É melhor do que px? Não, na verdade é um complemento.

O que vale mesmo é saber qual usar no caso concreto. Estas unidades de medidas existem para serem usadas conforme são necessarias.

Um exemplo de uso:

.exemplo {
   font-size: 20px;
   border-radius: .5em;
   padding-bottom: 2em;
}

Neste caso, a curva da borda terá 10px, e o padding-bottom 40px.

Vantagem? Neste caso, basta mudar o tamanho da fonte, que o resto dos elementos vai acompanhar proporcionalmente.

Um outro exemplo:

.exemplo {
   font-size: 20px;
   line-height: 1.5em;
}

Assim, teremos espaçamento 1,5 entre linhas.

Nas versões mais velhas do IE só conseguíamos ampliar as fontes se elas fossem especificadas em ems ou com <font size=.

Veja um pouco mais sobre o em em tipografia na Wikipedia

O "rem":

O em tinha um problema intrínseco: quando você definia um tamanho de fonte em ems, a referência de tamanho era a do elemento superior, o que causava uma certa confusão, dependendo de como os elementos eram apresentados em relação aos outros.

Para resolver o problema, à partir do CSS3 foi implementado o rem, muito similar ao em, mas que toma sempre por base o elemento raíz da página. Assim, a referência vai ser sempre a fonte do html, e não do elemento superior.

O "px":

Pixel é a abreviação de Picture Element, e se refere aos pontinhos que compõe as imagens na tela, e é a origem da unidade px.

As imagens, pela própria natureza, têm suas medidas de largura e altura em px, e a área útil da tela e da página do browser também são medidas nativamente em px. Esta é a medida usual para especificar @media queries.

Usualmente os px do CSS correspondem aos pixels físicos do dispositivo, e esta ainda é a regra na maior parte dos casos.

No entanto, isso não é mais uma certeza absoluta: com as telas de alta definição, e o fato das decisões de mercado serem tomadas por Comitês, e não gente que realmente usa os padrões, em alguns casos o px pode não corresponder necessariamente ao pixel do dispositivo físico, como nos displays de alta densidade. Veja a questão a seguir:

Qual o DPI recomendado para imagens utilizadas em websites?

E também as especificações do w3c sobre os "pixels de referência" (en).

A porcentagem (%):

A porcentagem, assim como o em, também é relativa, mas em unidades absolutas, proporcional ao elemento em si, e não à fonte diretamente.

Exemplos:

.exemplo {
   font-size: 20px;
   line-height: 150%;
}

Assim, teremos espaçamento 1,5 entre linhas, como no exemplo anterior, mas usando %. Notar que apesar de estarmos usando um elemento cujo tamanho aparentemente depende da fonte, a porcentagem é relativa ao tamanho natural do bloco, e não das letras em si (mas de qualquer forma, corresponde a UMA linha do bloco, no caso de blocos de texto).

H1 {
   width: 50%;
}

Um cabeçalho com metade do que seria a largura total.

Qual usar?

Depende da situação. Não tem um "melhor", nem "certo e errado". Depende da intenção desejada. Se você está usando @media para fazer layouts para vários dispositivos, e gosta de ter controle preciso sobre o resultado, não há problema nenhum em definir tudo em pixels, o que é uma técnica boa para que o resultado seja exatamente o que você espera.

Tem alguns elementos que vão ser usados em parágrafos com diferentes fontes, proporcionalmente? Use o em, pois você terá a certeza que o elemento vai ser proporcional ao texto.

O ideal é saber bem as diferenças, pois assim você não fica limitado às "boas-práticas" e usa a ferramenta certa nos lugares e hora certos, com segurança.


Veja também:

O em e o rem usam as tags html ou body como referência?

1
  • 3
    Não que as "boas-práticas" sejam problemáticas por si só; o problema é segui-las cegamente, sem entender o motivo.
    – bfavaretto
    Commented 28/04/2014 às 19:46
9

Por que a unidade de medida em é relativa em relação ao tamanho da fonte, já o px é uma unidade de medida que também é relativa, e seu valor é gerado em relação ao dispositivo (midia) de exibição.

Como é citado aqui por Maurício Samy Silva (Maujor):

"O valor é tomado em relação:

em: ...ao tamanho da fonte ('font-size') herdada;
px: ...ao dispositivo (midia) de exibição;

"(Maujor)

Então é logicamente mais confiável setar o tamanho da fonte, por uma unidade que é abstraída de sua própria medida.

Exemplo: Se eu seto o tamanho da fonte em 12px para um componente, estou dizendo que para esse componente 1em == 12px, logo 2em == 24px, e você também pode utilizar esse valor como ponto flutuante, ex: 1.5em = 18px.

Esse artigo demonstra muito bem o funcionamento, das unidades de medidas para font-size, se puder dar uma olha, acredito que irá lhe ajudar a entender melhor cada um deles.

7

Em é uma unidade relativa de medida, ou seja 1em pode ter tamanhos diferentes dependendo do contexto.

O valor default de 1em é igual ao da font-size do pai do elemento.

Ex

<!DOCTYPE html>
<html>
<head>
    <title>Em</title>
</head>
    <style>
        body{ font-size: 16px; }    
        p.t1{ font-size: 1em; }
        p.t2{ font-size: 1.5em; }           
        p.t3{ font-size: 3em; }
        p.t4{ font-size: 5em; }
    </style>
<body>
<div>
    <p class="t1">Teste 1</p>
    <p class="t2">Teste 2</p>
    <p class="t3">Teste 3</p>
    <p class="t4">Teste 4</p>
</div>
</body>
</html> 

A vantagem é que dessa maneira se mantém a proporção das fontes, se for necessário mudar o tamanho, só se mudaria a em uma única linha.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .