Pasar la maqueta a código
El diseño da 24 px de espaciado y la hoja de estilos debe recibir 1,5rem. Es el camino más frecuente en el trabajo diario con interfaces.
Convierte píxeles a rem con cualquier base
Con el valor predeterminado del navegador, 24 píxeles son 1,5rem y 14 píxeles son 0,875rem. Escribe la medida de la maqueta, ajusta el tamaño de fuente base y pasa el resultado directamente a la hoja de estilos.
Loading tool editor...
PUBLICIDAD
¿Para qué convertir píxeles a rem?
Los píxeles pasan a rem con una sola división: el número de píxeles entre el tamaño de fuente base. Con el valor predeterminado del navegador esa base es de 16 px, así que 24 píxeles dan 1,5rem y 14 píxeles dan 0,875rem. La unidad rem se refiere al tamaño de texto del elemento html, la raíz del documento [1].
Es el sentido más frecuente en el día a día. La maqueta llega con medidas en píxeles, porque así cuentan los programas de diseño, y la hoja de estilos se escribe en rem para que la maquetación responda a los ajustes de quien lee.
El resultado lleva cuatro decimales, porque con base 16 px un solo píxel son exactamente 0,0625rem y los tamaños de texto dan cifras como 0,875 o 1,125.
Más abajo encontrarás una tabla con 30 valores a tres bases, cómo automatizar la conversión dentro del proyecto y un repaso de propiedades CSS con la respuesta sobre cuáles pasar a rem. El camino inverso lo cubre el convertidor de rem a píxeles.
¿Cómo calcular píxeles a rem a mano? Fórmula y ejemplo
La fórmula tiene una sola operación: rem = píxeles ÷ tamaño de fuente base. Es la inversa de la multiplicación que convierte rem en píxeles.
Ejemplo con un espaciado de 20 px: con base 16 sale 20 ÷ 16 = 1,25rem. Ese mismo valor con la base de 10 px de la técnica del 62,5% da 2rem, porque dividir entre diez se hace de cabeza.
Las medidas de una maqueta suelen dar fracciones: 18 píxeles son 1,125rem, 30 píxeles son 1,875rem y 22 píxeles son 1,375rem. Las tres son exactas y así las guarda la mayoría de los sistemas de diseño, de modo que las escribes tal cual en la hoja de estilos.
La unidad em se calcula igual, solo que dividiendo entre el tamaño de fuente del elemento padre en vez del de la raíz: ese cálculo lo hace el convertidor de píxeles a em. Si la medida va a parar al papel, ese mismo archivo lo resuelve el convertidor de píxeles a pulgadas.
PUBLICIDAD
¿Cuántos rem tienen los valores habituales en píxeles?
| Valor en píxeles | Base 16 px (predeterminada) | Base 10 px (62,5%) | Base 20 px (texto ampliado) |
|---|---|---|---|
| 1 px | 0,0625 rem | 0,1 rem | 0,05 rem |
| 2 px | 0,125 rem | 0,2 rem | 0,1 rem |
| 4 px | 0,25 rem | 0,4 rem | 0,2 rem |
| 6 px | 0,375 rem | 0,6 rem | 0,3 rem |
| 8 px | 0,5 rem | 0,8 rem | 0,4 rem |
| 10 px | 0,625 rem | 1 rem | 0,5 rem |
| 12 px | 0,75 rem | 1,2 rem | 0,6 rem |
| 14 px | 0,875 rem | 1,4 rem | 0,7 rem |
| 16 px | 1 rem | 1,6 rem | 0,8 rem |
| 18 px | 1,125 rem | 1,8 rem | 0,9 rem |
| 20 px | 1,25 rem | 2 rem | 1 rem |
| 22 px | 1,375 rem | 2,2 rem | 1,1 rem |
| 24 px | 1,5 rem | 2,4 rem | 1,2 rem |
| 28 px | 1,75 rem | 2,8 rem | 1,4 rem |
| 30 px | 1,875 rem | 3 rem | 1,5 rem |
| 32 px | 2 rem | 3,2 rem | 1,6 rem |
| 36 px | 2,25 rem | 3,6 rem | 1,8 rem |
| 40 px | 2,5 rem | 4 rem | 2 rem |
| 44 px | 2,75 rem | 4,4 rem | 2,2 rem |
| 48 px | 3 rem | 4,8 rem | 2,4 rem |
| 56 px | 3,5 rem | 5,6 rem | 2,8 rem |
| 60 px | 3,75 rem | 6 rem | 3 rem |
| 64 px | 4 rem | 6,4 rem | 3,2 rem |
| 72 px | 4,5 rem | 7,2 rem | 3,6 rem |
| 80 px | 5 rem | 8 rem | 4 rem |
| 96 px | 6 rem | 9,6 rem | 4,8 rem |
| 128 px | 8 rem | 12,8 rem | 6,4 rem |
| 160 px | 10 rem | 16 rem | 8 rem |
| 192 px | 12 rem | 19,2 rem | 9,6 rem |
| 256 px | 16 rem | 25,6 rem | 12,8 rem |
Las tres bases cubren tres situaciones: 16 px es lo predeterminado del navegador, 10 px sale de la técnica del 62,5% y 20 px es una cifra típica en quien ha ampliado el texto en sus ajustes.
¿Cómo convertir píxeles a rem automáticamente en un proyecto?
Para un valor suelto basta el convertidor de arriba. Para una hoja de estilos entera el cálculo pasa a una herramienta que lo ejecuta cada vez que se compila el proyecto.
En un preprocesador escribes una función que divide la cifra entre la base. En Sass queda así: @function rem($px) { @return math.div($px, 16) * 1rem; }, y luego en la regla pones padding: rem(24) y obtienes 1.5rem. La base vive entonces en un solo sitio y se cambia una vez.
La segunda vía trabaja sobre la hoja ya terminada y no obliga a cambiar de forma de escribir. El complemento postcss-pxtorem, enganchado al paso de compilación, recorre el archivo de salida y cambia píxeles por rem según la base configurada. En los últimos 30 días el registro npm contabilizó más de 870.000 descargas [2].
La tercera vía son las variables CSS. Escribes --space-6: 1.5rem una vez en la hoja y luego te refieres al nombre en lugar de a la cifra. La conversión se hace entonces una sola vez, al definir la escala, y no en cada regla.
PUBLICIDAD
¿Qué propiedades pasar a rem y cuáles dejar en píxeles?
| Propiedad CSS | ¿Pasar a rem? | Por qué |
|---|---|---|
| font-size | Sí | El núcleo de todo el asunto: el tamaño de texto debe responder al ajuste del navegador |
| padding y margin | Sí | El espacio alrededor del texto debe crecer con él, o con cuerpo mayor queda apretado |
| ancho de una columna de texto | Sí | La longitud de línea se mide en caracteres, así que el ancho sigue al tamaño de texto |
| line-height | No, sin unidad | Un multiplicador suelto como 1.5 se hereda bien en cualquier anidamiento |
| border-width | No | Un filete debe seguir siendo un filete, sea cual sea el tamaño de texto |
| box-shadow | No | La sombra es un efecto gráfico sin relación con el tamaño del texto |
| border-radius | Normalmente no | El radio describe la forma del elemento, no su contenido |
| puntos de corte de media queries | Sí, pero en em | Dentro de una media query el navegador cuenta desde el tamaño de texto predeterminado y no desde el elemento html, así que el em se comporta de forma previsible <a class="source-ref" href="#zrodlo-3">[3]</a> |
Al reescribir una hoja de estilos existente no hace falta convertirlo todo. Cambiar píxeles por rem compensa allí donde una medida deba crecer junto con el texto de quien lee.
Píxel y rem, uno al lado del otro
| Característica | px | rem |
|---|---|---|
| Punto de referencia | Ninguno, es un valor absoluto | Tamaño de fuente del elemento html |
| Valor predeterminado | 1 px = 1/96 de pulgada | 1rem = 16 px |
| Reacción a los ajustes de quien lee | Se queda igual | Escala con ellos |
| Dónde se indica | Maquetas, programas de diseño, archivos de imagen | Hojas de estilos, sistemas de diseño |
| Uso habitual | Bordes, sombras, filetes | Tamaños de texto, espaciados, anchos |
| Automatización | Valor escrito directamente | Función en el preprocesador o complemento en la compilación |
PUBLICIDAD
¿Cuándo te hará falta esta conversión?
Fijar la escala del proyecto
En vez de convertir en cada regla, defines una vez variables CSS o una función en el preprocesador y te refieres a los nombres.Reescribir una hoja antigua
Al migrar de píxeles a rem conviertes tamaños de texto y espaciados, mientras que bordes y sombras se quedan como están.Comprobación de accesibilidad
Los valores escritos en rem crecen con el ajuste de quien lee, que es lo que pide el criterio WCAG 1.4.4 sobre ampliar el texto al 200% [4].
Convertir Píxeles a otras unidades
Explorar otros conversores de unidades
pt a pxrem a pxem a pxcm a pxmm a pxcm a pulgadaspulgadas a cmmm a pulgadaspulgadas a mmmillas a kmkm a millasmetros a piespies a metrospulgadas a piespies a pulgadaslibras a onzasonzas a librasml a onzasonzas a mllitros a galonesgalones a litroskg a libraslibras a kgkg a gramosgramos a kgkg a stonestone a kgpulgadas a pxpies a pxpicas a pxmetros a pxHEX a RGBRGB a CMYKbytes a KBKB a bytesKB a MBMB a KBMB a GBGB a MBKB a GBGB a KBGB a TBTB a GBKB a TBTB a KBUnix a fechaDEC a BINDEC a HEXMbps a MB/s
Fuentes
- CSS Values and Units Module Level 4 — W3C
- postcss-pxtorem — npm
- CSS values and units – length — MDN Web Docs
- Understanding SC 1.4.4: Resize Text (WCAG 2.2) — W3C
Todos los valores de las tablas se calcularon a partir de las definiciones de las unidades y se comprobaron aritméticamente antes de publicarlos. Los datos históricos y los nombres de las unidades locales proceden de las fuentes indicadas arriba.
Última revisión del contenido: · redactado y verificado por el equipo de Arteon
Preguntas frecuentes
¿Cuántos rem es 1 píxel?
Con la base predeterminada de 16 px un píxel son 0,0625rem. Con la base de 10 px de la técnica del 62,5% ese mismo píxel da 0,1rem, y con texto ampliado a 20 px da 0,05rem.
¿Cómo se convierten px a rem?
Divide el número de píxeles entre el tamaño de fuente base. Con los 16 px predeterminados sale 24 ÷ 16 = 1,5rem. El convertidor de arriba hace esa división para cualquier base de 1 a 100 px.
¿Cuántos rem son 24 px?
1,5rem con base 16 px, 2,4rem con base 10 px y 1,2rem con base 20 px. El valor 1,5rem es un tamaño habitual de titular de sección.
¿Cuántos rem son 14 px?
0,875rem con la base predeterminada de 16 px. Suelen llevar ese valor las etiquetas de los campos y el texto de ayuda que va debajo.
¿Cuántos rem son 20 px?
1,25rem con base 16 px. Con base 10 px salen 2rem redondos, lo que es un argumento a favor de la técnica del 62,5% en proyectos con una escala de espaciado amplia.
¿Cuántos rem son 12 px?
0,75rem con base 16 px. Es el tamaño de texto más pequeño que suele usarse en interfaces: por debajo la lectura se vuelve incómoda.
¿Cuántos rem son 40 px?
2,5rem con base 16 px, 4rem con base 10 px y 2rem con base 20 px. Los valores de ese orden describen espaciados entre secciones, no tamaños de texto.
¿Cuántos rem son 80 px?
5rem con la base predeterminada de 16 px. Con base 10 px salen 8rem y con 20 px salen 4rem.
¿Hay que redondear el resultado en rem?
Valores como 0,875 o 1,875rem se escriben tal cual, y así los guarda la mayoría de los sistemas de diseño. El navegador los calcula con exactitud, mientras que redondear a 0,88rem desplazaría el tamaño de texto una fracción de píxel.
¿Cómo convertir píxeles a rem automáticamente?
En un preprocesador escribes una función que divide entre la base y luego pones rem(24) en vez de una cifra. Sobre una hoja terminada lo hace el complemento postcss-pxtorem en el paso de compilación. La tercera vía son las variables CSS con la escala definida una vez.
¿Hay que pasar toda la hoja de estilos a rem?
Los tamaños de texto, los espaciados y los anchos de columna, sí, porque deben crecer con el ajuste de quien lee. Bordes, sombras y filetes se quedan en píxeles, y la altura de línea se escribe sin unidad, como simple multiplicador.
¿Qué unidad conviene en las media queries?
El em. Dentro de una media query el navegador resuelve las unidades relativas contra el tamaño de texto predeterminado y no contra el valor puesto en el elemento html, así que un punto de corte escrito en em se comporta de forma previsible incluso si el proyecto usa la técnica del 62,5%.
Ayúdanos a mejorar nuestras herramientas
¿Tienes una idea para una función, has encontrado un fallo o quieres proponer otra herramienta? Escríbenos: respondemos en menos de 24 horas.