¿Qué son px, rem, em, % y pt en CSS?
Son las unidades con las que se miden tamaños de fuente, espaciados y dimensiones en CSS. Todas acaban expresándose en píxeles al pintar la página, pero no se comportan igual cuando el usuario cambia sus preferencias de texto.
- px (píxeles): tamaño fijo respecto a la pantalla. Es preciso y predecible, pero no se adapta al tamaño de fuente que el usuario elija en su navegador. Ideal para detalles de 1 px: bordes, sombras, separadores.
- rem (root em): relativo al font-size del elemento raíz (html). Si la base es 16 px, 1 rem = 16 px y 1,5 rem = 24 px. Es la unidad recomendada para tipografía y espaciados que deban escalar.
- em: relativo al font-size del elemento donde se usa, que hereda de su padre. Se multiplica en cascada (un em dentro de otro em crece al cuadrado), por eso es menos predecible; brilla en componentes que deben crecer con su propio texto, como botones.
- %: aplicado a font-size, es un porcentaje del font-size del padre, así que equivale a em en ese caso. Esta herramienta lo calcula respecto a la base: 100 % con base 16 son 16 px.
- pt (puntos): unidad tipográfica de imprenta, 1/72 de pulgada. CSS fija 1 in = 96 px = 72 pt, de modo que 1 px = 0,75 pt y 1 pt ≈ 1,333 px. Tiene sentido en estilos de impresión (@media print); en pantalla casi nunca se usa.
Por qué rem favorece la accesibilidad
Los navegadores permiten agrandar solo el texto, sin zoom de página entera. Cuando un sitio mide su tipografía en px, esa preferencia no tiene efecto: el texto queda congelado al tamaño que decidió el desarrollador. Con rem ocurre lo contrario: el font-size de la raíz respeta la configuración del usuario y todo lo que está en rem (textos, paddings, anchos máximos) escala con ella.
- Un usuario con baja visión puede subir el texto del navegador y la maquetación acompaña en lugar de romperse.
- Las pautas WCAG (criterio 1.4.4, «Cambio de tamaño del texto») piden poder ampliar el texto hasta un 200 % sin perder contenido ni funcionalidad: usar rem lo facilita directamente.
- Si además cambias la base (por ejemplo, html { font-size: 112,5 % } para 18 px), todos los rem de la hoja se ajustan a la vez: es el «botón de tamaño global» de tu proyecto.
Regla práctica habitual: tipografía, espaciados y anchos de texto en rem; px reservado a líneas de 1 px y detalles que no deban crecer con el texto.
Las fórmulas, con el supuesto de 96 px por pulgada
Toda la conversión pasa por los píxeles como unidad intermedia: primero el valor de origen se traduce a px y después a las demás unidades. La base B es el font-size raíz de tu CSS en px (normalmente 16).
- em real depende del font-size del elemento padre, que no se conoce desde un formulario aislado: aquí se toma la base como contexto y la herramienta te lo avisa cuando eliges em como origen.
- Los resultados se redondean a un máximo de 4 decimales (6 si el valor es menor que 1), sin ceros a la derecha: 18 px con base 16 da 1,125 rem y 10 px da 0,625 rem, pero una cifra repetitiva como 0,666666… se muestra como 0,666667.
- pt casi no se usa en pantalla porque es una unidad de imprenta: su equivalencia en píxeles no depende de la resolución real del dispositivo, sino del supuesto fijo de 96 px por pulgada que define CSS.
Fórmula
rem = px ÷ B · % = px ÷ B × 100 · em = px ÷ B (contexto = base) · pt = px × 0,75
Y las inversas: px = rem × B · px = % × B ÷ 100 · px = pt ÷ 0,75. El factor 0,75 viene de la definición de CSS: 1 in = 96 px = 72 pt, luego 1 px = 72/96 pt = 0,75 pt.
Ejemplos paso a paso (con la base por defecto, 16 px)
- 16 px → 1 rem: 16 ÷ 16 = 1. Es también el 100 % (16 ÷ 16 × 100) y 12 pt (16 × 0,75).
- 24 px → 1,5 rem: 24 ÷ 16 = 1,5. En la herramienta, escribe 24 con unidad px y el resultado principal aparece en rem.
- 1,5 rem → 24 px: elige rem como unidad de origen y la herramienta multiplica por la base (1,5 × 16).
- 0,75 pt → 1 px: 0,75 ÷ 0,75 = 1, porque 1 px = 0,75 pt exactos.
- 100 % → 16 px: 100 × 16 ÷ 100 = 16. El 100 % siempre equivale a la base que indiques.
Cambia la base y verás todo recalculado: con base 18, los mismos 24 px pasan a valer 1,3333 rem. La tabla de equivalencias usa siempre la base activa.