Conversor de unidades CSS
Convierte una longitud CSS entre px, rem, em, vw, vh, pt y porcentaje. Introduce el valor, elige su unidad, ajusta el tamaño de fuente del elemento raíz y del padre junto con las dimensiones de la ventana, y obtén todos los equivalentes de una sola vez.
Convierte entre px, rem, em, vw y vh
Fórmula de las unidades CSS
Donde:
- \(v\) — la longitud que has introducido, en su unidad original
- \(f(\text{unidad})\) — cuántos píxeles vale una unidad de ese tipo:
- \(px\): 1 \(rem\): tamaño de fuente del raíz \(em\): tamaño de fuente del padre \(vw\): ancho de la ventana \(/ 100\) \(vh\): alto de la ventana \(/ 100\) \(pt\): \(96/72 = 1.3333\) \(%\): tamaño de fuente del padre \(/ 100\)
La calculadora convierte primero el valor introducido a píxeles y luego lo divide por el factor en píxeles de cada unidad de destino. Este procedimiento en dos pasos garantiza que los siete resultados sean coherentes entre sí.
Unidades CSS – Ejemplo de cálculo
Ejemplo: convierte 24px a rem, em, vw, vh y pt, con un tamaño de fuente de la raíz y del padre de 16px y una ventana de 1920×1080 (los valores que trae la calculadora por defecto).
\[ px = 24 \times 1 = 24 \]
\[ rem = \frac{24}{16} = 1.5 \quad em = \frac{24}{16} = 1.5 \]
\[ vw = \frac{24}{1920/100} = \frac{24}{19.2} = 1.25 \quad vh = \frac{24}{1080/100} \approx 2.2222 \]
\[ pt = 24 \times \frac{72}{96} = 18 \]
Resultado: 24px = 1.5rem = 1.5em = 1.25vw = 2.2222vh = 18pt.
Cómo usar el conversor de unidades CSS
- Introduce la longitud en el campo Valor — por ejemplo, 24. También funcionan los valores negativos, lo que resulta útil para márgenes negativos.
- Selecciona la unidad de ese valor en el desplegable Unidad CSS (px, rem, em, vw, vh, pt o %).
- Ajusta el tamaño de fuente de la raíz: el tamaño de fuente del elemento
<html>. Los navegadores utilizan 16px por defecto. - Ajusta el tamaño de fuente del padre: el tamaño de fuente calculado del elemento padre, necesario para las conversiones a em y %.
- Introduce el ancho y el alto de la ventana del navegador en píxeles; estos valores determinan los resultados en vw y vh.
- Lee todos los equivalentes a la vez en Valores convertidos, junto con la base de conversión, que muestra a cuántos píxeles equivale cada unidad en tu configuración.
Qué son las unidades CSS y por qué importan
Las longitudes en CSS se dividen en dos familias. Las unidades absolutas, como px y pt, tienen un tamaño fijo: la especificación de CSS define el píxel de referencia de modo que 1in = 96px = 72pt. Las unidades relativas dependen del contexto: rem remite al tamaño de fuente del elemento raíz, em al del padre, vw y vh al 1 % del ancho o del alto de la ventana, y % (en font-size) al tamaño de fuente del padre.
La unidad que elijas condiciona el comportamiento del diseño. Los valores en px se mantienen constantes al margen de las preferencias del usuario, lo que los hace predecibles para bordes o detalles finos, pero rígidos para la tipografía. Los valores en rem escalan con el tamaño de fuente de la raíz: si un usuario agranda el texto base del navegador, todo lo medido en rem crece proporcionalmente, un requisito clave de accesibilidad. Los valores en em se acumulan a través de elementos anidados, lo que puede dar resultados sorprendentes en estructuras profundas.
Las unidades de ventana hacen que la tipografía y el espaciado reaccionen al tamaño de la ventana. Un ancho fijado en 50vw ocupa siempre la mitad de la pantalla, por eso las secciones destacadas y la tipografía fluida suelen combinar vw con rem mediante clamp(). Como vw y vh cambian con cada redimensionado, convertirlos a px solo tiene sentido para un tamaño de ventana concreto: el que introduzcas en la calculadora.
Interpretar el resultado es sencillo: cada valor es la misma longitud física expresada en otra unidad. Si estás migrando un sistema de diseño de px a rem, la columna de rem te indica el valor del token que debes escribir; si vas a imprimir o comparar con herramientas de diseño que trabajan en puntos, la columna de pt te da el equivalente directo.
Supuestos, limitaciones y consejos prácticos
- El conversor asume el píxel de referencia estándar de CSS:
1in = 96px = 72pt. La salida física (impresa) puede variar ligeramente según el dispositivo. - El porcentaje se interpreta como relativo al tamaño de fuente del padre, lo cual es correcto para
font-size. Enwidth,height,marginypadding, el porcentaje se refiere a las dimensiones del padre, así que esos casos requieren otro valor de referencia. - em es relativo al tamaño de fuente del padre. Cuando se usa en una propiedad como
line-heightopaddingdel propio elemento, em remite al tamaño de fuente de ese elemento: ajusta el campo «Tamaño de fuente del padre» en consecuencia. - Los resultados en vw y vh solo son válidos para las dimensiones de ventana que hayas introducido. Prueba varios tamaños (p. ej., 1920×1080, 1366×768, 390×844) para ver cómo cambian los valores convertidos.
- Algunas configuraciones de navegador aplican un tamaño de fuente mínimo, lo que puede hacer que un texto muy pequeño basado en rem o em se muestre más grande de lo que predice el cálculo.
- Una regla práctica muy útil: con el tamaño de fuente de la raíz por defecto de 16px, 1rem = 16px, es decir, px ÷ 16 = rem. Si cambias la raíz a 10px, los valores en rem equivalen a px ÷ 10, y por eso muchos sistemas de diseño usan una raíz de 10px.
Si además necesitas convertir unidades de medida o de ingeniería, prueba nuestro conversor de unidades de potencia, el conversor de velocidad de transferencia de datos o el conversor de unidades de velocidad general.
Preguntas frecuentes
¿Cómo convierto px a rem a mano sin calculadora?
Divide el valor en píxeles entre el tamaño de fuente de la raíz. Con el valor por defecto del navegador de 16px, la fórmula es \( rem = px \div 16 \). Así, 24px = 1.5rem, 32px = 2rem y 12px = 0.75rem. A la inversa, multiplica: \( px = rem \times 16 \). Si el proyecto usa otro tamaño de raíz, como 10px en el popular truco del 62.5 %, basta con sustituir el 16 por ese valor.
¿Cuál es la diferencia entre em y rem, y cuándo debo usar cada uno?
rem remite siempre al tamaño de fuente del elemento raíz, así que 1.5rem significa lo mismo en cualquier punto del documento. em remite al tamaño de fuente del elemento padre (o del propio elemento en propiedades como padding y line-height), de modo que se acumula en los elementos anidados. Una pauta habitual: usa rem para tamaños de fuente y espaciados, así los valores son predecibles y respetan las preferencias del usuario; usa em cuando quieras que algo escale con el texto local, como el padding de un botón.
¿Cuántos píxeles son 1pt y cómo se relacionan pt y px con las pulgadas?
CSS define el píxel de referencia de modo que \( 1\text{in} = 96\text{px} = 72\text{pt} \). Esto hace que 1pt equivalga a \( 96/72 \approx 1.3333 \)px, y 1px a 0.75pt. Por eso los procesadores de texto y las herramientas de diseño para impresión que trabajan en puntos muestran números distintos a los de CSS: una fuente de 12pt se representa como 16px en pantalla. El conversor utiliza exactamente esta proporción para sus resultados en pt.
¿Por qué mis valores en em no coinciden con los que muestra el navegador?
Hay dos causas frecuentes. Primera, em se acumula: si un padre tiene font-size de 1.25em sobre una raíz de 16px (20px) y el hijo está en 1.5em, el hijo queda en 30px, no en 24px. Segunda, en propiedades como padding, margin y line-height de un elemento, em remite al tamaño de fuente del propio elemento, no al del padre. En tales casos, introduce en la calculadora el tamaño de fuente calculado del propio elemento en el campo «Tamaño de fuente del padre».
¿Los valores en vw y vh son iguales en todas las pantallas?
No. 1vw es el 1 % del ancho de la ventana actual, así que el mismo valor en vw equivale a una cantidad distinta de píxeles según el tamaño de la ventana. Por ejemplo, 10vw son 192px en una pantalla de 1920px de ancho, pero solo 39px en un móvil de 390px. Convierte vw/vh a px solo para un tamaño de ventana concreto: introduce en la calculadora las dimensiones exactas a las que apuntas y vuelve a ejecutarla para los demás puntos de ruptura.
¿Cómo averiguo el tamaño de fuente del raíz que usa realmente un sitio web?
Abre las herramientas de desarrollo del navegador, inspecciona el elemento <html> y consulta su font-size calculado en el panel de estilos o en el de valores calculados. Si ninguna regla CSS lo sobrescribe, se aplica el valor por defecto del navegador de 16px. Ten en cuenta que algunos sitios usan el truco del 62.5 %, fijando la raíz en 10px para que 1rem = 10px. Comprueba también si alguna extensión del navegador o un ajuste de tamaño mínimo de fuente altera el valor efectivo.
¿Es mejor usar px o rem por accesibilidad?
Para los tamaños de fuente se prefiere, en general, rem, porque escala cuando los usuarios aumentan el tamaño de texto base del navegador, mientras que el texto en px queda fijo e ignora esa preferencia. Esto importa a las personas con discapacidad visual y lo exigen directrices de accesibilidad como las WCAG. px sigue siendo adecuado para bordes, sombras y líneas finas donde el escalado no interesa. Un enfoque práctico: rem para tipografía y espaciado, px para detalles decorativos críticos en píxeles, y clamp() con rem y vw para la tipografía fluida.