La diferencia entre rem vs em vs px está en aquello con lo que se compara el tamaño. rem es relativo al tamaño de fuente del elemento raíz, así que 1rem significa lo mismo en toda la página. em es relativo al tamaño de fuente del propio elemento (o al de su padre, cuando se usa en font-size), así que cambia de un componente a otro. px es un píxel CSS fijo que ignora la preferencia de tamaño de fuente del usuario. Una regla práctica por defecto: rem para tamaños de fuente y espaciado de la página, em para lo que debe crecer con su propio texto (los márgenes internos de un botón, el tamaño de un icono), px para bordes y sombras, y em o rem en las media queries.
rem y em: cómo se calcula cada unidad
Las tres unidades solo se diferencian en su punto de referencia. La referencia de longitudes de MDN las define así (consultada en octubre de 2026):
| Unidad | Relativa a | 1 unidad con los valores por defecto del navegador |
|---|---|---|
px |
Nada: 1px = 1/96 de pulgada | 1px |
rem |
Tamaño de fuente del elemento raíz (<html>) |
16px |
em en font-size |
Tamaño de fuente heredado (el del padre) | 16px, o el tamaño del padre |
em en cualquier otra propiedad |
El tamaño de fuente calculado del propio elemento | El tamaño de fuente del elemento |
Los 16px son el valor por defecto habitual de los navegadores, no una constante. MDN señala que las preferencias del usuario pueden cambiarlo, y esa es la razón de fondo para preferir unidades relativas en el texto.
En un componente:
html { font-size: 100%; } /* 16px at browser defaults */
.card { font-size: 1.25rem; } /* 20px */
.card h2 { font-size: 1.5em; } /* 1.5 × 20px = 30px */
.card p { font-size: 1.5rem; }/* 1.5 × 16px = 24px, the card does not matter */
.card .tag { padding: 0.5em; } /* half of the tag's own font size */El titular con em depende de dónde esté. Si lo sacas de .card, pasa a medir 24px. El párrafo con rem mide 24px en cualquier sitio.
Por qué em se acumula
Como em en font-size multiplica el tamaño del padre, los elementos anidados vuelven a multiplicarlo:
li { font-size: 0.875em; }Una lista de tres niveles de profundidad acaba en 0,875 × 0,875 × 0,875 ≈ 0,67 del tamaño base: unos 10,7px a partir de una raíz de 16px. Con 0.875rem, todos los niveles se quedan en 14px. Esta acumulación es la razón por la que rem es la opción más segura para los tamaños de fuente, y por la que em va en los sitios donde lo que se busca es escalar con el texto local.
Qué unidad usar en cada propiedad CSS
Elige la unidad preguntándote qué debe seguir el tamaño: la preferencia de texto del usuario, el texto del propio componente o nada. Son recomendaciones y una decisión de diseño; ninguna especificación las exige:
| Propiedad | Unidad | Por qué |
|---|---|---|
font-size |
rem |
Sigue el tamaño de texto por defecto del usuario, sin acumulación |
line-height |
Sin unidad (1.5) |
Escala con el tamaño de fuente que acabe teniendo el elemento |
| Padding de botones, insignias y campos de entrada | em |
Crece con el texto del propio control, así que el texto grande no toca los bordes |
| Márgenes y huecos entre secciones de la página | rem |
Ritmo coherente entre componentes |
max-width de una columna de texto |
rem o ch |
La longitud de línea sigue siendo legible cuando el texto crece |
| Tamaño de un icono junto a un texto | em |
Coincide con el texto que tiene al lado |
letter-spacing |
em |
El espaciado entre letras es proporcional al tamaño de fuente |
border-width, outline, box-shadow |
px |
Una línea fina debe seguir siendo fina con cualquier tamaño de texto |
| Condiciones de las media queries | em (o rem) |
Los puntos de corte se mueven con el tamaño de fuente por defecto del usuario |
Los anchos de diseño en px están bien cuando deben seguir a la pantalla y no al texto. Un borde de 1px, un avatar fijo de 44px o un contenedor de página de 1200px no necesitan crecer con el tamaño de fuente. El texto que hay dentro de esas cajas, sí.
El espaciado es cuestión de criterio. Con espaciado en rem, el ritmo de la página avanza al mismo paso que el texto cuando el usuario lo agranda. Con espaciado en px, cabe más contenido en una pantalla pequeña con tamaños de texto grandes. En un móvil de 360px de ancho, esos pros y contras se notan enseguida, y por eso conviene probarlo (consulta la última sección).
rem o px para el tamaño de fuente y la accesibilidad
Usa rem (o %, o palabras clave como medium) para los tamaños de fuente, porque los tamaños de fuente en px ignoran el tamaño de fuente por defecto que el usuario eligió en el navegador. En Chrome de escritorio, esa opción está en Settings > Appearance > Font size, con más opciones en Customize fonts (Ayuda de Chrome). Un usuario que lo sube del valor por defecto a 20px obtiene un texto de cuerpo de 20px con 1rem y sigue obteniendo 16px con 16px.
El zoom del navegador funciona de otra manera. El zoom escala todo, px incluido, así que un diseño en px también se agranda cuando el usuario pulsa Ctrl y +. El ajuste del tamaño de fuente es el caso en el que rem y px se comportan distinto, y es el ajuste en el que confían las personas con baja visión cuando quieren un texto más grande sin que la página tenga desplazamiento horizontal.
El criterio de conformidad de WCAG 2.2 1.4.4 Cambio de tamaño del texto (nivel AA) pide que el texto pueda ampliarse hasta un 200 por ciento sin pérdida de contenido ni de funcionalidad. Entre sus técnicas suficientes está usar unidades em en los tamaños de fuente. Las unidades relativas facilitan cumplir ese criterio, pero no lo garantizan, porque una caja de altura fija aún puede recortar el texto que ha crecido.
Móviles y el tamaño de texto del sistema
En los móviles, el panorama está cambiando. Chrome 146 (estable el 10 de marzo de 2026) añadió una etiqueta meta opcional que hace que el tamaño de fuente raíz siga el ajuste de escala de texto del sistema operativo y del navegador (notas de la versión de Chrome 146):
<meta name="text-scale" content="scale">
<meta name="viewport" content="width=device-width, initial-scale=1">Con la etiqueta, según la referencia de text-scale de MDN, rem, em y las palabras clave de tamaño de fuente escalan con el ajuste del sistema, y los tamaños de fuente en px no. En octubre de 2026, MDN marca la etiqueta como experimental con disponibilidad limitada y advierte de que la escala de texto en móvil puede ir del 200% a más del 300%, así que una página que la adopte necesita pruebas con esos tamaños. Sin la etiqueta, Chrome en Android ofrece un control deslizante Default zoom en Settings > Accessibility, que amplía toda la página (Ayuda de Chrome), así que allí px y rem crecen juntos.
Este es hoy el argumento más sólido a favor de los tamaños de fuente en rem: un sitio dimensionado en rem está preparado para la escala de texto del sistema el día que añada una sola etiqueta meta.
El tamaño de fuente raíz y el truco del 62,5%
No toques el tamaño de fuente raíz, o defínelo como porcentaje. Poner html { font-size: 16px; } anula la preferencia del usuario en toda la página, porque cada rem pasa a apuntar a unos 16px fijos.
El conocido truco del 62,5% pone html { font-size: 62.5%; } para que 1rem sea igual a 10px con los valores por defecto y 1.6rem sea igual a 16px. Conserva el escalado del usuario, porque el porcentaje se aplica sobre su valor por defecto. Su coste es que cualquier componente de terceros escrito para un rem de 16px sale al 62,5% de su tamaño previsto. Si quieres facilitar las cuentas, una función de Sass o una propiedad personalizada de CSS hace la conversión sin cambiar la raíz.
Tabla de conversión de px a rem
Con el tamaño de fuente raíz por defecto, rem = px / 16:
| px | rem |
|---|---|
| 12 | 0,75 |
| 14 | 0,875 |
| 16 | 1 |
| 18 | 1,125 |
| 20 | 1,25 |
| 24 | 1,5 |
| 32 | 2 |
Mantén los campos de entrada en 16px (1rem) o más: Safari en iOS hace zoom en los campos de formulario cuyo texto es menor.
em, rem o px en las media queries
Usa em o rem en las condiciones de las media queries, porque así los puntos de corte se mueven con el tamaño de fuente por defecto del usuario. En las media queries ambas unidades significan lo mismo: la especificación Media Queries Level 4 dice que allí las unidades relativas se basan en el tamaño de fuente inicial, fijado por el agente de usuario o por las preferencias del usuario, y no en tu regla de html.
/* 48em = 768px at a 16px default, 960px at a 20px default */
@media (min-width: 48em) {
.layout { display: grid; grid-template-columns: 1fr 2fr; }
}Imagina una tableta en vertical con un viewport de 820px de ancho (820x1180 fue el 5,06% de las resoluciones de tableta en todo el mundo en los datos de StatCounter de septiembre de 2026). Con los ajustes por defecto, el diseño de dos columnas se activa a 768px, así que la tableta recibe dos columnas. Un usuario con un valor por defecto de 20px recibe la columna única hasta los 960px, que es el diseño que aún cabe con su texto más grande. Una media query min-width: 768px le obligaría a ver dos columnas y apretaría el texto.
Cómo elegir los valores de los puntos de corte para empezar se explica en cómo elegir los breakpoints responsive, y la propia sintaxis de las consultas, en la guía de media queries en CSS.
Comprueba tus unidades con el ancho de un móvil
Para ver si tus unidades responden al tamaño de texto del usuario, agranda la fuente por defecto y mira la página con el ancho de un móvil pequeño:
- En Chrome de escritorio, abre Settings > Appearance > Font size y elige un tamaño mayor, o fija un tamaño exacto en Customize fonts.
- Abre la página con un viewport de móvil de 360px de ancho. Mobile View Extension recarga la pestaña como un móvil, con un user agent móvil y su tamaño de pantalla; elige un preajuste o introduce 360 × 800 como resolución personalizada. El modo dispositivo de DevTools también sirve.
- Comprueba que el texto del cuerpo ha crecido. Si no, algo fija un tamaño de fuente en
pxo un tamaño raíz enpx. - Busca texto que se salga de los botones, etiquetas cortadas en cajas de altura fija y menús de navegación que se parten en dos líneas.
- Vuelve a poner el ajuste en su valor por defecto y compara los dos estados uno al lado del otro.
Esto solo prueba el ajuste de tamaño de fuente del escritorio. La vista previa funciona en Chrome de escritorio con un ratón, así que no reproduce el tamaño de texto del sistema de un móvil, el renderizado de Safari ni la etiqueta meta text-scale en Android. Para eso, usa un móvil real o un emulador y sube allí el tamaño de fuente del sistema.
Hay más sobre cómo se construyen los diseños fluidos con estas unidades en qué es el diseño web responsive.
Preguntas frecuentes
¿Debo usar rem o px para el tamaño de fuente?
Usa rem para el tamaño de fuente. Un tamaño de fuente en px ignora el tamaño de texto por defecto que el usuario eligió en el navegador, mientras que rem lo sigue, y los tamaños de fuente en rem son además los que escala la etiqueta meta text-scale de Chrome en los móviles.
¿Cuándo debo usar em en lugar de rem?
Usa em cuando un tamaño deba seguir al texto del propio elemento: el padding de botones e insignias, los iconos dentro de un texto, el espaciado entre letras y las condiciones de las media queries. Evita em en valores de font-size anidados, porque se acumula.
¿1rem son siempre 16px?
No. 1rem es igual al tamaño de fuente del elemento raíz, que solo son 16px con el valor por defecto habitual de los navegadores. Un ajuste del usuario, un porcentaje en html o la etiqueta meta text-scale pueden cambiarlo.
¿Se comportan distinto em y rem en las media queries?
No. En las media queries ambas se basan en el tamaño de fuente inicial del navegador y de los ajustes del usuario, así que 48em y 48rem dan el mismo punto de corte. Un tamaño de fuente fijado en html en tu hoja de estilos no les afecta.