Conversor de PX a REM (y REM a PX)
Convierte px a rem y rem a px al instante. Cambia el font-size raíz para adaptarlo a tu proyecto y ve el resultado en tiempo real. Gratis, sin registro.
Tabla de PX a REM (base 16px)
Valores de px habituales convertidos a rem, asumiendo el font-size raíz por defecto de 16px.
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 64px | 4rem |
Qué hace este conversor de px y rem
Convierte medidas expresadas en px a rem y a la inversa. El valor de referencia —la font-size del elemento raíz (html)— puede cambiarse libremente y el resultado se recalcula al instante.
Lo primero que conviene entender es que rem se apoya en el tamaño de letra del elemento raíz, y ese tamaño lo puede cambiar quien visita la página. Si en los ajustes del navegador se agranda el tamaño de fuente, todo lo expresado en rem crece con él: en eso consiste precisamente la unidad. Por esa razón no debe escribirse html { font-size: 16px } en la hoja de estilos. Hacerlo anula la preferencia de la persona y cierra el camino a quien necesita agrandar el texto para leerlo. Si quiere alterar la referencia, use una notación relativa como % o rem.
En segundo lugar, la diferencia entre em y rem está en si se acumulan. em toma como base el tamaño de letra del elemento donde se encuentra, de modo que en estructuras anidadas se va multiplicando; rem mira siempre al elemento raíz y no cambia por muchos niveles que haya.
Hay además un punto que despista a menudo: el em dentro de una media query no se apoya en el elemento raíz, sino en el tamaño por defecto del navegador. Aunque reduzca la font-size de html, los puntos de corte no se moverán con ella.
Cómo se usa
- Fije el valor de referencia En la mayoría de los navegadores el valor por defecto es 16px. En la duda, déjelo en 16.
- Introduzca px o rem Escriba en cualquiera de los dos lados y el otro mostrará la conversión al momento.
- Copie la notación CSS La cadena con su unidad puede llevarse tal cual.
- Consulte la tabla de equivalencias Los tamaños de uso frecuente aparecen juntos, listos para elegir.
Consejos para aprovecharla mejor
- Por defecto 1rem equivale a 16px, pero los usuarios con baja visión suelen aumentar el tamaño de texto predeterminado del navegador: los valores en rem siguen ese ajuste automáticamente, mientras que los valores en px no.
- Los puntos de ruptura de las media queries suelen escribirse en px por tradición, pero font-size, padding y margin son buenos candidatos para usar rem, así el equilibrio general del diseño se mantiene cuando el usuario cambia su preferencia de tamaño de texto.
- Algunos equipos definen html { font-size: 62.5%; } para que 1rem equivalga a 10px y el cálculo mental sea más sencillo (1.6rem = 16px). Introduce 10 como valor base arriba para convertir con esa convención.
- Una convención habitual es usar rem para los valores de diseño a nivel de página y em para el espaciado interno de un componente reutilizable, de modo que el componente escale según su propio font-size donde sea que se use.
Situaciones de uso
Llevar a CSS las medidas de un diseño
Los diseños llegan normalmente en px. Con la referencia fijada, el paso a rem es mecánico.
Unificar unidades en un proyecto existente
Al ordenar código con px y rem mezclados, conviene tener la tabla a mano.
Cambiar la referencia y ver el efecto
Al mover el valor base, todo lo expresado en rem se desplaza con él. Aquí puede medir cuánto.
Decidir los puntos de corte de una media query
El em de una media query se apoya en el valor por defecto del navegador, no en el raíz. La premisa de la conversión es otra.
Términos empleados
- rem
- Unidad relativa al tamaño de letra del elemento raíz (html). Su referencia no cambia por mucho que se anide.
- em
- Unidad relativa al tamaño de letra del elemento donde aparece. En estructuras anidadas se va multiplicando.
- Elemento raíz
- El elemento
html, el más externo del documento. Toda conversión de rem parte de su tamaño de letra. - Tamaño por defecto del navegador
- 16px en la mayoría de los entornos. Quien visita la página puede cambiarlo, y es justamente eso lo que hay que respetar.
- Fijar la font-size de html en px
- Anula la preferencia de la persona, así que conviene evitarlo. Para alterar la referencia, use una notación relativa como
%. - em dentro de una media query
- Se apoya en el valor por defecto del navegador, no en el elemento raíz. Cambiar la font-size de html no mueve los puntos de corte.
Preguntas frecuentes
A propósito — Cómo rem llegó a la especificación de CSS
La unidad rem apareció por primera vez en el borrador del W3C «CSS3 Values and Units», publicado en septiembre de 2006. Hasta que se generalizó, casi todos los sitios web dimensionaban el texto y el espaciado con px o em, y em tenía un problema conocido: al basarse en el font-size del elemento padre, anidar elementos hacía que el tamaño efectivo se acumulara de formas difíciles de predecir en diseños complejos.
rem se diseñó precisamente para resolver ese problema, referenciando un único punto de anclaje siempre disponible: el elemento raíz, sin importar cuán anidado esté un elemento. Mientras había que dar soporte a Internet Explorer 8 y versiones anteriores, que no entienden rem, era habitual escribir primero un valor en px como alternativa y luego el valor en rem (font-size: 16px; font-size: 1rem;) (IE9 e IE10 solo lo admitían en parte: lo ignoraban en la propiedad abreviada font y en los pseudoelementos). Cuando dejó de ser necesario dar soporte a esos IE antiguos, a mediados de la década de 2010, esa alternativa dejó de hacer falta.
Hoy en día, construir toda la escala tipográfica y de espaciado de un sitio alrededor de rem es una práctica habitual de accesibilidad: permite que la página completa escale con elegancia cuando un visitante aumenta el tamaño de texto de su navegador, en lugar de romperse o recortar contenido. Guías como WCAG (Web Content Accessibility Guidelines) recomiendan explícitamente no depender solo de unidades fijas para el tamaño del texto.