Conversor px ⇄ rem

Para qué sirve

El CSS moderno usa a menudo rem y em en lugar de píxeles para diseños escalables y accesibles. Esta herramienta hace la conversión al instante, así no tienes que calcularla de cabeza.

Base de 16 px

Por defecto 1 rem = 16 px (el tamaño de texto por defecto del navegador). Si has cambiado el tamaño de la raíz con font-size, cambia la base para obtener el valor correcto.

rem y em: la diferencia que se paga cara

Parecen dos nombres para lo mismo y no lo son. El rem es siempre relativo a la raíz del documento, así que 1,5rem vale la misma medida en cualquier punto de la página. El em es relativo al padre, y por tanto se compone: un elemento a 1,2em dentro de otro a 1,2em resulta 1,44 veces más grande, y a tres niveles de anidamiento 1,73. Es el motivo por el que una lista dentro de una lista, o un menú dentro de una caja, salen con el texto creciendo sin que nadie lo haya pedido.

La regla práctica que aguanta casi siempre: rem para los tamaños de texto y para los espacios de la página, em solo cuando se quiere de verdad que una medida siga al texto del elemento — por ejemplo el relleno de un botón, que así queda proporcionado a cualquier tamaño que se le dé.

Por qué no se usan píxeles para el texto

No es purismo: es que quien necesita letra más grande cambia el tamaño de texto por defecto en los ajustes del navegador, y un texto escrito en px no se mueve ni un píxel. Con los rem, en cambio, toda la página crece a la vez y mantiene la maquetación. Es una de las pocas decisiones de CSS con un efecto directo en quien tiene problemas de vista, y es también el motivo por el que las pautas de accesibilidad la piden.

Para bordes, sombras y líneas finas los píxeles van perfectos: ahí el tamaño no tiene que seguir al texto, y un borde de 1px es justo lo que se quiere.

El truco del 62,5%, y por qué conviene dejarlo

Durante años se escribió html { font-size: 62.5% } para que 1rem valiera 10px y las cuentas se hicieran de cabeza. Funciona, pero tiene dos defectos: quien lee ese CSS sin saber del truco ve todas las medidas equivocadas, y sobre todo el texto base se queda en 10px para todo lo que no tenga una regla más específica. Con una página como esta no hace falta hacer la cuenta de cabeza, así que la base puede quedarse como es naturalmente.

Un detalle que sorprende: en las media queries el rem no mira el font-size que hayas puesto en la raíz, sino siempre el predeterminado del navegador. Un @media (min-width: 40rem) vale 640px aunque hayas puesto el 62,5%.

Herramientas cercanas

Para los colores del CSS está Conversor de colores, para las sombras Generador de box-shadow y para las esquinas redondeadas Generador de border-radius. Si hay que aligerar el CSS antes de publicarlo, la página es Minificar CSS.