rem vs px vs em para el tamaño de fuente

Un sitio de documentación se publica con una regla aparentemente inofensiva: li { font-size: 0.875em }. Los elementos de lista de primer nivel se renderizan a 14px, exactamente como se pretendía. Luego alguien anida una lista y los elementos internos se renderizan a 12,25px. Una página de preguntas frecuentes con tres niveles de anidación toca fondo en 10,7px. Nadie escribió esos números — para font-size, em se resuelve respecto al tamaño de fuente del padre, así que cada nivel de anidación vuelve a multiplicar por 0,875.

La regla práctica para los tamaños de fuente: usa rem para casi todo, reserva px para detalles que no deberían escalar con el texto (bordes, a veces sombras) y deja em para la rara relación genuinamente local — un icono dimensionado según el texto que tenga al lado. rem se resuelve respecto al tamaño de fuente raíz, así que respeta la configuración del navegador del lector y nunca se acumula. em se acumula a través de la anidación, que es exactamente el error de la lista de arriba. px ignora por completo la configuración del lector.

Este artículo forma parte de nuestra guía de escala tipográfica: una vez que una escala genera los tamaños, la pregunta que queda es qué unidad los lleva a la hoja de estilos.

¿Cómo se resuelve realmente cada unidad?

• px es fija: 16px se renderiza al mismo tamaño calculado sin importar ninguna preferencia de fuente. El zoom de página sigue ampliándolo — el zoom escala todo — pero la configuración de tamaño de fuente del navegador no tiene efecto sobre él.
• rem («root em») se resuelve respecto al tamaño de fuente calculado del elemento raíz, que por defecto es 16px y sigue la configuración del navegador del lector. 1.5rem son 24px con una raíz por defecto y 30px con una raíz de 20px — una constante por página, la misma en cualquier profundidad de anidación.
• em, usada en font-size, se resuelve respecto al tamaño de fuente calculado del padre — lo que la convierte en una cadena. 0.875em dentro de 0.875em dentro de 0.875em da 14 → 12,25 → 10,72px. Los mismos tres niveles de lista declarados como 0.875rem se renderizan a 14px en cada profundidad.

Ese encadenamiento es la diferencia práctica más marcada entre rem y em, y es la razón por la que «unidades relativas» no es una sola categoría: una es relativa a un ancla estable, la otra a lo que sea que esté por encima de ella en el árbol.

¿Por qué rem respeta al usuario y px no?

Los navegadores exponen una configuración de tamaño de fuente por defecto — normalmente 16px — y las personas que necesitan texto más grande la suben, algunas a 20px, otras mucho más allá. Esa configuración cambia el tamaño de fuente raíz, así que cada valor en rem la sigue; cada valor en px la descarta en silencio. La distinción importa porque la configuración no es lo mismo que el zoom: el zoom de página es un ajuste por sitio que escala toda la maquetación, imágenes incluidas, mientras que la preferencia de tamaño de fuente es una declaración persistente y válida en todo el navegador sobre los ojos del lector. Una hoja de estilos en px anula esa declaración sin que nadie lo note — la página simplemente se queda pequeña.

El criterio de redimensionar el texto de WCAG (1.4.4) exige que el texto pueda redimensionarse al 200% sin pérdida de contenido ni de funcionalidad. El zoom de página completa lleva a la mayoría de las páginas hasta ahí, así que dimensionar en px no falla automáticamente — pero una jerarquía basada en rem es lo que permite que la propia configuración por defecto del lector también funcione, en lugar de obligarlo a usar el zoom en cada sitio. El caso intuitivo es más simple que el del cumplimiento: el lector le ha dicho al navegador, una vez, cómo de grande necesita que sea el texto. rem transmite el mensaje; px lo descarta.

¿Cómo se ve una escala en px y rem?

Aquí tienes una escala modular de cuarta justa (ratio 1,333, dos notas por intervalo) sobre una base de 16px — primero se redondean los valores en px y luego se convierten a 16px por rem, que es el flujo de trabajo habitual con tokens:

Lee la última columna frente a la segunda: con un valor por defecto más alto, la columna de px no se movería en absoluto, mientras que la columna de rem reproduce toda la jerarquía un 25% más grande — cada tamaño escalado por el mismo factor, con las proporciones intactas. El lector obtiene una versión más grande de tu tipografía, no una distorsionada.

Abre esta escala en Scale Composer — base de 16px, cuarta justa, dos notas: los mismos seis pasos que la tabla. Luego cambia la base a 20 y estarás viendo la columna de la derecha en vivo — en qué se convierte cada tamaño para un lector que subió su valor por defecto.

¿Cuándo es em la unidad correcta?

Cuando una medida debería seguir al texto que tiene justo al lado, sea cual sea el tamaño de ese texto. El caso clásico es un icono en línea: dale un ancho y un alto de 1em y coincidirá con su texto en un botón, un encabezado o un pie de foto sin ajustes por contexto. El relleno local de un componente puede funcionar igual — un botón con relleno en em mantiene sus proporciones cuando el mismo componente se publica en una variante pequeña y una grande. La prueba es la localidad: si el punto de referencia del valor es «el texto de aquí», em codifica esa relación directamente. Para el propio font-size, úsalo de forma deliberada y como mucho un nivel de profundidad — las cadenas de tamaños de fuente en em son precisamente cómo se escribe el error de la lista anidada.

¿Cuándo es px la unidad correcta?

Cuando escalar con el texto sería un error. Un borde fino de 1px existe para separar regiones; si un lector duplica el tamaño de su texto, el borde fino que cumple su función a 1px normalmente sigue estando bien a 1px — ampliado se convierte en un elemento de diseño que nadie pidió. Las sombras suelen caer en la misma categoría: codifican elevación, no tamaño de lectura, aunque algunos sistemas sí las escalan por decisión propia. El principio refleja el argumento de rem desde el otro lado: rem para todo lo que debería crecer con el texto del lector, px para las pocas cosas cuya función es independiente de él.

Mira tu escala a través de los ojos de un lector

Pon la regla a prueba: abre la misma escala con una base de 20px — la última columna de la tabla, en vivo — y compárala con la versión de 16px. Todo mantiene su forma; solo cambia el tamaño. Luego audita tu propio producto: si sus tamaños de fuente están declarados en px, esta versión más grande y sin distorsión es exactamente lo que no reciben los lectores con un valor por defecto más alto.