Conversor de unidades CSS: px, rem, em, %, pt, vw

Un píxel de CSS no es un píxel de tu pantalla

Las unidades absolutas están fijadas entre sí por definición: una pulgada son exactamente 96 píxeles, un punto es 1/72 de pulgada, una pica son doce puntos. Eso hace que 1pt sea exactamente 1.3333px y 1cm unos 37.8px, siempre y en cualquier dispositivo.

Ninguna de ellas, sin embargo, es física. En una pantalla con el doble de densidad de píxeles, un píxel de CSS se pinta con cuatro píxeles de hardware, y en un teléfono el navegador aplica todavía otra escala para que el texto siga siendo legible a un brazo de distancia. width: 1in no mide una pulgada de vidrio. En una hoja de estilos de impresión sí la mide, y ese es el único sitio donde pt, cm y mm se ganan de verdad su lugar.

rem es la preferencia de alguien

rem significa el tamaño de fuente calculado del elemento raíz html. Son 16px porque ese es el tamaño de texto por defecto del navegador, y ese valor por defecto es una preferencia que quien lee puede cambiar. A quien puso 20px porque 16 le cuesta leer, todo lo que dimensionaste en rem le sale un 25% más grande. Todo lo que dimensionaste en píxeles se le queda exactamente igual de pequeño. Ese es todo el argumento a favor de rem en tipografía, espaciado y media queries, y es mejor argumento que el que da la mayoría de las guías de estilo.

También quiere decir que conviene evitar html { font-size: 16px }. Sobrescribe la preferencia con tu propio número y cancela en silencio el beneficio para todo el que la haya cambiado.

El truco del 62.5% y lo que cuesta

Poner html { font-size: 62.5% } hace que 1rem equivalga a 10px para quien está en el valor por defecto, así que 1.6rem se lee como "16px" y la aritmética mental desaparece. Sigue siendo proporcional a la preferencia del usuario, así que no es inaccesible por sí solo. El costo es que ahora todo tamaño de fuente heredado parte de 10px: tienes que reajustar el body, y cualquier librería de componentes u hoja de estilos de terceros dimensionada en rem encoge más de un tercio. En un proyecto que controlas por completo, está bien. Dentro del sistema de diseño de otra persona, es una fuga lenta.

em se acumula, y la excepción que lo vuelve confuso

em se refiere al tamaño de fuente del propio elemento, excepto en la propiedad font-size, donde se refiere al del padre. Esa única excepción es la razón de que las listas anidadas a 0.9em sigan encogiendo nivel tras nivel, mientras que padding: 1em en un botón se resuelve contra el tamaño ya escalado de ese mismo botón. Usado a propósito, es la forma más limpia de construir un componente que escala como una unidad: defines un tamaño de fuente y dejas que el padding, los espacios y los radios lo sigan en em. Usado por accidente, es donde se va una hora.

El porcentaje significa algo distinto en cada propiedad

No hay una referencia única para %. El ancho se resuelve contra el ancho del bloque contenedor. El alto se resuelve contra su alto, y solo si ese alto es definido, que es la razón de que height: 100% tantas veces no haga nada. El que sorprende: los porcentajes de padding y margin se resuelven contra el ancho del bloque contenedor, incluidos padding-top y margin-bottom. Ese es el mecanismo en el que se apoyaba el viejo truco de relación de aspecto padding-top: 56.25%, antes de que existiera aspect-ratio. La tabla de arriba trata % como un porcentaje del tamaño de fuente, que es lo que significa en font-size y line-height.

Las unidades de viewport y sus dos bugs famosos

1vw es el uno por ciento del ancho del viewport, y en los navegadores de escritorio con barras de desplazamiento clásicas ese ancho incluye la barra. Pon width: 100vw en una página que se desplaza en vertical y te llevas una barra horizontal de regalo. En el móvil el problema era el alto: 100vh se medía con la barra de direcciones oculta, así que una sección de alto completo quedaba cortada por abajo. Para eso existen svh, lvh y dvh, que miden el viewport pequeño, el grande y el dinámico respectivamente. dvh es el que sigue a la barra mientras se oculta, lo que también significa que puede provocar saltos del layout mientras haces scroll.

Dónde se detiene este conversor

px, rem, pt, las unidades físicas y las de viewport son exactas en cuanto das los cuatro números. em y % no lo son: su valor real depende de dónde esté el elemento en la cascada, y ningún conversor puede leer por ti el tamaño de fuente calculado del padre; la respuesta solo es tan correcta como el número que escribiste. ch y ex faltan a propósito, porque dependen de las métricas de los glifos de la fuente real (el ancho de avance del "0" y la altura de la x), que cambian con cada archivo de fuente y no se pueden deducir con aritmética. Y las cifras del viewport se leen de esta ventana, que no te dice nada útil sobre el teléfono de quien te visita.

Última actualización 19 de septiembre de 2026