Las unidades relativas al tipo

Seis unidades miden el tipo, y solo dos de ellas miden el tamaño de fuente. Las otras cuatro miden glifos concretos: la altura de la x, el avance del cero, la altura de las mayúsculas, el ancho de un ideograma. Eso las convierte en las únicas unidades de CSS cuyo valor cambia cuando termina de cargar una fuente web, con todo lo que eso implica para el layout.

em, rem y el efecto compuesto

Las dos unidades que miden el tamaño de fuente se diferencian solo en contra qué elemento se resuelven, y de esa diferencia sale todo su comportamiento.

em y el compuesto

1em es el font-size computado del propio elemento. Salvo en una propiedad: en font-size, donde sería circular, y por eso se resuelve contra el font-size computado del padre.

.tarjeta   { font-size: 1.25rem; }        /* 20px */
.tarjeta p { font-size: 0.9em; }          /* 18px: 0.9 x 20 del padre */
.tarjeta p { padding: 0.5em; }            /* 9px: 0.5 x 18, el suyo propio */

Esa asimetría es la fuente del efecto compuesto: una regla como li { font-size: 0.9em } aplicada a listas anidadas multiplica en cada nivel, y a la cuarta anidación el texto es ilegible. Es el motivo por el que rem existe.

Y también es la razón por la que em sigue siendo la unidad correcta para todo lo que rodea al texto. Un padding en em en un botón mantiene la proporción con su etiqueta sea cual sea el tamaño; un padding en rem no lo hace. La regla que funciona: rem para el tamaño del texto, em para el espacio que ese texto necesita a su alrededor.

rem y la raíz

1rem es el font-size computado del elemento raíz. Y aquí hay dos detalles que la gente confunde constantemente.

El valor por defecto lo pone el usuario, no tú. El navegador arranca con 16px porque es su valor por defecto, pero es un ajuste de preferencias que cualquiera puede cambiar. rem es la unidad que respeta esa preferencia, y ese es su valor real, no la comodidad de no calcular.

Dentro de una consulta de media, rem no ve tu :root. Los umbrales de @media se resuelven contra el tamaño de fuente inicial del navegador, no contra el font-size que hayas declarado en la raíz. Es lo correcto —el umbral debe seguir la preferencia del usuario y no tus estilos— pero significa que el viejo truco de html { font-size: 62.5% } para que 1rem valga 10px no afecta a las media queries, y produce umbrales que no cuadran con el resto del CSS.

Ese truco, por cierto, tiene un problema mayor que la incoherencia: multiplica por 0.625 la preferencia del usuario. Alguien que ha subido su fuente base a 24px porque la necesita obtiene 15px de base. Si quieres una escala en decenas, defínela con custom properties, no reduciendo la raíz.

Las unidades que miden glifos

Cuatro unidades no miden el tamaño de fuente sino una métrica concreta de la fuente activa.

El soporte de las cuatro es amplio: ch es antiquísima, ic llegó con Firefox 97, Chrome 106 y Safari 15.4, y cap con Firefox 97, Chrome 118 y Safari 17.2.

ch no mide un carácter. Mide el avance horizontal del glifo 0. En una fuente monoespaciada eso coincide con cualquier carácter y 40ch son exactamente 40 caracteres. En una fuente proporcional, el cero suele ser más ancho que la media de las minúsculas, así que en una caja de 65ch caben normalmente más de 65 caracteres, a menudo entre 70 y 85. Sigue siendo la mejor unidad para fijar una medida de línea porque escala con la fuente, pero el número no es literal y conviene ajustarlo mirando.

cap resuelve un problema real de alineación. Un icono junto a un texto se ve mal centrado si lo dimensionas en em, porque 1em incluye ascendentes y descendentes que el texto visible no ocupa. Dimensionarlo en cap lo hace exactamente igual de alto que las mayúsculas de al lado:

.boton svg {
  block-size: 1cap;
  inline-size: auto;
}

ic es para CJK. Mide el avance del ideograma de referencia, que en fuentes CJK bien hechas es el ancho de cualquier ideograma, y permite expresar “veinte caracteres” en japonés o chino de forma exacta.

Las variantes de raíz y el fallback de las métricas

Las cuatro tienen variante de raíz —rex, rch, rcap, ric— que mide lo mismo pero sobre la fuente del elemento raíz. Sirven para lo mismo que rem frente a em: evitar el compuesto y tener una referencia estable.

El reparto de soporte es reciente y desigual: Chrome las tiene desde la 111 salvo rcap desde la 118, Safari desde la 17.2, y Firefox no las implementó hasta la 147, en enero de 2026. Si tu base instalada incluye Firefox anteriores, las variantes de raíz todavía no son seguras y hay que quedarse en las locales.

Y queda el detalle que las hace peligrosas: si la fuente no tiene el glifo de referencia, la unidad usa un valor de reserva. La especificación fija 0.5em para ex y para ch cuando falta el glifo, y 1em para ic. Eso no es un caso teórico: pasa mientras la fuente web todavía no ha cargado y el navegador está usando la de reserva, que tiene métricas distintas.

Una política que funciona

Ninguna de estas unidades es mejor que las otras; cada una responde a una pregunta distinta y la elección correcta es la que hace que el valor signifique algo.

• Tamaño de texto: rem. Responde a la preferencia del usuario y no compone.
• Espacio pegado al texto —padding de botones, márgenes entre párrafos, separación de icono y etiqueta—: em. Escala con el texto al que pertenece y no requiere mantenimiento.
• Medida de línea: ch. Es la única que expresa “una cantidad de caracteres”.
• Altura de elementos que deben alinearse con el texto: cap.
• Espacio de layout que no tiene relación con el texto —canaletas de página, separación de secciones—: rem, o unidades de contenedor si el componente debe ser portable.
• Bordes y detalles ópticos: px.