Convertir px a rem
Con esta herramienta puedes convertir px a rem (y al revés): escribe un valor, ajusta el tamaño base y obtén rem, em, pt, porcentaje y vw, con una tabla de tamaños habituales.
Ejemplo: Valor 24 · Unidad del valor: px (píxeles) · Tamaño de fuente del elemento raíz (rem) 16 px · Tamaño de fuente del elemento padre (em, %) 16 px · Ancho de la ventana (vw) 1440 px → Resultado: 24 px = 1,5 rem. Fuente: W3C – CSS Values and Units Module Level 4: absolute lengths (1in = 96px = 72pt) y font-relative lengths (em, rem). Actualizado: .
Cómo se calcula
Con los 16 px por defecto del navegador, 24 px son exactamente 1,5 rem. La fórmula es rem = px / tamaño base, y al revés px = rem · tamaño base.
Cómo se calcula
rem es relativo al tamaño de fuente del elemento raíz (html), em al del elemento padre. 1 pt es 1/72 de pulgada y 1 px 1/96 de pulgada, así que 1 pt = 4/3 px; 12 pt equivalen a 16 px. Un porcentaje en el tamaño de fuente se refiere a la fuente padre. 1 vw es el 1 % del ancho de la ventana. La herramienta convierte primero tu valor a px y de ahí a todas las demás unidades.
Conviene saber
- Si un visitante amplió la fuente del navegador, los valores en rem se escalan solos, mientras px permanece fijo (accesibilidad, WCAG 1.4.4).
- Si tu CSS define
html { font-size: 62.5% }, 1 rem = 10 px. Entonces escribe 10 como tamaño base. - em se acumula: 1,5 em dentro de un elemento con 1,5 em da 2,25 veces. rem evita ese problema.
- rem es habitual para espaciados y tamaños de fuente; px sigue siendo útil para líneas finas y bordes.
Preguntas frecuentes
¿Cómo se convierte px a rem?
Dividiendo el valor en px entre el tamaño de fuente base. Con 16 px: 24 px / 16 = 1,5 rem.
¿Cuántos px es 1 rem?
Por defecto 16 px, porque los navegadores fijan así la fuente raíz. Si alguien cambia la fuente del navegador o define font-size en html, el valor cambia.
¿Qué diferencia hay entre em y rem?
rem siempre se refiere a la fuente raíz (html), em a la del elemento padre. Por eso los valores em pueden multiplicarse en elementos anidados.
¿Cuántos pt son 16 px?
12 pt, porque 1 pt = 4/3 px. Al revés, 10 pt son unos 13,33 px.
Fuentes y base legal
- W3C – CSS Values and Units Module Level 4: absolute lengths (1in = 96px = 72pt) y font-relative lengths (em, rem)
- MDN – CSS-Längeneinheiten (rem, em, vw)
- W3C WCAG 2.2 – Success Criterion 1.4.4 Resize Text (las unidades relativas respetan el tamaño de fuente del usuario)
Última actualización: · Principios editoriales
Herramientas relacionadas
- Convertir puntos a mmConvierte puntos a mm: 1 pt = 0,3528 mm (1/72 de pulgada). Tamaño de letra en milímetros, picas, pulgadas y píxeles a cualquier resolución, con tabla.
- Píxeles a cmConvierte píxeles a cm con la resolución correcta: píxeles a cm, mm y pulgadas, longitud a píxeles y el tamaño de impresión de una foto a 300 ppp.
- Generador de degradados CSSCrea degradados CSS: lineales, radiales o cónicos, con los puntos de color que quieras, ángulo y color de respaldo. Vista previa y CSS listo para copiar.
- Generador de box-shadow CSSCrea sombras CSS con controles: varias sombras, desplazamiento, desenfoque, expansión, color con transparencia, inset y plantillas. Vista previa y CSS listo.
- Generador de border-radius CSSRedondea esquinas con controles: todas a la vez o una por una, en px o %, elípticas con 8 valores; forma abreviada más corta, vista previa y CSS listo.
- Combinar tipografías: pares para títulos y textoPares de fuentes para títulos y texto con vista previa en vivo, CSS para copiar y disponibilidad en Windows, Mac, iPhone y Android, solo fuentes del sistema.
- Cuál es mi dirección IPMuestra al instante tu dirección IP pública, detecta si es IPv4 o IPv6 y explica la diferencia. Gratis: tu IP no se guarda.
- Calculadora CSS clampCalculadora CSS clamp para tamaños de fuente y espaciados fluidos: introduce valor mínimo, máximo y rango de viewport y copia el clamp() ya hecho.
- Dígito de verificación NIT: cálculo del DV paso a pasoDígito de verificación NIT: escribe el NIT o la cédula y obtén el DV con el método de la DIAN (pesos 3, 7, 13, 17…), o pega un NIT con guion para validarlo.