O que é um EM?

A Wikipedia explica bem: "Um 'EM' é uma unidade de medida no campo da tipografia, igual ao tamanho da fonte atual". Se o tamanho da fonte estiver em 16 pixels, 1em = 16px

Para mais informações, visite Wikipedia Wikipedia e Mozilla MDN.

Qual é a diferença de tamanho do texto entre PX, EM,%, PT?

Pixels e pontos são medições estáticas, mas comumente usadas em diferentes mídias. Os pixels são usados ​​nas telas porque as telas são medidas em pixels. Embora os pontos possam ser usados ​​na tela, eles são o padrão na impressão, pois são um fator de DPI.

Porcentagem e EMs, por outro lado, são medidas relativas. O tamanho de uma unidade EM ou porcentagem depende do pai. Se o texto do corpo for dimensionado em 12 pixels, o texto definido em 120% ou 1,2 EM no corpo será de 1,2 * 12 ou 14,4 pixels.

Como faço para converter entre PX, EM,% e PT?

Aqui estão as fórmulas usadas

Nota: 16 px é usado como o tamanho do texto do corpo em todas as conversões, porque esse é o padrão do navegador. Você alterará 16px para o tamanho do texto base.

PX para EM

Fórmula: tamanho em pixels / tamanho pai em pixels

Examplo: 12px / 16px = .75em

PX para %

Fórmula: tamanho em pixels / tamanho pai em pixels * 100

Examplo: 12px / 16px * 100 = 75%

PX para PT

Fórmula: tamanho em pixels * (pontos por polegada / pixels por polegada)

Examplo: 16px * (72pt / 96px) = 12pt

EM para PX

Fórmula: tamanho em EMs * tamanho pai em pixels

Examplo: .75em * 16px = 12px

EM to %

Fórmula: tamanho em EMs * 100

Examplo: .75em * 100 = 75%

Por que dimensionar seu texto com EMs em CSS?

'Style Sheets' - As Folhas de Estilo que usam EMs são mais fáceis de manter para o designer e mais acessíveis aos usuários finais.

'Style Sheets' - As Folhas de Estilo ficam mais fáceis de manter, porque todo o texto definido nos EMs é dimensionado para o tamanho da fonte do corpo. Somente o tamanho da fonte de um elemento precisa ser alterado, em vez de alterar individualmente o tamanho da fonte de cada elemento.

A acessibilidade é aumentada para os usuários finais, porque o texto é redimensionado com base em suas preferências, em vez de ser definido estaticamente em pixels. Além disso, os usuários finais podem usar teclas de atalho para dimensionar o texto em todos os navegadores. Muitas pessoas têm dificuldade em ler textos pequenos na tela do computador.