Em

Definição Formal

O em é uma unidade de medida relativa em tipografia igual ao tamanho da fonte atual. Se o tamanho da fonte for 16 pixels, então 1 em = 16 pixels. Se o tamanho da fonte for 12 pontos, então 1 em = 12 pontos. O em é único entre as unidades tipográficas porque não tem um tamanho fixo — ele escala proporcionalmente com o texto que descreve. Isso o torna inestimável para criar sistemas tipográficos harmônicos e escaláveis.

No CSS, a unidade em herda do tamanho da fonte computado do elemento (ou de seu pai, para a propriedade de tamanho da fonte). Isso significa que os valores em se acumulam: se um elemento pai tem font-size: 1.2em e um elemento filho também tem font-size: 1.2em, o tamanho da fonte do filho é 1.2 × 1.2 = 1.44 vezes o tamanho do avô. Esse comportamento em cascata é tanto a maior força do em (para escalonamento proporcional) quanto sua maior fonte de complexidade.

Definição Histórica vs. CSS

Historicamente, na tipografia em metal, o em era definido como a largura da letra maiúscula M em uma determinada fonte — daí o nome. No entanto, na tipografia digital moderna e no CSS, o em é definido puramente pelo tamanho da fonte, não pela largura de qualquer caractere específico. Na maioria das fontes, a letra maiúscula M é mais estreita que um em. Um conceito relacionado, mas distinto, é o em-dash (—), que tem nominalmente uma largura de um em, e o em-space, que é um em de espaço em branco horizontal.

A Letra M

O termo "em" deriva da letra maiúscula M. Na impressão inicial, a letra M maiúscula tinha aproximadamente a mesma largura que a altura do corpo da letra, tornando-se uma referência natural para o quadrado do tamanho da letra. Um bloco de metal tipográfico para a letra M em um determinado tamanho era aproximadamente quadrado (largura igual à altura), e esse quadrado ficou conhecido como "em quad" ou simplesmente "em." Assim, o em tornou-se sinônimo do tamanho em pontos da letra.

O termo "en" (metade de um em) deriva da letra N, que em muitas fontes é aproximadamente metade da largura do em. O en-dash (--) tem metade da largura do em-dash (---), e um en-space é metade da largura de um em-space.

Da Tipografia em Metal para a Digital

Na composição tipográfica em metal, o em tinha um significado muito concreto e físico: era o tamanho do corpo da letra, medido em pontos. Um em de tipo de 12 pontos era 12 pontos quadrados. As fundições tipográficas fundiam em-quads (peças quadradas de metal tipográfico usadas para espaçamento) e en-quads (espaços de meia-em) como material de espaçamento padrão. Quando a tipografia digital surgiu, o em foi abstraído de suas origens físicas, mas manteve seu significado proporcional.

Era da Tipografia em Metal

O em originou-se na era da tipografia em metal móvel (a partir da prensa de Gutenberg por volta de 1440). Na tipografia em metal, cada caractere era fundido em um corpo retangular de um tamanho específico em pontos. O em era a largura do maior quadrado que poderia caber nesse corpo — essencialmente, o tamanho em pontos expresso como uma largura. Os compositores tipográficos usavam em-quads (peças em branco de metal tipográfico com um em de largura) e en-quads (meia-em de largura) para criar espaçamento entre palavras e parágrafos. O em-dash e o en-dash eram punções cortadas para essas larguras.

Fotocomposição

Quando a fotocomposição substituiu a tipografia em metal nas décadas de 1960 e 1970, o em perdeu sua representação física como um bloco de metal, mas manteve seu significado como uma unidade igual ao tamanho em pontos. As máquinas de fotocomposição mediam as larguras dos caracteres em frações do em (tipicamente 18 ou 54 unidades para o em), permitindo controle preciso do espaçamento entre letras e palavras.

CSS e a Web

O em entrou no design da web com a especificação CSS 1.0 em 1996, que definiu o em como uma unidade relativa ao tamanho da fonte do elemento. Isso tornou o em uma ferramenta poderosa para design responsivo: ao definir tamanhos de fonte base em pixels e, em seguida, usar ems para todas as outras medições, os designers poderiam criar layouts que escalassem proporcionalmente quando o tamanho base mudasse. A introdução posterior da unidade rem (root em) no CSS 3 abordou o problema de acumulação, referenciando sempre o tamanho da fonte do elemento raiz.

No CSS e Design da Web

O em é uma das unidades mais importantes no CSS. É usado para tamanhos de fonte, margens, preenchimentos, alturas de linha e pontos de interrupção de consultas de mídia. Usar ems para espaçamento cria relações proporcionais que mantêm a harmonia visual quando o texto é redimensionado. Defensores da acessibilidade recomendam o dimensionamento de fontes baseado em em porque respeita as configurações de tamanho de fonte padrão do navegador do usuário.

No Design Responsivo

Consultas de mídia baseadas em em criam pontos de interrupção que respondem às preferências de tamanho de texto do usuário. Um ponto de interrupção em 48em é acionado em diferentes larguras de pixel dependendo do tamanho da fonte padrão do usuário, garantindo que as mudanças de layout ocorram quando o conteúdo não se encaixa confortavelmente, em vez de em larguras de pixel arbitrárias. Principais frameworks CSS e sistemas de design (incluindo Bootstrap e Material Design) usam ems ou rems para muitas de suas medições.

Na Tipografia Tradicional

Na tipografia impressa, o em continua a definir o espaçamento proporcional. Um em-space (o espaço padrão mais largo) tem um em de largura. Um em-dash abrange um em. A indentação do primeiro parágrafo é tradicionalmente um em. Designers de tipos definem métricas de caracteres (larguras de avanço, valores de kerning, laterais) em unidades por em — o padrão TrueType usa 2.048 unidades por em, e o padrão CFF/OpenType usa 1.000 unidades por em.

Dimensionamento de Texto em Navegadores Web

A maioria dos navegadores web tem um tamanho de fonte padrão de 16px, fazendo com que 1em = 16px por padrão. Quando os usuários ajustam o tamanho da fonte padrão de seu navegador (por acessibilidade ou preferência), os designs baseados em em escalam de acordo. Isso torna os em essenciais para criar sites acessíveis. Um tamanho de fonte de 1.125em (18px nas configurações padrão) fornece um texto de corpo ligeiramente maior e mais legível.

Design de Email

As unidades em são usadas no design de email para tamanhos de fonte e espaçamento. Como os clientes de email variam amplamente em sua renderização de CSS, os em fornecem uma maneira relativamente confiável de especificar tamanhos proporcionais. Designers de email costumam usar ems para preenchimento de botões, tamanhos de cabeçalho e espaçamento para garantir consistência entre diferentes clientes de email.

Software de Tipografia

O software de design de fontes (Glyphs, FontForge, RoboFont) trabalha extensivamente com unidades em. Métricas de glifos — a largura de avanço de cada caractere, a altura de ascendentes e descendentes, e as posições dos pontos de controle — são definidas em unidades por em. Um designer que trabalha em uma fonte pensa constantemente em termos de frações do em para alcançar proporções consistentes entre todos os caracteres.

Em Linguística Computacional

Processamento de linguagem natural e linguística computacional às vezes referenciam o em como uma unidade ao analisar layout e formatação de texto. Estudos de padrões de leitura, densidade de texto e arquitetura da informação medem o espaçamento em ems porque as medições baseadas em em são independentes do tamanho absoluto da letra.

Em Interação Humano-Computador

Pesquisas de HCI sobre design de interface usam ems ao estudar os efeitos do escalonamento tipográfico na usabilidade. Tamanhos-alvo para interfaces de toque, tamanhos mínimos de texto para legibilidade e espaçamento ideal para displays densos em dados são às vezes expressos em ems para criar diretrizes independentes de resolução.

Em Engenharia de Fontes

O em é a unidade fundamental na engenharia de fontes. O valor UPM (unidades por em) define o sistema de coordenadas dentro do qual todos os contornos de glifos são desenhados. Fontes OpenType e TrueType definem cada ponto de controle, largura de avanço, par de kerning e métrica vertical em unidades em. Isso permite que a fonte seja renderizada em qualquer tamanho enquanto mantém relações proporcionais precisas entre os caracteres.