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.
| px | rem (raiz 16 px) | pt (pontos) |
|---|---|---|
| 8px | 0.5rem | 6pt |
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 28px | 1.75rem | 21pt |
| 32px | 2rem | 24pt |
| 36px | 2.25rem | 27pt |
| 40px | 2.5rem | 30pt |
| 48px | 3rem | 36pt |
| 56px | 3.5rem | 42pt |
| 64px | 4rem | 48pt |
| 72px | 4.5rem | 54pt |
| 80px | 5rem | 60pt |
| 96px | 6rem | 72pt |
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
QQuantos 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.
QDevo 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.
QPor 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.
QPor 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.
QQual 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.