PX vs REM en CSS: cuándo usar cada uno y cómo convertir

Los diseños llegan en píxeles, pero muchas guías de estilo recomiendan escribir el CSS en rem. El motivo es la accesibilidad: los tamaños en rem respetan la configuración del navegador del lector, y los tamaños en píxeles no.

Qué es un rem

Un rem equivale al tamaño de fuente del elemento html raíz de la página. Los navegadores lo fijan en 16 píxeles por defecto. Si alguien aumenta el tamaño de fuente por defecto en su navegador para leer mejor, todos los tamaños escritos en rem crecen con él.

Cómo convertir

Para pasar de píxeles a rem, divide entre el tamaño de fuente raíz. Para pasar de rem a píxeles, multiplica.

El truco del 62,5 %

Algunos proyectos establecen html { font-size: 62.5% }, lo que hace que 1rem equivalga a 10 píxeles, de modo que 24px pasan a ser unos cómodos 2,4rem. Funciona, pero obliga a volver a fijar un tamaño de fuente legible en el body, y los componentes de terceros que dan por hecho 16px pueden quedar demasiado pequeños. Muchos equipos mantienen ahora el valor por defecto y usan un conversor.

Cuándo usar cada uno

• Tamaños de fuente: rem, para que el texto respete la configuración del lector.
• Espaciado y anchos de maquetación: rem es una buena opción por defecto, para que las maquetas escalen con coherencia junto con el texto.
• Bordes y detalles finos: los píxeles están bien, ya que una línea de 1px debe seguir siendo de 1px.
• Media queries: em o rem, para que los puntos de ruptura se muevan cuando cambia el tamaño del texto.

Rem vs em

Em es relativo al tamaño de fuente del elemento padre, no de la raíz. Eso es útil para cosas que deben escalar con su propio texto, como el relleno dentro de un botón, pero se acumula cuando los elementos están anidados, lo que puede hacer que los tamaños sean difíciles de predecir. Rem significa siempre lo mismo en cualquier punto de la página.

Por qué rem importa para la accesibilidad

Los navegadores permiten cambiar el tamaño de texto por defecto en los ajustes, y mucha gente con baja visión lo hace. El texto con tamaño en rem sigue ese ajuste: si alguien fija su valor por defecto en 20px, 1rem pasa a ser 20px en todas partes. El texto con tamaño en px lo ignora. El zoom de página escala ambos, pero el ajuste de tamaño de fuente solo funciona con unidades relativas. Las Pautas de Accesibilidad para el Contenido Web piden que el texto se pueda redimensionar hasta un 200 % sin perder contenido ni funcionalidad (criterio de conformidad 1.4.4), y las maquetas basadas en rem hacen mucho más fácil cumplirlo.

Tabla rápida de conversión (base de 16px)

• 12px = 0,75rem
• 14px = 0,875rem
• 16px = 1rem
• 18px = 1,125rem
• 20px = 1,25rem
• 24px = 1,5rem
• 32px = 2rem
• 48px = 3rem

Las media queries usan el valor del navegador, no tu tamaño raíz

Un detalle sorprende a la gente. En las media queries, rem y em se basan en el tamaño de fuente inicial del navegador, no en el font-size que hayas fijado en el elemento html. Así, @media (min-width: 48rem) significa 768px con el ajuste por defecto, incluso si usaste el truco del 62,5 %. La ventaja es que los puntos de ruptura en rem también responden a un ajuste de texto mayor del usuario, de modo que la maqueta cambia a una versión más espaciosa cuando el texto crece.

Tipografía fluida con clamp()

El CSS moderno permite que el texto escale con suavidad entre un mínimo y un máximo con clamp(). Por ejemplo, font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem) nunca baja de 1rem ni sube de 1.25rem, y crece con el viewport entre ambos. Mantén el mínimo y el máximo en rem para que siga aplicándose el ajuste de texto del usuario; un valor hecho solo con unidades vw lo ignoraría.

Qué dejar en px

• Bordes finos (1px) y divisores delicados, que deben verse nítidos con cualquier tamaño de texto.
• Sombras y pequeños desplazamientos decorativos.
• Tamaños de icono que deben alinearse con una cuadrícula de píxeles, aunque muchos diseñadores dimensionan los iconos en em para que coincidan con el texto contiguo.

Cómo montar una escala tipográfica en rem

Una escala simple y coherente hace que rem sea fácil de manejar. Partiendo de los 16px por defecto del navegador:

• Texto del cuerpo: 1rem (16px).
• Texto pequeño y pies de foto: 0,875rem (14px).
• Encabezados: 1,25rem (20px), 1,5rem (24px), 2rem (32px) y 3rem (48px).
• Espaciado: múltiplos de 0,25rem (4px), como 0,5rem, 1rem, 1,5rem y 2rem.

Defínelos una sola vez como propiedades personalizadas de CSS o design tokens y usa después los nombres en todas partes. Si más adelante decides que el texto del cuerpo debe ser algo mayor, un solo cambio actualiza todo el sitio en proporción.

Comprobar que funciona

Cambia el tamaño de fuente por defecto de tu navegador a 20px o 24px y recarga la página. El texto debería crecer, las maquetas deberían reorganizarse sin solaparse y nada importante debería quedar cortado. Después haz zoom al 200 %, el nivel que mencionan las pautas de accesibilidad. Estas dos comprobaciones rápidas detectan la mayoría de los problemas causados por tamaños fijos en píxeles.

Tip: Prueba tu sitio con el tamaño de fuente por defecto del navegador en grande. Cualquier cosa escrita en píxeles que debiera haber crecido destacará de inmediato.