Porque usar ‘em’ no seu CSS hoje em dia?

Talvez você programe pra Web há muitos anos como eu e tenha ouvido falar como em é melhor que pixel. Mais flexível. Mais acessibilidade. Será?

Como os ems funcionam?

A grande diferença de em e px é que em é uma medida relativa. O valor é calculado levando sempre em consideração o font-size do pai. Isso quer dizer que um elemento com font-size: 2em; vai ter o dobro do tamanho da fonte do pai, seja ele qual for.

E assim por diante. O pai do pai do pai do pai… É uma grande multiplicação de valores até chegar na raiz do documento, o <html>. Se não tiver uma fonte definida, a maioria dos navegadores usa 16px como padrão para o <html>.

Isso quer dizer que esse código:

<html>
  <body>
    <main style="font-size: 1.5em">
       <h1 style="font-size: 2em">Titulo</h1>
       <p style="font-size: 0.75em">Texto.</p> 
    </main>
  </body>
</html>

..acaba sendo equivalente a:

<html style="font-size: 16px">
  <body style="font-size: 16px">
    <main style="font-size: 24px">
       <h1 style="font-size: 48px">Titulo</h1>
       <p style="font-size: 18px">Texto.</p> 
    </main>
  </body>
</html>

Mito: em não é mais acessível

A recomendação de que em é melhor para acessibilidade vem da época dos IEs velhos, 6, 5.5. Nesses navegadores, quando o usuário tinha dificuldade de visão, podia aumentar a fonte. Na prática, a fonte base do <html> era aumentada. Ou seja, usava 16px por padrão mas com o zoom isso virava 20px por exemplo.

Assim, todos os elementos que estavam com em tinham seu valor recalculado e a página aumentava de tamanho. Era uma espécie de zoom, essencial para acessibilidade. Os elementos que estavam com px, porém, não aumentavam de tamanho. Péssima acessibilidade. E assim nasceu o modismo do em.

Mas todos os navegadores modernos, IE inclusive, não tratam mais o zoom assim. Na Web moderna, o conceito de pixel é relatevo também. Escrever 1px no CSS não significa necessariamente um pixel físico na tela. Quando o usuário dá um zoom de 200% por exemplo hoje em dia o navegador aumenta todas as medidas, inclusive o pixel. Isso quer dizer que 1px no CSS vai ser desenhado com o dobro de pixels físicos (2px x 2px numa tela comum).

Ou seja, não precisamos de em para acessibilidade.

Onde o em faz sentido então?

A grande vantagem do em é porém no seu aspecto de multiplicar os valores de acordo com os pais. Isso quer dizer que você pode mudar o font-size de um elemento e isso afetar todos os seus filhos. É muito útil para criar seções na página onde os elementos devem aumentar proporcionalmente entre si – um componente, um widget.

Ou seja, usamos em para facilitar a escrita do nosso CSS. E por isso é bom dominar o uso de em e saber aproveitá-lo no seu código.

O em, claro, não é para todos os cenários. Ele vincula as medidas do filho com o font-size do pai. Você mexe no pai e o filho é afetado. Isso às vezes é indesejado. Só usamos em quando existe uma relação estrutural entre o filho e o pai e queremos que um afete o outro. Onde não fizer sentido, continue usando px.

O caso famoso dos designs responsivos

O em teve uma volta triunfante nos designs responsivos. É que é muito frequente você querer uma fonte menor no mobile, que tem menos espaço visível, mas uma fonte maior no Desktop, mais espaçoso. E você quer que a página toda aumente proporcionalmente. Por isso o em.

Fazemos algo assim:

@media (min-width: 500px) {
  html {
    font-size: 1.25em;
  }
}
@media (min-width: 800px) {
  html {
    font-size: 1.5em;
  }
}
@media (min-width: 1000px) {
  html {
    font-size: 1.75em;
  }
}
@media (min-width: 1200px) {
  html {
    font-size: 2em;
  }
}

Conforme o tamanho da tela aumenta, aumentamos o valor do em base na tag <html>. Isso causa um efeito cascata em todos os elementos filhos se estiverem escritos com em.

É muito bom usar em nos sites responsivos para ajustar, via CSS, o tamanho de todos os elementos proporcionalmente.

Mas em não é uma medida flexível nem mais acessível. Pelo menos não no sentido de outras como a porcentagem, que se adapta automaticamente. O em é fixo, só o valor que é calculado a partir de uma conta mais complicada.

Bônus: o rem e outras medidas verdadeiramente flexíveis

O rem é uma medida nova parecida. A diferença é que a conta não leva em consideração todos os pais, mas apenas a raiz, o <html>. Isso quer dizer que mexer no font-size de algum elemento na página não vai refletir e atrapalhar outros. Só se mexermos no <html> mesmo. É útil para o caso do design responsivo que vimos antes.

Mas lembre que o em multiplicar pelo font-size do pai é uma coisa boa em muitas situações. Várias partes da página podem ser encaradas como pequenos componentes autocontidos. E mexer no pai do componente tem que afetar todos os filhos. O em é excelente pra isso, ao contrário do rem.

E, se você quiser uma medida verdadeiramente flexível e adaptável para fontes, a resposta está nas novas viewport units. Em especial, um código como html { font-size: 2vw; } vai fazer a fonte se adaptar automaticamente a todo tipo de resolução. Mas isso fica para outro artigo.

Se quiser saber mais sobre medidas flexíveis, boas práticas de CSS e também de design responsivo, não perca o curso de Web da Caelum.

E você, gosta de usar em?

23 Comentários

  1. Pamella 30/09/2014 at 10:12 #

    Eu particularmente ainda não me acostumei a usar Em pois na prática, na hora da correria do dia-a-dia, acho que acabo esquecendo de padronizar nos meus frameworks pessoais ou quando realizo manutenções.

  2. Ronys 03/10/2014 at 03:40 #

    Sou fã de um PX

  3. Pedro Henrique 06/10/2014 at 09:32 #

    Porque usar em e não porcentagem, por exemplo? Sei que rola uma eterna discussão sobre em, px e %…

  4. Sérgio Lopes 07/10/2014 at 14:50 #

    Porcentagem costuma ser ideal para representar medidas relacionadas a largura da tela.

    EM é usado para medidas relacionadas ao tamanho do texto.

  5. Clóvis Neto 08/10/2014 at 13:48 #

    Muito bom o post, parabéns!

  6. Cristiano 08/10/2014 at 23:10 #

    @SergioLopes, ajusta a palavra relativo ela está escrita “relatevo”, faz uma busca no texto.

  7. Bruce 10/10/2014 at 09:25 #

    O em é aconselhável para medidas de boxes?

    Nos meus wrappers da vida coloco algo em vota de 60~70em para centralizar a página. Isso é correto?

    Obrigado.

  8. Nelito Zangui 10/10/2014 at 10:37 #

    É bom aprender coisas novas. As vezes é mesmo complicado fazer toda esta relação entre os elementos e, isto acaba afetando o trabalho. Eu pessoalmente ainda faço alguma confusão – foço teste de melhor funcionamento – na hora de implementar px ou em num elemento. Seja como for, o segredo é, como você mesmo disse, adequar-se à situação. E quanto ao novos valores (rem e vw) são novidades. È bom aprender sempre!!! Valeu!

  9. Felipe 10/10/2014 at 10:46 #

    Uma boa dica para quem trabalha convertendo Layout PSD para HTML+CSS é a conta que se faz para converter PX para EM.

    Exemplo, se vc tem uma fonte que no seu PSD tem 20px e o font-size do HTML do pai é 16px, você pode calcular 20/16 = 1.25.

    No seu CSS a fonte em EM corresponde a 1.25em.
    Ou se vc for preguiçoso pode acessar http://pxtoem.com/ para pegar uma tabelinha.

    =)

  10. Marcio 10/10/2014 at 10:56 #

    Bom post.

    Quando é melhor usar “rem” ao invés de “em”?

  11. Márcio 10/10/2014 at 11:45 #

    Bom saber. Obrigado, @SergioLopes.

  12. André Willik Valenti 21/10/2014 at 21:55 #

    Olá,

    Quando li “Mito: em não é mais acessível”, não entendi se o mito era ser ou não ser mais acessível. Depois, concluí que o mito era ser mais acessível. Tem um errinho de digitação, também: “o conceito de pixel é >relatevo”.

    O artigo me ajudou a entender o que é o em, mas fiquei ainda um pouco em dúvida sobre quando se deve usá-lo. E achei bem assustador que agora existam também rem e vw. Acho que o pessoal do W3C exagerou na quantidade de medidas disponíveis. Será que precisava de tudo isso? Acho que mais atrapalha do que ajuda…

  13. Rafael 24/10/2014 at 21:43 #

    Excelente post, parabéns!

  14. Ráfaga 11/12/2014 at 09:07 #

    O em é para quem faz um código muito bem organizado, o rem já consegue trazer uma segurança maior, pois é relativo ao html.

  15. Victor Melo 06/02/2015 at 19:57 #

    Ótimo post, parabéns!

  16. Iago Machado 07/04/2015 at 09:56 #

    Para quem tem um pouco de dificultade de passar as dimensões que estão em px no psd para o em no front-end vale a dica de especificar o html com: font-size: 62,5%. Assim 14px seria equivalente à 1.4em 🙂

  17. Bruno Rodrigues 27/04/2015 at 14:00 #

    Embora dê trabalho para poder implementar o “em” de inicio, ele facilita o trabalho de desenvolvimento/manutenção das fontes utilizadas.

    O “em” é muito bom na minha opinião para o desenvolvimento.

    http://www.designatual.com.br

  18. Pablo Müller 28/04/2015 at 01:47 #

    Boa noite pessoal, encontrei o blog hoje!

    Nunca tinha visto um debate sobre o PX vs EM 😀
    Eu estou trabalhando em um script para otimização e compactação de CSS e fiquei com uma duvida…

    É o seguinte eu converti um CSS de 300Kb retirando os PX e convertendo em valores EM e o resultado foi que o meu CSS ficou com 321Kb!
    No meu ponto de vista, o de um compactador de código, o aumento de 21Kb é MUITA coisa! Sera que na renderização o navegador compensa esse aumento no tamanho do CSS?

    Eu usei os valores da tabela de conversão que o Felipe passou, do ponto de vista de um compactador existe alguma possibilidade de reduzir esses valores EM?

    Se vocês tiverem alguma coisa a acrescentar sobre o meu site! (Levando em consideração que ele esta na versão 0.7)
    Também ficaria muito grato!

  19. Richard Eitz 10/06/2015 at 14:38 #

    Belo artigo, tirou algumas dúvidas que já vinham comigo a tempos.

    Discordo em apenas uma coisa: Exemplo de diminuir letra em mobile. Em meus projetos existem vezes em que eu até aumento o tamanho da letra para facilitar a leitura. (Lembrar que px não é px verdadeiramente, proporcional etc..)

    Agora por minha opinião, não consigo gostar muito do EM, acho que só mesmo em algum widget ou em um painel de texto em que o programador já faz pensando em acessibilidade. (Ex: botões A+ A- aumentam/diminuem corpo, titulo e subtitulo de um texto). Fora isso só stress fazendo cálculos pra depois perceber que o trabalho extra é somente isso… Trabalho extra.

    @Pablo: Desculpe se não entendi direito mas; não vejo utilidade em fazer a conversão de ‘px’ pra ‘em’ SOMENTE para renderização visto que a única utilidade do EM, como demonstrou o artigo, é facilitar o dia a dia do programador front-end utilizando medidas padronizadas. O fato de o arquivo ter ficado maior ainda só reforça essa ideia.

  20. Diogo Rodrigues 21/07/2015 at 10:16 #

    Olá!

    Por mais que os browsers modernos já possuem uma solução mais eficaz para aumentar o zoom mediante medidas em “px”, utilizar um valor em porcentagem para as fontes no elemento raíz (html) e tamanho em “em” para os outros elementos não se torna uma prática inteligente? Pois, para mim, essa prática ainda é melhor do que apenas usar somente o “px”; ou “rem” e “vw” que ainda não funcionam corretamente.

  21. Cornélio José Wiedemann 03/02/2016 at 15:20 #

    Sou fã mesmo é do PX,
    mas to usando direto o EM

    rsrsrs

    Att,
    Tio Nélio Do Rincão ( TI & DBA )

  22. Leonardo 02/09/2016 at 09:28 #

    Posso usar em em tudo que vai px? Por exemplo: width: 12em;
    Até onde eu percebi, funciona tranquilamente.

  23. Mauricio Luiz 18/11/2016 at 10:50 #

    Sérgio, bom dia!

    Eu uso um template responsivo no blogger, e estava acostumado a colocar o zoom como Cadget, ( A+ a- ), no template responsivo não tem esta possibilidade. As postagens no meu template estão com a letra muito pequena. Existe uma solução?

    Desde já agradeço
    Mauricio

Deixe uma resposta