Los diseños suelen medirse en píxeles, pero el CSS escrito en rem se adapta a la configuración de tamaño de fuente del visitante, lo que hace que un sitio sea más fácil de leer para quienes necesitan un texto más grande. Este conversor pasa de una unidad a otra usando tu tamaño de fuente raíz.
Cifras comprobadas el por Muhammad Ahmad con W3C: Comprender WCAG 1.4.4 Cambio de tamaño del texto. Los precios y las normas cambian, así que confírmalos con la fuente oficial antes de basarte en ellos. Cómo verificamos las cuentas
Cómo funciona
Un rem equivale al tamaño de fuente del elemento html raíz. Los navegadores lo fijan en 16px por defecto, así que 1rem son 16px salvo que tu CSS lo cambie.
Para convertir píxeles a rem, divide entre el tamaño de fuente raíz. Para convertir rem a píxeles, multiplica por él.
Los puntos son una unidad de impresión. En CSS, 1px se define como 0,75pt, así que la calculadora multiplica los píxeles por 0,75.
Un ejemplo resuelto
Con el tamaño raíz por defecto de 16px, 24px son 1,5rem (24 ÷ 16), y 18pt en términos de impresión. En sentido contrario, 0,875rem son 14px.
Más ejemplos
14px son 0,875rem con una base de 16px, y 2,5rem son 40px.
Errores frecuentes
- Usar px para los tamaños de fuente, lo que ignora el ajuste de tamaño de texto del usuario.
- Suponer que las media queries en rem usan tu tamaño de fuente raíz; usan el valor por defecto del navegador.
- Anidar valores en em, que se acumulan.
- Convertir bordes y líneas finas a rem.
Preguntas frecuentes
¿Deben los bordes y las sombras ir en rem?
Normalmente no. Un borde de 1px o una sombra de línea fina deben seguir siendo de 1px con cualquier tamaño de texto, así que los píxeles sirven para los detalles finos. Usa rem para el texto, los espacios y los tamaños de maquetación.
¿Cuál es la diferencia entre rem y em?
Rem es siempre relativo al tamaño de fuente raíz, así que significa lo mismo en toda la página. Em es relativo al tamaño de fuente del elemento padre, por lo que se acumula cuando los elementos están anidados.
¿Debo fijar el tamaño de fuente raíz en 62,5 %?
Algunos sitios fijan html { font-size: 62.5% } para que 1rem equivalga a 10px y las cuentas sean más fáciles. Funciona, pero después tienes que volver a definir un tamaño legible en el body. Mantener los 16px por defecto y usar un conversor evita ese paso extra.
¿Por qué usar rem si diseño en píxeles?
Si un visitante aumenta el tamaño de fuente por defecto de su navegador, el texto dimensionado en rem crece con él y el dimensionado en px no. Usar rem para los tamaños de fuente, y a menudo para los espacios, respeta ese ajuste.
¿Cómo convierto px a rem?
Divide el valor en píxeles entre el tamaño de fuente raíz, que es de 16px por defecto en los navegadores. 24px ÷ 16 = 1,5rem.
¿Cuántos píxeles son 1rem?
16px por defecto, porque los navegadores fijan el tamaño de fuente raíz en 16px. Si un usuario aumenta el tamaño de fuente por defecto de su navegador, 1rem crece con él, que es la razón principal para usar rem.