Convertidor de px a rem
Convierte píxeles a rem para CSS, diseño responsive, accesibilidad, sistemas de diseño y maquetación web con tamaño raíz configurable.
El valor raíz suele ser 16 px en navegadores, pero puede cambiar si el proyecto define otro `font-size` en `html` o si el usuario ajusta preferencias.
Puedes escribir coma decimal. Los valores negativos se permiten porque en CSS pueden existir márgenes o desplazamientos negativos.
Atajos de interfaz
Conversiones recientes
Por qué convertir px a rem
En CSS, px es una unidad absoluta de pantalla y rem es una unidad relativa al tamaño de fuente raíz. Convertir px a rem permite crear interfaces más escalables, especialmente cuando se quiere respetar la configuración de accesibilidad del usuario. En un navegador típico, si el elemento `html` tiene 16 px, entonces 1 rem equivale a 16 px. Con esa base, 24 px son 1,5 rem, 32 px son 2 rem y 8 px son 0,5 rem.
En proyectos reales, esta conversión aparece en sistemas de diseño, componentes de producto, webs corporativas, ecommerce y aplicaciones internas. Un equipo puede diseñar en Figma con píxeles, mientras desarrollo implementa tokens en rem para tipografía, espacios, radios o tamaños de componentes. El conversor evita hacerlo de cabeza y permite cambiar la base cuando el proyecto usa 10 px, 15 px, 18 px u otro valor. También ayuda en auditorías de accesibilidad, porque una interfaz basada en rem suele responder mejor al aumento del tamaño de texto que una interfaz rígida en píxeles.
Fórmulas con tamaño raíz
Ejemplos de maquetación
Tabla rápida con raíz de 16 px
| px | rem | Uso habitual |
|---|---|---|
| 4 | 0,25 | Separación mínima o borde fino. |
| 8 | 0,5 | Espaciado pequeño. |
| 12 | 0,75 | Texto auxiliar o margen compacto. |
| 14 | 0,875 | Texto secundario. |
| 16 | 1 | Tamaño base frecuente. |
| 20 | 1,25 | Subtítulo o icono medio. |
| 24 | 1,5 | Espaciado de tarjeta o heading pequeño. |
| 32 | 2 | Sección o título visible. |
| 48 | 3 | Separación grande. |
Consejos de localización y accesibilidad
- No conviertas todo a ciegas.Los bordes de 1 px, sombras y detalles gráficos pueden quedarse en px. Rem brilla especialmente en tipografía y espaciado.
- Comprueba textos largos en español.Las palabras y frases en español pueden ocupar más que en inglés. Usar rem no evita revisar saltos de línea, botones y etiquetas reales.
- Respeta el tamaño del usuario.Si alguien aumenta la fuente del navegador, una interfaz basada en rem puede adaptarse mejor que una fija en px.
- Documenta la raíz.Si tu equipo usa tokens, deja claro si las conversiones parten de 16 px, 10 px u otra base. Sin esa referencia, el rem pierde significado práctico.
Trabajo práctico con diseño en español
Cuando una interfaz se localiza al español, no solo cambian las palabras. Cambia la longitud de etiquetas, botones, mensajes de error, menús y estados vacíos, y también puede cambiar el tono esperado. Un botón que en una maqueta cabe con «Save» puede necesitar más espacio con «Guardar cambios». Si el sistema de diseño usa rem de forma coherente, es más fácil ajustar tamaños y espaciados sin romper la escala general. Aun así, la conversión de px a rem debe acompañarse de pruebas visuales con texto real.
Los equipos que trabajan con Figma, CSS y componentes suelen recibir medidas en píxeles porque el lienzo del diseño funciona así. Convertir a rem ayuda a crear tokens reutilizables: `0.5rem` para 8 px, `1rem` para 16 px, `1.5rem` para 24 px y `2rem` para 32 px con raíz 16. Pero no todos los valores merecen convertirse. Un borde de 1 px puede seguir como 1px para mantener nitidez. Una sombra puede tener valores en px porque describe un efecto visual, no una relación tipográfica.
En proyectos públicos, banca, salud, educación o administración, la accesibilidad pesa más que la comodidad del cálculo. Si el usuario aumenta el tamaño de texto, los componentes deben seguir siendo utilizables. Por eso conviene probar con zoom del navegador, preferencias de fuente, móviles pequeños y nombres reales de provincias, documentos o trámites. El conversor te da la equivalencia matemática; la calidad del producto depende de revisar la experiencia completa con contenido local.
Una pauta sencilla es convertir primero los tamaños repetidos y dejar los valores excepcionales para revisión manual. Así el CSS queda limpio sin perder intención visual.
Preguntas frecuentes
P: ¿Cuántos rem son 16 px?
R: Con raíz de 16 px, 16 px equivalen a 1 rem. Si la raíz cambia, el resultado también cambia.
P: ¿Por qué no usar siempre px?
R: Px es cómodo y preciso, pero rem facilita escalado, accesibilidad y consistencia en sistemas de diseño.
P: ¿Rem y em son iguales?
R: No. Rem se basa en el tamaño raíz del documento. Em se basa en el tamaño del elemento o de su contexto, por eso puede acumularse.
P: ¿Tiene sentido una raíz de 10 px?
R: Algunos proyectos la usan para calcular mentalmente más rápido, pero puede tener implicaciones de accesibilidad y mantenimiento. Conviene decidirlo como equipo.