Guía de unidades CSS: cuándo usar px, rem, em, vh y vw
📷 Christina Morillo / PexelsGuía de unidades CSS: cuándo usar px, rem, em, vh y vw
Una guía práctica sobre las unidades CSS — por qué rem supera a px para la accesibilidad, cómo funciona la trampa de herencia de em, y cómo convertir entre unidades sin perder tiempo.
El problema del 24px que nadie anticipa
Recibes un archivo de Figma. Todas las medidas están en píxeles — fuente de 24px, padding de 16px, margen de 48px. Copias esos valores directamente al CSS. En tu máquina todo se ve perfecto.
Luego un colega que tiene el tamaño de fuente predeterminado de su navegador ajustado a 20px para mayor legibilidad abre la página. Tu título de 24px se mantiene exactamente en 24px mientras que todo lo que lo rodea se reajusta. La jerarquía tipográfica cuidadosamente balanceada se rompe.
Esto no es un caso extremo raro. Es lo que pasa inevitablemente cuando tratas todas las medidas como valores absolutos. La solución está en entender qué unidad usar en cada contexto y tener una manera confiable de convertir entre ellas.
Para eso existe el Convertidor de Unidades CSS. Pero antes de presentar la herramienta, construyamos el modelo mental desde cero.
Glosario de unidades CSS
CSS tiene más unidades de medida de las que la mayoría de los desarrolladores usa en el día a día. Esto es lo que cada una significa en la práctica:
px — Píxeles
La unidad con la que la mayoría aprendió CSS. 1px corresponde nominalmente a un píxel de pantalla en una pantalla de densidad estándar. En pantallas de alta resolución (Retina), el navegador escala según el ratio de píxeles del dispositivo, así que 1px puede renderizarse como 2 o 3 píxeles físicos, pero eso lo maneja el navegador automáticamente.
La propiedad clave: px es fijo. No responde a las preferencias del usuario, al elemento padre ni a nada más en el documento. Un borde de 1px siempre será de 1px — a veces es exactamente lo que necesitas, a veces es el problema.
rem — Root Em
rem significa "root em". 1rem es igual al tamaño de fuente del elemento <html>, que en la mayoría de los navegadores es 16px por defecto, pero lo importante es que respeta el tamaño de fuente predeterminado que configure el usuario.
Si un usuario establece su tamaño de fuente predeterminado a 20px, 1rem es 20px en toda la página. Todo el layout escala proporcionalmente. Es una ventaja significativa para la accesibilidad.
1.5rem con una base de 16px equivale a 24px. La proporción se mantiene constante aunque cambie la base.
em — Em (la unidad traicionera)
em funciona similar a rem pero es relativo al tamaño de fuente del elemento actual, no del raíz. Sin anidamiento no hay problema, pero en cuanto empiezas a anidar elementos la cosa se complica.
Si un elemento tiene font-size: 1.2em y está dentro de un padre con font-size: 1.2em, el hijo termina con 1.2 × 1.2 = 1.44em. Con tres niveles de anidamiento: 1.728em. Esta acumulación es la trampa de herencia de em, que explicamos en detalle más abajo.
vh / vw — Altura y ancho del viewport
1vh = 1% de la altura del viewport del navegador. 1vw = 1% del ancho. Son muy útiles para secciones de pantalla completa y tipografía fluida que se adapta al tamaño de la ventana.
El inconveniente: en móviles, la barra de direcciones aparece y desaparece al hacer scroll, lo que cambia la altura del viewport. Los elementos con 100vh pueden saltar. El CSS Working Group introdujo dvh (dynamic viewport height) para solucionar esto, aunque el soporte de navegadores aún está en progreso.
% — Porcentaje
El porcentaje es dependiente del contexto de una manera que sorprende incluso a desarrolladores experimentados. width: 50% es el 50% del ancho del padre. font-size: 120% es el 120% del tamaño de fuente heredado (funciona como em). margin-top: 10% es el 10% del ancho del bloque contenedor, no de su altura — algo que suele sorprender la primera vez.
pt, cm, mm — Unidades de impresión
Unidades de medida físicas. En la web se usan casi exclusivamente en hojas de estilo de impresión. 1pt = 1/72 de pulgada. Raramente se usan en un stylesheet web normal.
El modelo mental del tamaño de fuente base
Lo que muchos tutoriales no mencionan: los navegadores no solo tienen un tamaño de fuente predeterminado, sino uno que el usuario puede cambiar. Chrome, Firefox y Safari todos permiten esta configuración. Históricamente el valor por defecto en todos los navegadores ha sido 16px, y eso es lo que asumen la mayoría de las tablas de conversión.
Las matemáticas que derivan de esto:
1rem = 16px (con el predeterminado del navegador)
0.75rem = 12px
1.25rem = 20px
1.5rem = 24px
2rem = 32px
Algunos sistemas de diseño usan html { font-size: 62.5%; } para hacer 1rem = 10px, lo que facilita los cálculos (1.6rem = 16px). He usado este truco y funciona, pero rompe silenciosamente componentes que asumen el valor predeterminado del navegador y no mejora la accesibilidad de forma real. Si heredas una base de código que usa esta técnica, identifícala temprano.
Conclusión: rem es predecible porque siempre está anclado en un único valor. Por eso es la elección correcta para la mayoría de las decisiones tipográficas y de espaciado.
Qué unidad usar en cada situación
Tamaños de fuente → rem
Siempre. Rara vez hay una buena razón para definir font-size en px. Si alguien cambia el tamaño de fuente de su navegador, quieres que la jerarquía tipográfica se mantenga intacta. rem lo hace automáticamente.
body { font-size: 1rem; } /* 16px con el predeterminado */
h1 { font-size: 2.5rem; } /* 40px con el predeterminado */
h2 { font-size: 2rem; } /* 32px con el predeterminado */
small { font-size: 0.875rem; } /* 14px con el predeterminado */
Espaciado de componentes → rem o px (según la intención)
El padding y el margen requieren un juicio. Si el espaciado debe crecer con el texto (como el padding vertical de un botón), usa rem. Si es un espacio visual fijo (como la separación entre un ícono y su texto), px está bien.
.button {
padding: 0.75rem 1.5rem; /* escala con el tamaño de fuente */
border: 1px solid currentColor; /* siempre 1px */
border-radius: 4px; /* propiedad visual fija */
}
Layouts de pantalla completa y relativos al viewport → vh/vw
Secciones hero, modales que deben ocupar un porcentaje de la pantalla, sidebars pegajosos — estos casos van con unidades de viewport. Recuerda el problema de la barra de direcciones en móvil; considera dvh si el comportamiento exacto de pantalla completa es importante.
Estilos de impresión → pt/cm/mm
En el bloque @media print, cambia a unidades físicas. Las impresoras trabajan en pulgadas y puntos, no en píxeles de pantalla.
La trampa de herencia de em (con ejemplo real)
Veamos por qué em puede volverse peligroso en los tamaños de fuente.
Imagina que estás construyendo un componente de tarjeta:
.card { font-size: 1.2em; }
.card .meta { font-size: 0.9em; }
.card .meta .timestamp { font-size: 0.85em; }
Si el padre de .card tiene font-size: 16px, esto es lo que realmente obtienes:
.card→ 16px × 1.2 = 19.2px.card .meta→ 19.2px × 0.9 = 17.28px.card .meta .timestamp→ 17.28px × 0.85 = 14.688px
Ninguno de esos números es probablemente lo que pretendías. Sin calculadora es casi imposible de depurar.
Los mismos estilos con rem:
.card { font-size: 1.2rem; }
.card .meta { font-size: 0.9rem; }
.card .meta .timestamp { font-size: 0.85rem; }
Cada valor corresponde directamente al tamaño de fuente raíz. Sin acumulación, completamente predecible.
em sí es útil para line-height: 1.5em o padding: 0.5em en un botón, donde quieres que el espaciado cambie proporcionalmente si cambia el tamaño de fuente del elemento.
Tabla de conversión de referencia (base 16px)
| px | rem | em (sin herencia) | pt |
|---|---|---|---|
| 10px | 0.625rem | 0.625em | 7.5pt |
| 12px | 0.75rem | 0.75em | 9pt |
| 14px | 0.875rem | 0.875em | 10.5pt |
| 16px | 1rem | 1em | 12pt |
| 18px | 1.125rem | 1.125em | 13.5pt |
| 20px | 1.25rem | 1.25em | 15pt |
| 24px | 1.5rem | 1.5em | 18pt |
| 32px | 2rem | 2em | 24pt |
| 40px | 2.5rem | 2.5em | 30pt |
| 48px | 3rem | 3em | 36pt |
Estas cifras asumen 1rem = 16px. Si tu tamaño de fuente raíz es diferente, cada conversión cambia. Por eso existe la herramienta.
Cómo funciona el Convertidor de Unidades CSS
El Convertidor de Unidades CSS resuelve lo que una tabla estática no puede: qué pasa si el tamaño de fuente base no es 16px, o si el viewport tiene 1440px de ancho y necesitas valores vw exactos.
La herramienta permite:
- Ingresar cualquier valor numérico
- Seleccionar la unidad de origen (px, rem, em, vh, vw, %, pt, cm, mm)
- Configurar el tamaño de fuente base (predeterminado 16px, ajustable)
- Configurar las dimensiones del viewport (para conversiones de vh/vw)
- Ver todos los valores equivalentes al instante
Este es el flujo que uso al traducir especificaciones de Figma (siempre en px) a valores rem para un design system. Ingreso el valor en px, leo el rem equivalente, listo. También es útil para verificar cuando un layout está ligeramente desalineado en DevTools — ingreso el valor en px y lo comparo con el rem esperado.
Consejos rápidos para usuarios de Tailwind CSS
Tailwind muestra valores en píxeles en su documentación, pero internamente usa rem.
Tailwind usa rem internamente. text-base es 1rem, text-lg es 1.125rem, text-xl es 1.25rem. Si defines font-size manualmente para que coincida con una clase Tailwind, usa rem, no el número en píxeles de la documentación.
La escala de espaciado también es rem. p-4 es 1rem (16px con el predeterminado), p-8 es 2rem (32px). Cuando un diseñador dice "24px de padding", en Tailwind eso es p-6 (1.5rem). El convertidor ayuda a hacer ese mapeo rápidamente.
Los tamaños de fuente base personalizados funcionan perfectamente con Tailwind. Si estableces html { font-size: 18px }, todos los valores rem de Tailwind se recalculan automáticamente. Usa el convertidor con base 18px para verificar tus valores personalizados.
Resumen
Elegir la unidad CSS correcta no es un detalle menor — es la diferencia entre un layout que se adapta correctamente y uno que se rompe para algunos usuarios.
- px — propiedades visuales fijas como bordes y contornos
- rem — tamaños de fuente y espaciado escalable (la base de la accesibilidad)
- em — con moderación, cuando se necesita escala proporcional al tamaño del elemento mismo
- vh/vw — layouts relativos al viewport,
dvhpara pantalla completa en móvil - % — tamaño relativo al contenedor (cuidado con el comportamiento de margin basado en el ancho)
- pt/cm/mm — solo en hojas de estilo de impresión
Guarda el Convertidor de Unidades CSS en tus favoritos para no volver a perder tiempo haciendo esas conversiones a mano y enfocarte en lo que realmente importa.