De px a rem — tabela de unidades CSS com 120 tamanhos
16 px são 1 rem e também 12 pt. Cada tamanho de 1 a 120 px, com seu valor em rem, pt, pc, polegadas e milímetros.
Os tamanhos mais comuns
Texto base em 16, texto pequeno em 14, espaçamentos de 8, 24 e 32: os valores que se repetem.
Por que rem se divide por 16
Porque os navegadores definem o tamanho de fonte raiz em 16 px e rem é um múltiplo dele. Se o leitor aumentar o texto no navegador, só cresce o que está em rem; o que foi fixado em px permanece.
Na tela, pt e polegadas continuam sendo pixels
O CSS fixa uma polegada em 96 px e um ponto em 1/72 de polegada. Assim, 16 px são exatamente 12 pt — mas encoste uma régua na tela e essa "polegada" não medirá uma polegada.
Tamanhos que saem inteiros
O rem sai inteiro nos múltiplos de 16 e o pt nos de 4, porque 4 px são exatamente 3 pt.
De 1 px a 120 px
Como ler
- rem = px ÷ 16, porque os navegadores fixam a fonte raiz em 16 px.
- pt = px × 0,75, já que o CSS fixa a polegada em 96 px e o ponto em 1/72 de polegada.
- Um pc são 12 pt, e uma polegada são 96 px e também 72 pt.
- Use rem para texto e espaçamentos; deixe px para linhas finas como bordas.
Perguntas frequentes
Q. Quantos pixels tem 1 rem?
16 px por padrão. Se o leitor aumentou o texto nas configurações do navegador, cresce junto — e é justamente por isso que rem vale a pena.
Q. Devo escrever px ou rem?
Prefira rem para texto e espaçamentos, assim tudo acompanha quem aumenta a fonte. Deixe px para linhas finas, como uma borda de 1 px.
Q. Por que colocam font-size: 62.5% no html?
Isso deixa a raiz em 10 px para que 1,6 rem seja 16 px. O problema é que também encolhe a página para quem aumentou a fonte padrão de propósito.
Q. Por que pt ainda existe?
Vem da impressão e sobrevive em folhas de estilo de impressão e modelos de e-mail. Na tela a conversão é exata: 16 px são 12 pt.
Q. Qual a diferença entre em e rem?
rem mede sempre contra a fonte raiz; em mede contra a fonte do próprio elemento, então ems aninhados se multiplicam.