Entendo O Tal do Em

Farei uma afirmação polêmica: Pixels não tem mais vez no web design. Só há um motivo para você ainda depender dos pixels - e isso se dá por você ainda não entender o em. Vamos mudar isso!

Tamanho é Tudo

Ao construir sites, precisamos dizer ao navegador o quão "grande" as coisas são: "o cabeçalho será desse tamanho", "esse envólucro terá essa altura", "esse formulário será mais largo que aquilo". É assim que projetamos uma página. Os pixels sempre fizeram sentido em ser a escolha para unidade de medida: Nós estamos jogando as coisas em uma tela, então, o que mais poderíamos usar?!

Contudo, os pixels são inerentemente inflexíveis. E, no fim das contas, inflexibilidade não é legal para a web.

Problemas com Pixels

Oliver Reichenstein, há um tempo, afirmou: “A Web é 95% Tipografia”, mas levou alguns anos para as pessoas entenderem essa ideia. Conteúdo e usuários: les são nossas prioridades enquanto web designers e o design tipográfico ajuda a adequar-nos a essas prioridades.

Navegadores apresentam o texto em um tamanho padrão. No desktop, geralmente é 16px, em navegadores móveis, esse valor varia. Os usuários podem mudar esse valor, adequando-o às suas preferências.

Geralmente, os web designers usarão CSS para fixar o tamanho da fonte padrão...

...prevenindo que o usuário ajuste para sua melhor experiência de leitura, tornando o conteúdo, no fim das contas, menos acessível.

A primeira lição é: devolver esse controle ao usuário. Não previna que os usuários alterem a fonte padrão, porém, garanta que você esteja preparado para esses diferenças. Defina sua fonte base para 100% do tamanho da fonte padrão do navegador:

Dessa forma, podemos continuar a trabalhar a partir daqui.

Nossa Escala Tipográfica

Ainda teremos de definir o quão grandes os elementos se apresentarão, especialmente se tivermos usado uma técnica de redefinição de CSS (CSS Reset) para remover os tamanhos padrões. Um escala modular bem típica seria mais ou menos assim:

Esses tamanhos tem sido usados por séculos, calculados de modo a otimizar as proporções, sem precisar manufaturar vários blocos usados na impressão. Há várias explicações matemáticas para justificar esse tipo de escala, e tenho certeza que você também achará essa escala agradável ao seus olhos.

Nós passaremos essa escala para nossa tipografia, aplicando um pouco de CSS, dessa forma:

Entretanto (como dissemos mais cedo), usar valores fixos para os pixels é inflexível, então, tentemos retificar...

Eis Que Surge O Em

O em é uma unidade de medida. Assim como os pixels, ems podem determinar o tamanho de elementos em uma página web. Diferente dos pixels, que são valores absolutos, os ems são relativos ao tamanho da fonte do seu elemento pai. É esse ponto que gera bastante confusão.

1em é igual ao valor herdado do tamanho da fonte. Se o tamanho da fonte em uma <div> for 16px, 1em dentro dessa <div> é equivalente a 16px. Se o tamanho da fonte dessa <div> muda para 20px, 1em dentro dessa <div> será equivalente a 20px.

Os ems ganharam esse nome lá no design impresso. Para ser "preciso", a primeira vez que o termo foi usado é incerto, mas, como a letra maíscula M (pronunciada eme) é a que mais se aproxima da representaçao de um bloco quadrado de impressão, o qual as letras das impressoras são dispostas, acabou emprestando seu nome para essa medida. Independente do tamanho da fonte em questão, a letra M maíscula definiria o em.

Um em, na verdade, é um pouco maior que a forma da letra em si, mas você entendeu a ideia, não é?.

Convertendo A Partir dos Pixels

Já começamos a definir nossa escala tipográfica em pixels, então, como a convertemos em ems? Um cálculo simples, que expressa o tamanho desejado do tamanho da fonte em relação ao tamanho da fonte de corpo:

Assumindo que o tamanho da fonte de corpo seja 16px, ao tentar converter 36px <h1>, temos:

É assim que nossa escala ficará convertida, usando o método acima:

Alguns desses valores podem ficar um pouco complexos, mas não tema em ser bastante preciso com as casas decimais. Os navegadores tentarão o máximo para renderizar os valores exatos.

Dica: Geralmente, é útil criar comentários, para lembrar a você mesmo de como calculou cada um dos valores.

Problemas Com O Efeito Cascata

O maior problema que as pessoas tem com o em vem da complicação que surge do efeito cascata. Um valor em é relativo ao valor do elemento pai mais próximo, que, acidentalmente, acaba bagunçando as coisas se você não prestar atenção. Veja o CSS abaixo, que tenta formatar as âncoras e os parágrafos, igualmente:

Agora, veja esse pequeno e inocente trecho de código:

Como se espera, tudo aparece muito bem no navegador. Ambos parágrafo e âncora estão com mesmo tamanho, em 1.2em, relativo ao tamanho da fonte do navegador (1.2 * 16px = 19.2px).

Porém, se adicionarmos uma segunda âncora, dentro do parágrafo, vejamos o que acontece:

A âncora dentro do parágrafo ainda está em 1.2em, mas, isso porque está em relação ao tamanho da fonte do parágrafo pai, que já é 19.2px - (1.2 * 19.2px = 23.04px). Isso gerará âncoras maiores em algumas partes de nossa página o que é, altamente, indesejável.

Nota: Itens de lista aninhados em menus de navegação são um exemplo clássico do efeito cascata saindo do controle - fique atento a isso.

A Correção

Não há uma correção para esse problema. A última coisa que você quer fazer é adicionar uma regra extra para diminuir o tamanho das âncoras de dentro dos parágrafos - é um caminho sem volta. Para manter seu CSS e HTML manuteníveis, é importante "Continuar Simples" (Keep It Simple™).

• Deixe seu código simples e modular;
• Defina seus ems claramente e de forma moderada - não os lance a torto e a direito pelo código;
• Tente restringir o tamanho das fontes aos elementos tipográficos; tenha cuidado ao aplicar tamanhos de fontes a elementos estruturais;

Isso deve ajudar! Usar ems significa que você tem de pensar de verdade algumas vezes, mas, fazendo isso, forçará você a tomar a decisão correta e deixar o seu código o mais eficiente possível.

Rems

Os rems são úteis e se comportam exatamente como os ems, porém, sem o efeito cascata. Cada rem que você define é relativa ao tamanho da fonte do corpo do texto. O suporte é relativamente bom, porém, IE8 e anteriores usaram valores em pixel, como alternativa.

E Que Tal Usar Ems Em Outros Lugares?

Nós já falamos sobre a propriedade font-size do CSS; um passo considerável para aprender a usar os ems, mas, agora, vamos falar sobre a propriedade line-height. Line-height é aquela propriedade que clama para não usar valores em pixels. A altura da linha (discutida em um artigo anterior em mais detalhes) de um elemento tipográfico sempre deve ser relativo ao tamanho da fonte. Se você tem um cabeçalho, cujo tamanho é definida em ems e a line-height está definida em pixels, você pode acabar com uma sobreposição horrível e um péssimo relacionamento em geral.

Não há uma regra fixa para o quão grande a line-height pode ser, mas, 1.5 é um valor razoável a se tentar, fazendo com que a tipografia apresente-se agradavelmente legível.

Dica: Dê uma olhada na sugestão de Bryan Gruhlke nos comentários, em relação ao uso de valores sem unidades para line-height.

Nota: As coisas podem ficar um pouco complicadas se você tentar setar uma linha base de grade em ems, mas isso é um tópico para outro artigo.

Elementos Estruturais

Uma vez que estiver acostumado a criar seus layouts flexíveis, em termos de tamanho de fonte, você perceberá que dependerá cada vez menos dos pixels para posicionar os elementos na página.

Se estivermos falando sobre layouts fluidos, você deve usar valores percentuais para determinar a largura de um elemento. Os pixels não devem ser usados para determinar dimensões horizontais.

Espaçamento vertical pode ser alcançado, facilmente, através dos ems. Novamente, é uma questão de ser direto com seus código e estilo. Considere restringir as margens dos seus elementos somente às do bottom, facilitando, assim, a administração do ritmo vertical.

Se precisar definir a height (que pode ser bem complicado, em layouts flexíveis), também use ems. Talvez esteja construindo uma navegação e precise definir a altura dos links do menu - eles devem crescer e diminuir com o tamanho da fonte.

Cantos arredondados em botões? Defina a propriedade border-radius usando ems, assim, tudo escala perfeitamente.

Text Shadow e box shadow funcionam do mesmo jeito.

RWD

E se você precisar mudar o tamanho de tudo sob certas circunstâncias, como em áreas de visualização (viewport) menores? Altere o tamanho da fonte base do corpo na media query apropriada (body { font-size: 90%; }) e shazam!, seu site inteiro escala assim que você apertar a tecla enter.

Exceções

Como todas as excelentes regras científicas, tem de ter uma exceção para provar. Nesse caso, sei de um excelente cenário onde, talvez, você precise usar pixels: As bordas. Se você definir a espessura das bordas (ou a altura de um linha horizontal) em ems, pode ser que ela acabe tão fina que o navegador não seja capaz de renderizá-la.

Assim, você, simplesmente, não será capaz de vê-la.

Para linhas horizontais, você talvez tenha estilos mais ou menos assim:

1

hr {

2

  height: .02em;

3

	border: none;

4

	background: white;

5

	margin: 2em 0;

6

	outline: none;

7

	display: block;

8

	clear: both;

9

	width: 100%;

10

}

Para evitar que elas desapareçam quando o tamanho da fonte for muito pequeno, você pode adicionar o seguinte código:

1

	min-height: 1px;

Um único pixel.

Infelizmente, as bordas não podem ter valores mínimos, assim, código semelhante ao de logo acima não é possível. Ao invés disso, você pode usar os valores thick, medium e thin para bordas, embora esses valores não escalem melhor que os pixels.

Conclusão

Passe a usar ems hoje! Seu conteúdo tem como base a tipografia, tenha você percebido ou não. Tornando aos pixels, converter imagens e pensar em termos de layouts fixos não é mais necessário. Comece a pensar em ems e logo esquecerá os pixels.

Se você conseguir imaginar alguma situação onde você, simplesmente, não pode usar ems, gostaria de saber dela. Deixe um comentário falando sobre!

Leitura Adicional

• pxtoem.com ferramenta de conversão
• Como aprendemos a deixar em paz o tamanho de fonte padrão e abraçamos o em pelo Filament Group
• Por que ems? por Chris Coyier
• Em (tipografia) na Wikipedia
• Tamanho de fontes com rem podem ser evitados pelo Harry Roberts (uma abordagem um pouco menos popular, hoje em dia)
• Mixins para Tamanhos de Fonte com Rem pelo Chris Coyier (se você se sente bem com o SASS)
• Uma explicação sobre ems em "The Elements of Typographic Style Applied to the Web"

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!