px, rem, em, vh — cuándo usar cada unidad CSS
Guía práctica para elegir la unidad CSS correcta en cada situación: layout, tipografía, espaciado y diseño responsive.
Unidades absolutas vs relativas
Las unidades CSS se dividen en dos grandes categorías. Las unidades absolutas tienen un tamaño fijo que no cambia según el contexto. Las unidades relativas derivan su tamaño de una referencia: un elemento padre, el tamaño de fuente raíz o las dimensiones del viewport.
| Unidad | Tipo | Relativa a |
|---|---|---|
px | Absoluta | Píxel CSS (independiente del dispositivo) |
pt, cm | Absoluta | Medida física (impresión) |
rem | Relativa | Font-size de <html> |
em | Relativa | Font-size del elemento actual |
% | Relativa | Dimensión del elemento padre |
vh, vw | Relativa | Altura / ancho del viewport |
dvh, dvw | Relativa | Viewport dinámico (UI del browser incluida) |
Para el diseño en pantalla, prefiere unidades relativas para tipografía y espaciado. Las unidades absolutas se reservan para elementos que nunca deben escalar: bordes, contornos y detalles decorativos.
px — precisión de píxel
Un píxel CSS no es un píxel físico de pantalla. Es una unidad independiente del dispositivo definida de modo que un píxel CSS equivale aproximadamente a 1/96 de pulgada. En pantallas de alta densidad (Retina), un píxel CSS corresponde a 2 o 3 píxeles físicos — pero desde la perspectiva de CSS sigue siendo 1px.
Cuándo usar px
- Bordes y contornos:
border: 1px solid— no deben escalar nunca - Box-shadow:
box-shadow: 0 2px 8px rgba(0,0,0,.15) - Tamaños de iconos con sistemas de iconos de tamaño fijo
- Breakpoints de media query (aunque em es más seguro — ver Guía de decisión)
Cuándo NO usar px
- font-size — ignora las preferencias del usuario, falla WCAG 1.4.4
- line-height — prefiere sin unidad (
1.5) o rem - padding y margin cuando quieres que escalen con el tamaño de fuente
Regla de accesibilidad: si un usuario configura su navegador al 200% de tamaño de texto, las fuentes en px lo ignoran. Las fuentes en rem lo respetan. No es opcional — es un requisito WCAG 2.1 Nivel AA.
rem — escala relativa a la raíz
rem significa root em. Siempre es relativo al font-size definido en el elemento <html>. El valor predeterminado del navegador es 16px, por lo que 1rem = 16px a menos que lo modifiques.
/* Predeterminado: 1rem = 16px */
h1 { font-size: 2rem; } /* 32px */
p { font-size: 1rem; } /* 16px */
.small { font-size: .75rem; } /* 12px */Como rem está anclado a la raíz, no se acumula cuando los elementos están anidados — a diferencia de em. Esto lo convierte en la elección predeterminada para tamaños de fuente y espaciado en todo el proyecto.
El truco del 62.5%
Configurar html { font-size: 62.5%; } hace que 1rem = 10px, simplificando el cálculo mental (1.6rem = 16px). Hoy se considera un anti-patrón porque:
- Anula la preferencia de tamaño de fuente del navegador del usuario
- Los componentes de terceros que dependen de la base de 16px se renderizarán incorrectamente
- Las herramientas CSS modernas (
clamp(), custom properties) eliminan la necesidad del cálculo en base 10
Usa rem con la base predeterminada de 16px. Divide por 16 mentalmente o usa un convertidor px-to-rem.
em — tamaño relativo al contexto
em es relativo al font-size del elemento actual. Si no se define un font-size en el elemento, se hereda del padre — por eso em puede acumularse cuando los elementos están anidados.
/* Ejemplo de acumulación */
.parent { font-size: 1.2em; } /* 19.2px si el padre es 16px */
.child { font-size: 1.2em; } /* 23.04px — 1.2 × 19.2px */Cuándo em es la mejor opción
Em es la unidad correcta cuando quieres que el espaciado o el tamaño escale proporcionalmente al font-size del propio componente, no a la raíz global:
.btn {
font-size: 1rem;
padding: .5em 1.2em; /* escala con el font-size del btn */
}
.btn-large {
font-size: 1.25rem;
/* el padding escala automáticamente */
}Cuándo evitar em
- Tamaños de fuente globales — usa rem para evitar acumulaciones en el DOM
- Dimensiones de layout — usa rem, % o unidades viewport
vh y vw — unidades viewport
vh (altura viewport) y vw (ancho viewport) equivalen cada uno al 1% de la dimensión correspondiente del viewport. Ideales para layouts que deben llenar la pantalla.
.hero {
height: 100vh;
width: 100vw;
}El problema de 100vh en móvil
En los navegadores móviles, la barra de direcciones y el chrome de navegación ocupan espacio — pero no se restan de 100vh. Esto hace que un elemento 100vh sea más alto que la pantalla visible, causando una barra de desplazamiento no deseada.
La solución moderna: dvh
La unidad dvh (dynamic viewport height) fue creada para resolver esto. Se actualiza cuando la UI del navegador aparece o desaparece:
.hero {
height: 100vh; /* fallback para navegadores más antiguos */
height: 100dvh; /* dinámico — tiene en cuenta el chrome colapsable */
}Incluye siempre el fallback vh. Otras unidades viewport útiles: svh, lvh, vmin y vmax.
Tabla de conversión rápida (base 16px)
Cuando conoces el valor en píxeles pero necesitas el equivalente en rem, divide por 16:
| px | rem | em (1:1) |
|---|---|---|
| 8 | 0.5rem | 0.5em |
| 12 | 0.75rem | 0.75em |
| 14 | 0.875rem | 0.875em |
| 16 | 1rem | 1em |
| 18 | 1.125rem | 1.125em |
| 20 | 1.25rem | 1.25em |
| 24 | 1.5rem | 1.5em |
| 32 | 2rem | 2em |
| 48 | 3rem | 3em |
| 64 | 4rem | 4em |
¿Necesitas convertir una hoja de estilos completa? Usa el Convertidor de Unidades CSS.
Guía de decisión
En caso de duda, usa esta tabla como referencia rápida:
| Propiedad / Caso de uso | Unidad recomendada |
|---|---|
| Tamaño de fuente | rem |
| Padding / margin (global) | rem |
| Padding interno a un componente | em |
| Bordes, contornos, box-shadow | px |
| Columnas / anchos de layout | % o fr (CSS Grid) |
| Secciones hero / pantalla completa | dvh con fallback vh |
| Breakpoints de media query | em (más accesible) o rem |
| Line-height | Sin unidad (1.5) o rem |
| Tamaño de fuente responsive (fluido) | clamp() con valores rem |
La tipografía fluida con clamp() es un patrón poderoso. Usa el Generador Font Size Clamp para construir estos valores visualmente.