Cómo convertir entre px, rem, em, vw y vh en CSS (y cuándo usar cada una)

Un diseño te llega con medidas en píxeles, pero tu proyecto usa rem para respetar la configuración de accesibilidad del usuario. Necesitas saber a cuántos rem equivalen 24px, y la respuesta depende de un dato que cambia según el contexto: el tamaño de fuente base, que no siempre son los 16px por defecto que asume todo el mundo.

Por qué convertir unidades CSS no es una simple regla de tres fija

La mayoría de conversiones de unidades CSS dependen de un valor de referencia variable, no de una proporción fija universal:

• px a rem: depende del font-size del elemento raíz (html), que por defecto suele ser 16px, pero puede haberse cambiado en el proyecto.
• px a em: depende del font-size del elemento padre concreto, que puede ser distinto en cada punto del documento.
• vw y vh: dependen del tamaño del viewport (la ventana visible del navegador), así que su valor en píxeles cambia según la pantalla.

Esto significa que no hay una tabla de conversión fija válida para todos los casos: el resultado correcto depende del contexto específico de tu proyecto.

Cómo convertir unidades CSS correctamente

1. Introduce el valor que quieres convertir.
2. Configura el font-size base de tu proyecto (si es distinto del estándar de 16px).
3. Configura el tamaño de viewport si necesitas convertir a o desde vw/vh.
4. Obtén la conversión exacta a px, rem, em, vw, vh o pt en tiempo real.

Puedes hacerlo gratis con el conversor de unidades CSS de esta web.

Cuándo usar cada unidad (la parte que realmente importa)

• px: control absoluto y predecible, pero no respeta las preferencias de tamaño de fuente del usuario en su navegador.
• rem: relativo al tamaño de fuente raíz, la opción recomendada para tipografía y espaciados que deben escalar de forma consistente si el usuario cambia su configuración de accesibilidad.
• em: relativo al elemento padre, útil cuando quieres que un valor escale junto con el tamaño de fuente de un componente específico, pero puede generar efectos en cascada inesperados si se anida en varios niveles.
• vw/vh: relativos al tamaño de la ventana del navegador, ideales para elementos que deben ocupar una proporción de la pantalla independientemente de la resolución.
• pt: unidad heredada de impresión, rara vez recomendable en diseño web moderno.

Por qué rem se ha vuelto el estándar recomendado para tipografía

Un usuario que aumenta el tamaño de fuente por defecto de su navegador (por ejemplo, por baja visión) espera que todo el texto de una web escale en consecuencia. Un diseño hecho enteramente en px ignora esa preferencia; uno hecho en rem respeta automáticamente el ajuste del usuario, porque rem se calcula siempre en relación al tamaño de fuente raíz configurado en el navegador.

Preguntas frecuentes

¿Por qué 16px no siempre equivale al mismo valor en rem? Porque la equivalencia depende del font-size del elemento raíz configurado en el proyecto, que puede haberse cambiado del valor por defecto del navegador.

¿Cuándo debería usar em en vez de rem? Cuando quieres que un valor escale específicamente con el tamaño de fuente de su elemento padre inmediato, no con el tamaño de fuente raíz global.

¿vw y vh cambian si el usuario redimensiona la ventana? Sí, por definición son relativos al tamaño actual del viewport, así que su equivalente en píxeles cambia si la ventana cambia de tamaño.

¿Se guarda algo de lo que convierto? No, el cálculo ocurre en tu navegador.

Convierte entre px, rem, em, vw, vh y pt en tiempo real gratis con el conversor de unidades CSS, con base font-size y viewport configurables.