Conversor de px a rem
Con una raíz de 16 px, 16 px son 1 rem y 0,5 rem son 8 px. Pase longitudes CSS entre píxeles y rem según la fuente raíz de su hoja de estilos y obtenga un valor listo para pegar, con fórmula y pasos. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Valor
- 16
- Origen
- px
- Destino
- rem
- Base
- 16
- Resultado
- 1 rem
- Convertido
- 1
- CSS
- 1rem
Un conversor de px a rem transforma una longitud CSS en píxeles o rem a la otra unidad usando el tamaño de fuente raíz que realmente distribuye. Introduzca el valor numérico, elija from y to como px o rem, y fije base como el font-size de la raíz (html) en píxeles —normalmente dieciséis en navegadores de escritorio, a veces catorce o dieciocho en sistemas de diseño—. La herramienta devuelve la magnitud convertida, una cadena css lista para pegar como one rem o sixteen px, la fórmula empleada y la sustitución paso a paso para que los tokens de diseño y las revisiones de código sigan alineados. Las migraciones de temas, las auditorías de tipografía fluida, el traspaso de Figma a CSS y el escalado de fuente para accesibilidad necesitan todos esa misma matemática determinista de rem igual a px sobre raíz sin abrir el inspector del navegador.
Qué significan px y rem para la tipografía CSS
En CSS, una longitud en píxeles (px) es una unidad de longitud absoluta usada en maquetaciones, bordes y tokens de tipografía heredados. Una longitud rem es relativa al font-size del elemento raíz —casi siempre el elemento html—, así que un rem equivale a lo que sea ese font-size raíz en píxeles. Si la raíz es dieciséis píxeles, entonces dieciséis px equivalen a un rem, treinta y dos px equivalen a dos rem, y cero coma cinco rem equivalen a ocho px.
Los sistemas de diseño prefieren rem para escalas tipográficas y espaciado porque los usuarios que amplían la fuente predeterminada del navegador, o que fijan una raíz mayor por accesibilidad, obtienen un crecimiento proporcional sin cazar cada píxel codificado a mano. Convertir en sentido contrario importa cuando una librería aún emite tokens en px o cuando una herramienta de diseño exporta tamaños fijos en píxeles y necesita declaraciones rem que coincidan con la raíz de producción.
La conversión en sí es elemental: rem es igual a px dividido por base, y px es igual a rem multiplicado por base, donde base es el font-size raíz en píxeles. Lo que hace tropezar a los equipos no es la fórmula sino las bases mal emparejadas —suponer dieciséis cuando la hoja de estilo fija el font-size de html en sesenta y dos coma cinco por ciento (diez px) o en ciento doce coma cinco por ciento (dieciocho px)—.
Esta calculadora obliga a poner la base a la vista para que el resultado siempre coincida con la escala que afirma usar.
Consejos prácticos, límites y búsquedas relacionadas
Mantenga value y base dentro del rango absoluto publicado para que los productos no desborden a un resultado no finito que el solucionador deba rechazar. Prefiera enviar números en lugar de cadenas preformateadas cuando controle el cliente; las cadenas numéricas solo se aceptan cuando coinciden con un patrón numérico finito estricto.
Documente el font-size raíz junto a cada tabla de tokens: si html usa sesenta y dos coma cinco por ciento del predeterminado del usuario, base es diez px para un valor de agente de usuario de dieciséis píxeles, y un titular de veinticuatro px se convierte en dos coma cuatro rem, no en uno coma cinco rem.
Esta página apunta a quienes buscan un conversor de px a rem, una calculadora de rem a px o una herramienta de tipografía de tamaño de fuente raíz CSS; no es un conversor de em relativo a un elemento padre, no es un generador de clamp fluido y no es una calculadora de unidades de viewport.
Prefiera esta capacidad cuando ya conoce el tamaño raíz en píxeles y solo necesita la conversión de longitud; si necesita estilos calculados en vivo de una página real, use herramientas del navegador en su lugar. Las comprobaciones de ida y vuelta son fáciles: convierta px a rem y de vuelta con la misma base y confirme el valor original dentro del mismo redondeo de doce decimales.
Qué puede hacer con ella
Tablas de tokens de diseño desde píxeles de Figma
Exporte tamaños de espaciado y tipografía como px desde herramientas de diseño, fije base a su font-size raíz de producción y emita tokens rem que coincidan con la hoja de estilo en vivo.
Migración de temas de px a rem
Convierta por lotes escalas heredadas de tipografía y espaciado en píxeles a rem documentando la base exacta usada en cada lote.
Preguntas frecuentes
¿Cómo se convierte px a rem?
Divida la longitud en píxeles por el font-size raíz en píxeles: rem = px / base. Con una raíz de 16px, 24px se convierte en 1.5rem.
¿Cómo se convierte rem a px?
Multiplique la longitud rem por el font-size raíz en píxeles: px = rem × base. Con una raíz de 16px, 1.25rem se convierte en 20px.
¿Convierte unidades em o %?
No. Solo convierte entre px y rem con una base raíz explícita en píxeles. Em es relativo a un elemento padre, no a la raíz.
¿Es gratis el conversor de px a rem?
La herramienta de navegador es gratis y se ejecuta localmente.
¿Qué base uso si mi hoja de estilos fija html al 62,5 %?
Use 10 px, porque el 62,5 % de los 16 píxeles por defecto del navegador son diez píxeles. Con esa base, un título de 24 px son 2,4 rem, no los 1,5 rem que saldrían con base 16.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/conv/typography-px-rem \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"value":16,"from":"px","to":"rem","base":16}'const res = await fetch("https://api.kit.forhosting.com/conv/typography-px-rem", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"value": 16,
"from": "px",
"to": "rem",
"base": 16
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/conv/typography-px-rem",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"value": 16,
"from": "px",
"to": "rem",
"base": 16
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/conv/typography-px-rem", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"value":16,"from":"px","to":"rem","base":16}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"value":16,"from":"px","to":"rem","base":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/conv/typography-px-rem", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"value": 16,
"from": "px",
"to": "rem",
"base": 16
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "conv.typography_px_rem",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
max_abs | 1000000000000 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
Cuando base es cero la escala queda indefinida, así que la API devuelve un error invalid_input claro en lugar de inventar longitudes infinitas. La ruta es aritmética pura —sin red, sin semillas aleatorias, sin dependencia del reloj de pared— de modo que el ejecutor gratuito del navegador y la API de prepago devuelven el mismo JSON tras el redondeo de decimales fijos cada vez que lo llama.
Cómo llamar a la API y qué devuelve
Base debe ser distinto de cero; los valores absolutos iguales o inferiores a uno por diez elevado a menos quince se tratan como cero y se rechazan. Envíe un cuerpo JSON con cuatro campos obligatorios: value (alias amount, n, length), from (alias from_unit, unit_from, source), to (alias to_unit, unit_to, target) y base (alias root, root_font_size, root_px, base_px). Value y base deben ser números finitos cuyos valores absolutos se mantengan dentro del límite publicado de un billón para que los productos intermedios sigan siendo finitos en precisión doble IEEE en el Worker y en el navegador. From y to deben resolverse a px o rem tras la normalización de alias —se aceptan pixel, pixels, rem, rems, root em y grafías similares; los nombres de unidad desconocidos devuelven invalid_input—. En caso de éxito, la respuesta devuelve value, from, to y base redondeados; fija result y converted a la misma magnitud de salida redondeada; unit a la unidad de destino; css a una cadena compacta como one rem o twenty four px; formula a rem igual a px sobre base, px igual a rem por base, o el mensaje de identidad cuando from es igual a to; message a un breve resumen en inglés; y steps a un array ordenado de líneas de sustitución. La validación fallida —campos ausentes, números no finitos, valores fuera de los límites absolutos, unidades desconocidas, base cero o un resultado no finito— devuelve invalid_input y nunca se cobra. El precio es una tarifa plana de $0.002 por solicitud correcta con elemento unitario y precio unitario marginal cero.
Consejos prácticos, límites y búsquedas relacionadas
Cuando from es igual a to, la herramienta devuelve el value sin cambios para que los flujos puedan normalizar unidades sin un caso especial, pero la base sigue siendo obligatoria y se sigue validando como distinta de cero. Pares de ejemplo para enseñanza y pruebas: dieciséis px a rem con base dieciséis da un rem; uno coma cinco rem a px con base dieciséis da veinticuatro px; veinte px a rem con base diez da dos rem; y base cero con cualquier valor demuestra la ruta dura de invalid_input. Las tareas fallidas que devuelven invalid_input no consumen saldo de prepago, lo que mantiene baratos los scripts exploratorios cuando los desarrolladores fijan base a cero a propósito.
Casos de integración
Pruebas unitarias para ayudantes de longitud CSS
Genere pares px↔rem verificados más rechazos deliberados de base cero para librerías de utilidades de frontend y paquetes de sistemas de diseño.
Preguntas técnicas
¿Qué ocurre cuando base es cero?
La conversión queda indefinida. Esta herramienta devuelve invalid_input en lugar de dividir por cero o inventar longitudes infinitas.