Guía de conversión de unidades CSS: px, rem, em, vw, vh explicados

Elegir la unidad CSS correcta es una de las decisiones más impactantes al escribir hojas de estilo. La unidad que elijas determina cómo se escalan los elementos en diferentes tamaños de pantalla, cómo responden a las preferencias del usuario (como la configuración del tamaño de fuente del navegador) y cuán predecible se comporta tu layout. Sin embargo, muchos desarrolladores usan píxeles por defecto por costumbre, perdiendo la flexibilidad y los beneficios de accesibilidad que ofrecen las unidades relativas. Esta guía cubre todas las unidades CSS principales, explica cuándo usar cada una, muestra cómo convertir entre ellas y proporciona mejores prácticas para el diseño responsive moderno.

Comprendiendo las categorías de unidades CSS

Las unidades CSS se dividen en dos categorías principales: unidades absolutas y unidades relativas. Las unidades absolutas tienen un tamaño físico fijo, mientras que las unidades relativas derivan su valor calculado de otro punto de referencia. Comprender esta distinción es fundamental para tomar decisiones informadas sobre las unidades.

Unidades absolutas

Las unidades absolutas son medidas de tamaño fijo. La unidad absoluta más utilizada en desarrollo web es el píxel (px). Otras unidades absolutas incluyen puntos (pt), centímetros (cm), milímetros (mm) y pulgadas (in). Estas unidades se utilizan principalmente para hojas de estilo de impresión o cuando necesitas medidas que no cambien según el contexto. En CSS basado en pantalla, px es la única unidad absoluta que usarás con frecuencia.

Unidades relativas

Las unidades relativas calculan su valor final basándose en un valor de referencia. em es relativo al tamaño de fuente del elemento actual, rem es relativo al tamaño de fuente del elemento raíz, vw y vh son relativos a las dimensiones del viewport, y los porcentajes son relativos al elemento padre. Las unidades relativas son la piedra angular del diseño responsive y accesible porque permiten que tu layout se adapte automáticamente a diferentes contextos.

Píxeles (px): La unidad de referencia

El píxel es la unidad CSS más intuitiva porque se asigna directamente a los píxeles de la pantalla (con algunas consideraciones sobre la relación de píxeles del dispositivo). Los valores px siempre son iguales independientemente del contexto, lo que los hace predecibles y fáciles de entender. Sin embargo, esta previsibilidad tiene un costo: los tamaños basados en píxeles no se escalan cuando los usuarios cambian el tamaño de fuente predeterminado del navegador, lo que crea problemas de accesibilidad.

Cuándo usar px

• Ancho de borde: Los bordes de 1px deben permanecer de 1px independientemente de la configuración del tamaño de fuente.
• Box-shadow: Los desplazamientos de sombra y radios de desenfoque suelen ser mejores en píxeles para obtener efectos visuales consistentes.
• Detalles finos: Cualquier valor cuyo escalado arruinaría el diseño visual, como separadores de línea fina o posicionamiento preciso de iconos.
• Tamaño de fuente raíz: Establecer html { font-size: 16px; } como línea base es un patrón común, aunque debes respetar los valores predeterminados del navegador del usuario.

Cuándo evitar px

Evita usar px para tamaños de fuente, padding, margin y dimensiones de layout que deberían adaptarse a las preferencias del usuario. Los usuarios que aumentan el tamaño de fuente del navegador a 20px esperan que todo el texto se escale en consecuencia, pero los tamaños de fuente basados en px no responden a este cambio.

rem: Tamaño relativo a la raíz

). En la mayoría de los navegadores, el tamaño de fuente raíz predeterminado es 16px, por lo que 1rem = 16px, 0.5rem = 8px, 2rem = 32px. La ventaja clave de rem es que se escala cuando los usuarios cambian el tamaño de fuente predeterminado del navegador, haciéndolo la mejor opción para la accesibilidad.

Convertir px a rem

La fórmula de conversión es simple: divide el valor en píxeles por el tamaño de fuente raíz.

rem = px / root-font-size

// With default root font size of 16px:
12px = 12 / 16 = 0.75rem
16px = 16 / 16 = 1rem
24px = 24 / 16 = 1.5rem
32px = 32 / 16 = 2rem
48px = 48 / 16 = 3rem

El truco del 62.5%

Muchos desarrolladores encuentran tediosa la matemática de dividir por 16. Un truco popular es establecer el tamaño de fuente raíz al 62.5%, haciendo que 1rem sea igual a 10px. Esto simplifica el cálculo mental: 14px se convierte en 1.4rem, 24px en 2.4rem, y así sucesivamente.

html {
    font-size: 62.5%; /* 1rem = 10px */
}

body {
    font-size: 1.6rem; /* 16px */
}

h1 {
    font-size: 3.2rem; /* 32px */
    margin-bottom: 1.6rem; /* 16px */
}

em: Tamaño relativo al contexto

La unidad em es relativa al tamaño de fuente del elemento actual (o para propiedades distintas de font-size, relativa a su elemento padre). Esto significa que 1em es igual al tamaño de fuente actual, y los valores em se componen cuando los elementos están anidados. Este comportamiento de composición puede ser tanto poderoso como confuso.

El problema de la composición

/* Parent: font-size 16px */
.parent {
    font-size: 1em; /* 16px */
}

/* Child: 1.2em of parent's 16px = 19.2px */
.child {
    font-size: 1.2em;
}

/* Grandchild: 1.2em of child's 19.2px = 23.04px */
.grandchild {
    font-size: 1.2em;
}

Cada elemento anidado multiplica el tamaño de fuente, lo que lleva a un crecimiento exponencial. Por eso rem es generalmente preferible para tamaños de fuente. Sin embargo, em destaca en casos de uso específicos donde quieres escalado a nivel de componente.

Cuándo usar em

• Padding y margin de componentes: Cuando quieres que el espaciado se escale con el tamaño de fuente del componente, em mantiene todo proporcional. Si aumentas el tamaño de fuente de un botón, su padding se escala automáticamente.
• Breakpoints de media queries: Algunos desarrolladores prefieren breakpoints basados en em porque se escalan con las preferencias de tamaño de fuente del usuario, asegurando que el layout se adapte al ancho de contenido apropiado.
• Tamaño de iconos en componentes: Los iconos dimensionados en em se escalan proporcionalmente con el texto circundante.

Unidades de viewport: vw, vh, vmin, vmax

Las unidades de viewport son relativas a las dimensiones de la ventana del navegador. 1vw equivale al 1% del ancho del viewport, 1vh equivale al 1% de la altura del viewport. vmin es el menor entre vw y vh, vmax es el mayor. Estas unidades son esenciales para crear layouts que respondan al espacio de pantalla disponible.

Casos de uso comunes de unidades de viewport

El problema de vh en móviles

En navegadores móviles, 100vh no siempre equivale a la altura visible del viewport. La barra de direcciones y los controles de navegación del navegador ocupan espacio, pero 100vh incluye el área detrás de estos controles. Esto hace que el contenido en la parte inferior de las secciones a altura completa quede recortado. El CSS moderno proporciona dvh (altura de viewport dinámica) como solución, que tiene en cuenta las barras de herramientas dinámicas. Alternativamente, usa JavaScript para establecer una propiedad personalizada CSS basada en window.innerHeight.

/* Modern approach */
.hero {
    height: 100dvh; /* Dynamic viewport height */
}

/* Fallback for older browsers */
.hero {
    height: 100vh;
    height: 100dvh;
}

Nuevas unidades de viewport: svh, lvh, dvh

CSS introdujo tres nuevas unidades de altura de viewport para resolver el problema del viewport en móviles:

• svh (altura de viewport pequeño): La altura del viewport cuando toda la UI del navegador es visible (barra de direcciones expandida).
• lvh (altura de viewport grande): La altura del viewport cuando la UI del navegador está minimizada (barra de direcciones colapsada).
• dvh (altura de viewport dinámica): La altura actual del viewport, que cambia a medida que la UI del navegador se expande o colapsa.

Las mismas variantes pequeño/grande/dinámico existen para el ancho (svw, lvw, dvw) y las unidades mín/máx (svmin, lvmin, dvmin, etc.). Usa dvh para layouts de pantalla completa en móviles, svh cuando necesites garantizar que el contenido sea visible sin scroll, y lvh cuando quieras llenar el máximo espacio posible.

Tipografía fluida con clamp()

La función CSS clamp() es un cambio de juego para la tipografía responsive. Acepta tres valores: un valor mínimo, un valor preferido y un valor máximo. El navegador elige el valor preferido pero lo restringe entre el mínimo y el máximo.

/* Font size scales from 1rem to 2.5rem based on viewport */
h1 {
    font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Padding scales proportionally */
.container {
    padding: clamp(1rem, 3vw, 3rem);
}

Este enfoque te da los beneficios del escalado basado en viewport sin el riesgo de que el texto se vuelva demasiado pequeño en móviles o demasiado grande en escritorio. Elimina la necesidad de breakpoints de media queries para tamaños de fuente, reduciendo significativamente la complejidad del CSS.

Tabla de referencia de conversión

Usa esta tabla como referencia rápida para conversiones comunes. Todos los valores asumen un tamaño de fuente raíz de 16px y un viewport de 1920x1080.

Mejores prácticas de unidades CSS

• Usa rem para tamaños de fuente: Esta es la regla más importante. Los tamaños de fuente basados en rem respetan las preferencias del usuario y se escalan consistentemente en toda la aplicación.
• Usa em para espaciado de componentes: El padding y margin dentro de los componentes se benefician de em porque se escalan proporcionalmente cuando cambia el tamaño de fuente del componente.
• Usa px para bordes y detalles finos: Los valores que no deben escalar con el tamaño de fuente (como bordes de 1px y desplazamientos de sombra) deben usar píxeles.
• Usa porcentajes para anchos de layout: Los layouts fluidos usan anchos de columnas y contenedores basados en porcentajes, permitiendo que el contenido se recomponga en diferentes tamaños de pantalla.
• Usa unidades de viewport para elementos de pantalla completa: Las secciones hero, superposiciones y cualquier elemento que deba llenar el viewport se benefician de vh y vw.
• Usa clamp() para tipografía fluida: Reemplaza los breakpoints de media queries para tamaños de fuente con clamp(), creando un escalado suave entre valores mínimo y máximo.
• Nunca establezcas el font-size raíz en px: Usa siempre porcentajes (como 62.5%) o mantén el valor predeterminado del navegador. Establecerlo en píxeles anula las preferencias de accesibilidad del usuario.
• Sé consistente: Elige una estrategia de unidades para tu proyecto y manténla. Mezclar unidades aleatoriamente hace que el código sea más difícil de mantener y depurar.