Unidades CSS·48px
48px =
3rem
36pt

48 px em rem — 3 rem, 36 pt

48 px são 3 rem e 36 pt: 0.5 polegadas, 12.7 mm e 300% do tamanho de fonte raiz.

rem (raiz 16 px)
3rem · exato
pt (pontos)
36pt · exato
pc (paicas)
3pc
porcentagem da raiz
300%
polegadas
0.5in
milímetros
12.7mm
centímetros
1.27cm

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.

Tamanhos próximos

pxrem (raiz 16 px)pt (pontos)
45px2.8125rem33.75pt
46px2.875rem34.5pt
47px2.9375rem35.25pt
48px3rem36pt
49px3.0625rem36.75pt
50px3.125rem37.5pt
51px3.1875rem38.25pt

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.

Os tamanhos mais comuns

Texto base em 16, texto pequeno em 14, espaçamentos de 8, 24 e 32: os valores que se repetem.

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 rem são 48 px?

3 rem, ou seja 48 dividido por 16.

Q. Quantos pontos são 48 px?

36 pt. Um ponto é 1/72 de polegada e uma polegada 96 px, então multiplica-se por 0,75.

Q. Que comprimento é esse?

0.5 polegadas, ou 12.7 mm — embora uma régua na tela não concorde.

Q. E em porcentagem?

300% do tamanho de fonte raiz.