O ems ainda é relevante?

Meu entendimento ao ler tópicos como este é que o objetivo do ems é definir todas as medidas em sua página da Web, pelo tamanho da fonte base , que pode ser definido pelo seu navegador.

Por exemplo, no Chrome, você pode fazer isso indo settings -> show advanced settings -> web content -> font size: very large. Eu poderia fazer isso se estivesse usando um monitor grande e de alta resolução, que estivesse longe.

Eu criei um plunker que demonstra a diferença entre ems e px no dimensionamento.

#div1 {
  width: 320px
}

#div2 {

  width: 20em;
}

Se, no meu navegador, eu definir o tamanho da fonte como médio, essas divs terão o mesmo tamanho, o tamanho da fonte base será 16px, então 20em = 320px.

No entanto, quando altero o tamanho da fonte do navegador para muito grande, podemos ver que a div medida em ems aumentou o tamanho.

No entanto, esse efeito será negado se eu definir o tamanho da fonte na tag body, por exemplo.

body {
  font-size: 16px;
}

Porque agora meu CSS está substituindo o tamanho da fonte definido pelo navegador.

Entendo que o ems teria sido importante nos dias de navegadores mais antigos, onde o zoom na página aumentaria apenas as fontes. Atualmente, porém, os navegadores modernos aumentam os pixels e as fontes, tornando o problema do zoom discutível.

Olhando ao redor da web - um monte de sites fazer o tamanho da fonte set em sua tag body.

O Estouro de pilha, por exemplo, define o tamanho da fonte como 13px na tag body. Definir o tamanho da fonte no meu navegador não afeta o layout do Stack Overflow nem um pouco.

Os resultados de pesquisa do Google não fazem isso.

(essas duas capturas de tela tiradas com tamanho de fonte do Chrome definido como muito grande e 100% de zoom).

Portanto, talvez você possa argumentar que definir o tamanho da fonte na tag body é uma má idéia, pois impede as configurações de acessibilidade do usuário. Mas, como o usuário pode aumentar o zoom para aumentar os tamanhos (o que aumentará proporcionalmente todos os pixels também) - isso não parece um problema real.

No entanto, esse efeito será negado se eu definir o tamanho da fonte na tag body, por exemplo.

body {
  font-size: 16px;
}

Porque agora meu CSS está substituindo o tamanho da fonte definido pelo navegador.

Você está esquecendo a acessibilidade .

Consulte C14: Usando unidades em para tamanhos de fonte nas Diretrizes de acessibilidade de conteúdo da Web (WCAG 2.0).

Defina a opção de tamanho da fonte do seu navegador como Muito grande . Agora vá para um site como o W3C . Como o texto se parece?

É disso que trata esta opção. Os desenvolvedores do StackExchange e muitos outros sites decidiram que suas escolhas são mais importantes que as escolhas de usuários que podem ser visualmente prejudicados. Se esta escolha é certa ou errada, está fora do escopo desta pergunta, e a resposta não é necessária diretamente.

Você, no entanto, pode ser forçado (inclusive por lei em alguns sites) a tomar decisões diferentes e permitir que os usuários selecionem o tamanho da fonte. A partir daí, você tem uma opção: especifique o tamanho das imagens e as diferentes zonas da página em pixels; nesse caso, a opção de tamanho da fonte do navegador terá efeitos divertidos no layout ou use emesses elementos como bem.

Observe também que, se você não especificar o tamanho da fonte em pixels no nível do corpo, use empelo menos o tamanho da fonte em qualquer lugar. Por exemplo, o Google especificou o tamanho da fonte de forma inconsistente e a página de pesquisa parece estranha, especialmente com títulos que parecem menores que o texto comum. A Wikipedia, por outro lado, fez um excelente trabalho usando emsempre que o tamanho da fonte foi especificado. Abaixo estão as capturas de tela dos dois sites renderizados pelo Chromium com a opção de tamanho da fonte definida como Muito grande :

Portanto, talvez você possa argumentar que definir o tamanho da fonte na tag body é uma má idéia, pois impede as configurações de acessibilidade do usuário. Mas, como o usuário pode aumentar o zoom para aumentar os tamanhos (o que aumentará proporcionalmente todos os pixels também) - isso não parece um problema real.

Este é um problema real por duas razões.

Primeiro, a maioria dos navegadores armazena o fator de zoom site por site. Se você tem uma deficiência visual, será forçado a aumentar o zoom repetidamente em todos os sites que visitar. Isso é péssimo. Dada a atual indiferença dos web designers e desenvolvedores em relação à acessibilidade, as pessoas com deficiência visual precisam fazê-lo de qualquer maneira, mas isso não significa que deva permanecer assim.

Segundo, muitos sites também não se comportam visualmente quando ampliados. Os sites responsivos funcionam bem, mas os que não respondem exibem rolagem horizontal ou algum tipo de comportamento "sua tela é muito pequena".

Há também uma diferença fundamental entre o zoom e a escala do texto para um desenvolvedor. Embora emsignifique "ajustar isso às preferências de tamanho do texto do usuário", o zoom é sobre o dimensionamento da página inteira para cima ou para baixo, não apenas o texto.

Veja um exemplo do menu do site (na parte superior da página, com os links posicionados em uma linha). Com o zoom, você sabe que a altura do menu mudará proporcionalmente aos outros elementos. Com a opção de tamanho do texto, cabe a você determinar o comportamento. Você pode presumir que uma pessoa com deficiência visual poderá ver seu 50pxmenu de altura em todos os casos: ninguém perderá um menu preto sobre fundo branco. Ou você pode decidir que sua altura deve permanecer proporcional ao texto, por exemplo 1.5em.

o objetivo do ems é definir todas as medidas na sua página da Web, pelo tamanho da fonte base

Isso pode ser um mal-entendido dos termos da minha parte, mas para esclarecer: emé relativo ao tamanho da fonte "do elemento atual". remé relativo ao tamanho da fonte raiz.

Entendo que o ems teria sido importante nos dias de navegadores mais antigos, onde o zoom na página aumentaria apenas as fontes.

Não é por isso que eu uso em. De fato, sua experiência com o zoom é a última coisa que penso quando uso unidades de medida relativas. Minha preocupação é dupla.

Em primeiro lugar, normalmente estou interessado em simplesmente definir meus layouts em termos relativos. Minha preocupação é que meus contêineres tenham uma boa aparência um do outro e o texto dentro deles. E quando troco a fonte ou ajusto as coisas na cadeia, não quero recalcular e atualizar tudo manualmente, para manter as proporções pelas quais estou fotografando. Deixe o navegador fazer as contas ...

Em segundo lugar, eu só quero expressar o tamanho da fonte em termos simples que eu possa entender. Se eu expressar minhas fontes de base em pt's e todo o resto em rem' s ou em's, é mais fácil para mim. Não preciso saber a resolução do seu dispositivo e você não precisa aumentar o zoom. Seu navegador sabe quantos pixels usar; nenhum de nós deveria pensar nisso.