Convertidor de unidades CSS (px / rem / em / pt)
Convierte un valor entre píxeles, rem, em y puntos directamente en tu navegador.
Cómo funciona
Un uso típico en el lado de integración front-end: una maqueta de Figma expresa todos los tamaños en píxeles (16px, 24px, 32px...), pero las buenas prácticas de accesibilidad recomiendan usar unidades relativas como rem para el CSS, para que el texto crezca correctamente cuando un usuario aumenta el tamaño de fuente predeterminado de su navegador. Introduce el valor en píxeles leído en la maqueta, elige «px» hacia «rem» con el tamaño de fuente base habitual del sitio (16px por defecto), y pega directamente el resultado en tu CSS.
¿Por qué es necesario el tamaño de fuente base?
rem y em son unidades relativas: 1rem equivale al tamaño de fuente del elemento raíz (html), mientras que 1em equivale al tamaño de fuente del elemento actual. Sin conocer este tamaño de referencia (generalmente 16px por defecto en un navegador, pero a veces modificado por una hoja de estilos), es imposible convertir hacia o desde px. Por eso esta herramienta te pide que indiques el tamaño de fuente base a usar como referencia.
¿Cuál es la diferencia entre rem y em?
rem («root em») se calcula siempre respecto al tamaño de fuente del elemento raíz del documento, lo que lo hace predecible en cualquier parte de una página. em se calcula respecto al tamaño de fuente del elemento padre más cercano, lo que puede acumularse. Esta herramienta trata ambos de la misma manera, usando el tamaño base que indiques como referencia común.
La conversión se ejecuta enteramente en tu navegador gracias a WebAssembly: tus valores nunca se transmiten a un servidor.