Elegir una unidad CSS parece una decisión pequeña: px, rem, em, porcentaje, vw o vh. El problema aparece cuando la pregunta se formula como una competición. “Usa siempre rem”, “evita siempre píxeles” y “vw hace que todo sea responsive” son reglas fáciles de recordar y difíciles de aplicar cuando cambia el contexto.
La unidad correcta no es la que gana una tabla universal. Es la que mantiene estable la relación que la propiedad necesita. Un borde puede necesitar un grosor constante; una tipografía debe convivir con preferencias de tamaño; un ancho puede depender del contenedor; una composición de pantalla puede reaccionar al viewport. La guía de valores y unidades de MDN parte de esa idea: cada propiedad acepta tipos de valor y las unidades absolutas y relativas expresan relaciones diferentes.
Antes de elegir, nombra la relación que debe sobrevivir
Para cada valor CSS, completa esta frase: “si cambia ___, quiero que este valor se adapte/no se adapte”. El espacio puede ser el contenedor padre, el tamaño de fuente raíz, el tamaño de fuente del elemento o la ventana de visualización. Si no nombras la referencia, la unidad se convierte en un hábito.
| Lo que debe permanecer estable | Pregunta | Familia que conviene investigar |
|---|---|---|
| Un detalle visual pequeño | ¿Debe mantener un grosor cercano en distintos contextos? | px u otra longitud absoluta apropiada |
| Escala tipográfica del documento | ¿Debe respetar el tamaño raíz? | rem |
| Relación con el componente | ¿Debe crecer junto con el texto del componente? | em |
| Proporción del contenedor | ¿El padre es la referencia real? | % |
| Relación con la ventana | ¿El viewport es la medida que importa? | vw, vh y variantes |
La tabla no decide por ti. Su función es impedir que uses el viewport para un componente que en realidad debe seguir a su contenedor, o que uses un valor fijo para una relación que necesita escalar con el texto.
px no es el enemigo: es una referencia concreta
Un píxel CSS no significa que el dispositivo físico tenga exactamente un píxel de hardware. En la práctica, px expresa una longitud absoluta dentro del modelo CSS y puede ser útil cuando el detalle necesita una dimensión controlada. Bordes finos, sombras, radios pequeños o un icono con una proporción determinada pueden beneficiarse de una referencia más estable.
.separador {
border-top: 1px solid currentColor;
}
.icono {
width: 1.25rem;
height: 1.25rem;
}El debate cambia cuando px se usa para toda la tipografía y cada espacio. Un tamaño fijo puede hacer que el diseño ignore ajustes de lectura, zoom o una escala tipográfica del proyecto. No es que el píxel sea automáticamente inaccesible; es que una regla fija puede estar expresando la relación equivocada para el texto.
rem expresa una decisión respecto a la raíz
rem se calcula en relación con el tamaño de fuente del elemento raíz. Eso lo vuelve útil para construir una escala coherente de títulos, espacios y componentes que deben responder a una configuración global:
:root {
--paso: 0.25rem;
}
h1 {
font-size: 2rem;
margin-block-end: 1rem;
}
.tarjeta {
padding: calc(var(--paso) * 4);
border-radius: 0.5rem;
}La ventaja no es que rem sea moderno. Es que la referencia es visible: si cambia la escala raíz, los valores relacionados se recalculan. El problema aparece cuando se convierte en una unidad religiosa para todo, incluidos detalles que deben seguir al contenedor o al viewport.
La especificación de CSS Values and Units del W3C define las longitudes relativas como medidas respecto a otra longitud. Esa relación es la que debes documentar. Un sistema basado en rem puede ser muy consistente y aun así necesitar porcentajes o unidades de contenedor para componentes reutilizados en espacios distintos.
em sigue al elemento y por eso puede acumularse
em se relaciona con el tamaño de fuente del contexto donde se aplica. En tipografía puede expresar que un espacio crece junto con el texto de un componente:
.boton {
font-size: 1rem;
padding: 0.6em 1em;
gap: 0.5em;
}
.boton--grande {
font-size: 1.25rem;
}El mismo patrón hace que em sea una unidad que conviene inspeccionar con cuidado en componentes anidados. Si varios niveles cambian su tamaño de fuente, los espacios relativos pueden crecer más de lo previsto. La pregunta no es si la acumulación es mala; es si quieres que la relación sea local o global.
Usa em cuando el componente debe mantener proporciones internas al cambiar su tipografía. Usa rem cuando quieres que distintos componentes compartan una escala relacionada con la raíz. Ambas decisiones son válidas, pero no expresan el mismo contrato.
% depende del contexto de la propiedad
Un porcentaje no tiene una referencia universal. Para un ancho suele relacionarse con el contenedor; para otras propiedades, la referencia puede ser diferente o el porcentaje puede tener un significado específico. Por eso width: 50% y padding: 50% no deben asumirse como una misma clase de cálculo solo porque usan el símbolo de porcentaje.
.contenido {
width: min(92%, 70rem);
margin-inline: auto;
}
.columna {
width: 50%;
}La relación con el padre suele hacer que el porcentaje sea apropiado para columnas y límites fluidos. Pero si el padre no tiene una dimensión definida, el resultado puede ser inesperado. Antes de ajustar el número, inspecciona quién proporciona el contexto y qué ocurre cuando ese contexto es más pequeño que el contenido.
vw y vh describen una ventana, no una experiencia completa
vw representa una proporción del ancho del viewport y vh una proporción de su altura. La referencia de viewport de MDN explica estas relaciones y sus implicaciones. Son útiles para composiciones que realmente dependen de la ventana, como una sección visual que ocupa parte del espacio disponible o un tamaño que debe reaccionar gradualmente a la pantalla.
.hero {
min-height: 60vh;
padding-inline: clamp(1rem, 4vw, 4rem);
}
.titulo {
font-size: clamp(2rem, 5vw, 4.5rem);
}El riesgo es convertir el contenido en una función ciega del viewport. Un título puede ser demasiado pequeño en una pantalla estrecha o demasiado grande en una ventana amplia; una sección con 100vh puede convivir mal con barras de navegación móviles y contenido que necesita crecer. Los límites de clamp(), el tamaño natural y las pruebas con contenido real son parte de la decisión.
Si el problema es un componente dentro de una columna, empezar con vw puede ser una pista falsa. El componente no conoce solo la ventana; conoce el espacio que le dejó el layout. En esos casos revisa primero %, Flexbox, Grid o unidades de contenedor cuando el soporte y el objetivo del proyecto lo justifiquen.
La altura móvil no es una cifra única
Las unidades de viewport relacionadas con la altura merecen una decisión aparte en interfaces móviles. La altura disponible puede variar cuando aparecen o desaparecen las barras del navegador, por lo que un bloque basado en una sola interpretación de vh puede ocupar más o menos espacio del que la persona ve en ese instante. Las variantes de viewport pequeña, grande y dinámica permiten expresar qué escenario quieres priorizar, pero no sustituyen la prueba con navegación real.
.pantalla-inicial {
min-height: 100dvh;
padding-block: 2rem;
}
.panel-estable {
min-height: 100svh;
}Usa una altura dinámica cuando el contenido deba seguir el espacio visible y acepta que puede cambiar durante la interacción. Usa una altura pequeña cuando prefieras evitar que un panel quede detrás de controles del navegador. En ambos casos, conserva una alternativa de crecimiento: una pantalla no debe cortar el texto porque el dispositivo no coincidió con la captura de diseño.
Un caso completo: tarjeta que cambia de contexto
Considera una tarjeta que aparece en una columna ancha y también en una barra lateral. Si su título usa vw, puede crecer por el tamaño de la ventana aunque la columna siga siendo estrecha. Si todos los espacios usan px, la tarjeta puede conservar una densidad incómoda cuando el texto aumenta. Una combinación más razonable podría ser:
.tarjeta {
width: min(100%, 28rem);
padding: 1rem;
border: 1px solid #d7dbe0;
}
.tarjeta h2 {
font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.tarjeta p {
max-inline-size: 65ch;
}El ancho sigue al contenedor con un límite; el padding sigue la escala raíz; el título crece dentro de límites y el párrafo controla la longitud de línea. Ninguna unidad resuelve por sí sola la experiencia. La composición nace de relaciones que se complementan.
Las unidades también deben sobrevivir a cambios de lectura
Prueba el CSS con un aumento de texto, zoom del navegador, una traducción más larga y una fuente diferente. Si los controles se solapan cuando el contenido crece, el problema no se arregla reduciendo el tamaño del texto para que vuelva a caber. Primero permite que el layout crezca, envuelva o cambie de composición.
Para una página que debe funcionar en varios tamaños, revisa también nuestra guía de diseño responsivo. La elección de unidades es una pieza del sistema, junto con los breakpoints, el flujo del contenido y la interacción. Si el HTML carece de estructura, consulta las etiquetas HTML esenciales antes de intentar resolverlo con posiciones y tamaños.
Cuando el valor depende de la relación entre propiedades, nuestra guía de propiedades CSS esenciales puede ayudarte a revisar qué propiedad está recibiendo la unidad y qué referencia establece el navegador. El diagnóstico debe seguir el valor hasta su contexto, no detenerse en el nombre de la unidad.
Una prueba de decisión antes de cambiar unidades
- Escribe qué debe mantenerse estable: grosor, escala de texto, proporción del padre o relación con la ventana.
- Identifica la referencia real que usa la propiedad y comprueba si tiene un tamaño definido.
- Prueba el componente con contenido largo, zoom, traducción y un contenedor más estrecho.
- Define límites cuando una relación fluida pueda crecer o disminuir demasiado.
- Elige la unidad que haga visible la intención a la persona que mantendrá el CSS.
Este proceso tarda más que cambiar cada px por rem, pero evita una migración cosmética. Una hoja puede tener más de una unidad y seguir siendo coherente si cada una responde a una relación explicable.
Preguntas sobre unidades sin reglas absolutas
¿Debo evitar siempre px?
No. Es útil para detalles que necesitan una longitud concreta. Para tipografía y espaciado, revisa si una referencia relativa representa mejor el comportamiento que esperas.
¿rem es mejor que em?
No de forma universal. rem sigue al tamaño raíz; em sigue al tamaño de fuente del contexto y puede ser útil para proporciones internas de un componente.
¿vw hace que un diseño sea responsive?
No por sí solo. vw responde al viewport, pero la página también necesita contenido que pueda crecer, límites, layout adecuado y pruebas de interacción.
La mejor unidad es la que permite explicar qué cambiará cuando cambie el contexto. Si no puedes completar esa frase, todavía no estás eligiendo una unidad: estás repitiendo una preferencia.
Martin Rojas escribe sobre tecnología, programación y desarrollo web. En Skydutz Academy comparte explicaciones prácticas sobre herramientas digitales, conceptos de programación y recursos para aprender de forma progresiva. Su objetivo es hacer que los temas técnicos sean más claros, útiles y accesibles para lectores de distintos niveles.