Unidades de CSS explicadas: px, rem, em, vh — y cuándo usar cada una
Elegir la unidad CSS incorrecta provoca diseños que se rompen en diferentes tamaños de pantalla, fuentes que ignoran las preferencias del usuario y espaciados que se sienten inconsistentes. Aquí tienes una guía práctica para elegir la unidad correcta en cada ocasión.
Por qué importan las unidades de CSS
CSS tiene más de una docena de unidades de longitud, pero la mayoría de los desarrolladores usan cinco en la práctica: px, rem, em, %, y las unidades de viewport vh y vw. Elegir mal no siempre es obvio — el diseño puede verse bien en tu pantalla y romperse en la de otra persona, o pasar el control de calidad visual pero fallar en una auditoría de accesibilidad porque ignora la preferencia del usuario sobre el tamaño de fuente del navegador.
Esta guía explica qué mide realmente cada unidad, te ofrece una regla de decisión concreta para cada situación y cubre los errores que aparecen una y otra vez en las revisiones de código.
px — Píxeles absolutos
Un px de CSS se mapea a un píxel independiente del dispositivo, no necesariamente a un píxel físico de la pantalla. En una pantalla retina de 2x, un px de CSS se renderiza utilizando 2 píxeles físicos. Esto significa que el px es consistente entre pantallas en términos de tamaño visual, pero es absoluto — no escala con nada.
Cuándo usar px:
- Bordes:
border: 1px solid— un borde de 1px siempre debe parecer una línea fina, independientemente del contexto - Sombras de caja y contornos: detalles de precisión que no deben escalarse
- Puntos de ruptura de media query: <
@media (min-width: 768px) - Elementos decorativos de tamaño fijo (iconos con un tamaño definido, divisores)
Cuándo no usar px: tamaños de fuente, padding y margen. Un usuario que configure el tamaño de fuente de su navegador a 20px porque tiene dificultades para leer texto pequeño no se beneficiará de tu diseño si todo está codificado en px. Su preferencia será ignorada por completo.
rem — Root Em
<rem significa "root em". Siempre es relativo al <font-size> del elemento <html>, nunca al padre. Esto lo hace predecible de formas en que <em> no lo es.
Por defecto, la mayoría de los navegadores establecen el tamaño de fuente raíz a 16px. Por lo tanto:
1rem = 16px | 1.5rem = 24px | 0.875rem = 14px
Cuándo usar rem:
- Tamaños de fuente — rem respeta la preferencia de fuente del navegador del usuario
- Espaciado que debe escalarse consistentemente con el tamaño de tipo (padding, margin, gap)
- Dimensionamiento de componentes cuando quieres que todo escale en conjunto
El truco del 62.5%: Algunos desarrolladores establecen <html { font-size: 62.5%; }> para que 1rem sea igual a 10px (ya que el 62.5% de 16px = 10px). Esto simplifica los cálculos mentales: <1.4rem = 14px>. La desventaja es que sobrescribeirá la preferencia de fuente base del usuario a menos que lo uses con cuidado — haz esto solo si entiendes las implicaciones de accesibilidad y sobrescribes a nivel de componente.
em — Relativo al padre
<em es relativo a la fuente calculada (computed font-size) del elemento actual (o al padre, cuando se aplica al propio font-size). Esto lo hace útil para componentes que necesitan escalarse proporcionalmente a su propio tamaño de texto.
Caso de uso clásico: padding de botones. Si escribes <padding: 0.5em 1em>, el padding del botón se escala automáticamente cuando cambias el font-size del botón — los botones pequeños obtienen un padding menor, los grandes más.
.btn { font-size: 1rem; padding: 0.5em 1em; }
.btn-lg { font-size: 1.25rem; /* el padding escala automáticamente */ }
El problema de la acumulación: Cuando anidas elementos con tamaños de fuente en em, estos se multiplican. Un padre en <1.2em y un hijo en <1.2em dan al hijo un tamaño efectivo de <1.44em>. Es por esto que se prefiere rem para los tamaños de fuente en la mayoría de los casos — rem siempre hace referencia a la raíz, por lo que el anidamiento no se acumula.
Cuándo usar em: padding, margin y line-height en componentes donde quieras que los tamaños sigan el propio font-size del componente. Evita em para el font-size en componentes anidados.
% — Porcentaje
El porcentaje es siempre relativo a la dimensión correspondiente del elemento padre. Los porcentajes de ancho son relativos al ancho del padre; los porcentajes de altura son relativos a la altura del padre (con matices).
Es especialmente útil para diseños fluidos: <width: 100%> significa "ocupa todo el ancho disponible". Usado con max-width, crea contenedores responsivos:
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
Para el font-size, el porcentaje se comporta como em — se multiplica con el padre. Usa rem en su lugar para resultados más predecibles.
vh, vw — Unidades de Viewport
<1vh = 1% de la altura del viewport. <1vw = 1% del ancho del viewport. Estos no dependen de ningún elemento — siempre se refieren al tamaño de la ventana del navegador.
Cuándo usar unidades de viewport:
- Secciones de pantalla completa: <
height: 100vhpara un hero que llene la pantalla exactamente - Tipografía fluida: <
font-size: clamp(1rem, 2.5vw, 2rem)para texto que escale suavemente entre tamaños de pantalla sin media queries - Imágenes o vídeos de ancho completo: <
width: 100vwpara salirse de un contenedor
El problema de la barra del navegador móvil: En los navegadores móviles, la barra de direcciones aparece y desaparece mientras te desplazas (scroll), cambiando la altura del viewport. <100vh puede causar que el contenido se corte o cree barras de desplazamiento. CSS añadió <dvh> (dynamic viewport height), <svh> (small — barra visible) y <lvh> (large — barra oculta) para manejar esto. El soporte del navegador para dvh es bueno en 2024+. Usa <height: 100dvh> para diseños de pantalla completa en móviles.
Guía de decisión de unidades CSS
| Qué estás dimensionando | Usa esto | Por qué |
|---|---|---|
| Tamaño de fuente global / cuerpo | rem | Respeta la preferencia del usuario, sin acumulación |
| Tamaño de fuente del componente | rem | Consistente, predecible |
| Padding / margen del componente | <em o <rem> | em si quieres que siga el font-size; rem para consistencia |
| Bordes, sombras de caja | <px | Nunca deben escalarse |
| Puntos de ruptura de media query | <px o <em> | px por simplicidad; em para que los breakpoints escalen con las preferencias de fuente |
| Ancho fluido del contenedor | <% + <max-width> | Toma el espacio disponible, se limita al máximo |
| Sección hero de altura completa | <100dvh | Tiene en cuenta las barras de los navegadores móviles |
| Tipografía fluida | <clamp() con rem + vw | Escala suavemente entre breakpoints |
Los errores más comunes
1. Usar px para todos los tamaños de fuente. Esto rompe la accesibilidad. Los usuarios que aumenten el tamaño de fuente base de su navegador encontrarán tu texto sin cambios. Usa rem para los tamaños de fuente para que la interfaz respete esa preferencia.
2. Usar em para tamaños de fuente en componentes anidados. El problema de la acumulación ocurre aquí. Un menú dentro de una tarjeta dentro de un modal puede terminar con 3 veces de acumulación. Usa rem para los tamaños de fuente.
3. Usar vh para diseños de pantalla completa sin respaldo de dvh. En móviles, la barra de direcciones causa cambios en el diseño (layout shifts). Usa <min-height: 100svh> o <height: 100dvh>.
4. Olvidar que el porcentaje de altura requiere un padre con altura explícita. <height: 100% en un hijo no tiene efecto si el padre tiene <height: auto>. Usa <vh> o flexbox en su lugar.
Fórmula de conversión px → rem
El tamaño de fuente raíz por defecto es 16px. La fórmula para convertir:
Ejemplo: <
24px ÷ 16 = 1.5rem
Si trabajas con una herramienta de diseño que entrega píxeles, nuestro Convertidor de PX a REM gestiona la matemática instantáneamente. Pega cualquier valor px (o una lista de valores) y obtén el equivalente en rem, con soporte para tamaños de raíz personalizados.
Convierte px a rem al instante
Pega cualquier valor en píxeles y obtén su equivalente en rem. Compatible con tamaños de fuente base personalizados.