De px a rem — tabla de unidades CSS con 120 tamaños
16 px son 1 rem y también 12 pt. Cada tamaño de 1 a 120 px, con su valor en rem, pt, pc, pulgadas y milímetros.
Los tamaños más habituales
Texto base en 16, texto pequeño en 14, espaciados de 8, 24 y 32: los valores que se repiten.
Por qué rem se divide entre 16
Porque los navegadores fijan el tamaño de fuente raíz en 16 px y rem es un múltiplo de él. Si el lector aumenta el texto en su navegador, solo crece lo escrito en rem; lo fijado en px se queda igual.
En pantalla, pt y pulgadas siguen siendo píxeles
CSS fija una pulgada en 96 px y un punto en 1/72 de pulgada. Así 16 px son exactamente 12 pt, aunque si pones una regla en la pantalla esa «pulgada» no medirá una pulgada.
Tamaños que salen enteros
El rem sale entero en los múltiplos de 16 y el pt en los de 4, porque 4 px son exactamente 3 pt.
De 1 px a 120 px
Cómo leerlo
- rem = px ÷ 16, porque los navegadores fijan la fuente raíz en 16 px.
- pt = px × 0,75, ya que CSS fija la pulgada en 96 px y el punto en 1/72 de pulgada.
- Un pc son 12 pt, y una pulgada son 96 px y también 72 pt.
- Usa rem para texto y espaciados; deja px para líneas finas como los bordes.
Preguntas frecuentes
Q. ¿Cuántos píxeles es 1 rem?
16 px por defecto. Si el lector ha ampliado el texto en su navegador, crece con él, y por eso conviene usar rem.
Q. ¿Escribo px o rem?
Mejor rem para texto y espaciados, así todo escala cuando alguien agranda la letra. Deja px para líneas finas como un borde de 1 px.
Q. ¿Por qué se pone font-size: 62.5% en html?
Deja la raíz en 10 px para que 1,6 rem se lea como 16 px. El problema es que también encoge la página para quien subió su tamaño de fuente por decisión propia.
Q. ¿Por qué sigue usándose pt?
Viene de la imprenta y sobrevive en hojas de estilo para impresión y plantillas de correo. En pantalla la conversión es limpia: 16 px son 12 pt.
Q. ¿Qué diferencia hay entre em y rem?
rem se mide siempre contra la fuente raíz; em se mide contra la fuente del propio elemento, así que los em anidados se multiplican.